CSS（续）

一、盒模型
1.内容框
width height
overflow:visible/hidden/scroll/auto;
2.边框
1）边框实现
2）单边框及三角标实现
3）轮廓线
属性：outline
取值：width style color;(同border)
常用：取消输入框焦点状态自带的轮廓线
input:focus{outline:none}
区别：轮廓线不占位，边框实际占位
4）边框圆角
属性：border-radius
取值：像素值或百分比，设置圆角半径
使用：像素值用于设置圆角效果，百分比可以改变元素的显示形状（50%，改为正圆或椭圆）
5）盒阴影(了解)
属性：box-shadow
取值：offsetX offsetY blur (spread) color;
使用：
1.浏览器窗口和元素自身都可以构建坐标系，一律以左上角为原点，向右向下为X轴和Y轴的正方向。offsetX/offsetY用于设置阴影的偏移距离，正值代表正方向，负值对应负方向
2.属性值blur用于设置阴影的模糊程度，值越大越模糊
3.spread选填，设置阴影的延伸距离
4.color设置阴影 颜色，默认黑色
3.内边距
作用：调整内容框与边框之间的距离
属性：padding
取值：像素值,可取1/2/3/4个值
单方向内边距：
padding-top
padding-right
padding-bottom
padding-left
只取一个值
默认带有内边距的元素：ul,ol,input,button
4.外边距
作用：调整元素边框与边框之间的距离
属性：margin
取值：像素值，取值规律同padding
特殊取值：
1）左右自动外边距 auto
2）外边距取负值，可以对元素位置进行微调
单方向外边距:
margin-top
margin-right
margin-bottom
margin-left
外边距合并：
1）垂直方向
1.子元素的margin-top作用于父元素上
解决：为父元素添加顶部边框或为父元素添加顶部内边距padding-top:0.1px;
2.同时设置垂直方向上的外边距，取最大值
2）水平方向
1.行内元素对盒模型的属性不完全支持，不支持width/height,不支持垂直方向上的边距
2.水平方向上外边距叠加显示
清除元素的默认边距：
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0;
padding:0;
/清除列表的项目符号/
list-style:none;
}
5.盒模型计算
属性：box-sizing
作用：调整元素盒模型的计算方式
取值：content-box/border-box
1）大部分元素在文档中的实际占位，由盒模型相关的属性累加计算。指定的width/height设置的是内容框的大小(content-box)
2）按钮在文档中的实际占位，由width/height + margin计算得到。指定的width/height设置的是包含边框在内的区域大小(border-box)
作业：模拟百度搜索框，输入框50050 按钮15050
二、布局方式
1.标准流布局/文档流/静态流
默认的布局方式，按照元素类型和代码书写顺序，从上到下，从左至右依次显示
2.浮动布局
属性：float
取值：left/right
特点：
1）元素设置浮动，会按照浮动方向，停靠在其他元素的边缘。多个元素同时浮动，会依次停靠在前一个元素的边缘。
2）浮动元素会从它在文档中的原始位置脱离文档流，表现为悬浮在父元素上方，在文档中不占位，后面正常的元素会向前占位。如果所有的子元素都浮动，父元素的高度为0.
3）块元素设置浮动之后，尺寸由内容决定；行内元素设置浮动，就可以设置宽高了。
作业：
模拟百度导航栏（用列表实现）

一、布局方式
1.文档流
2.浮动布局
属性：float
取值：left/right
特点：
1）浮动元素按照浮动方向依次停靠在前一个元素的边缘，一旦设置浮动，就会脱离文档流，在文档中不占位，可以调整宽高。
2）"文字"环绕效果:浮动元素不占位，后面正常元素向前占位，被浮动元素遮挡。但是浮动元素只会遮挡元素位置，不影响元素内容的显示，内容会围绕浮动元素周围显示。
3）浮动元素如果与行内或行内块元素显示时，见缝插针，允许共行显示

	问题：
		1）浮动元素不占位，后面正常元素向前占位，影响布局。解决：清除浮动
		属性:clear
		取值:left/right/both
		使用:为正常元素添加clear属性，使其不受前面元素左浮或右浮的影响
		2）子元素全部浮动，导致父元素高度为0，影响父元素自身背景及边框样式的显示，影响整体布局。
		解决：
			1.内容确定时，可以给父元素固定高度（导航栏）
			2.内容不确定时，可以为父元素设置overflow:hidden;(保留浮动元素的高度)
			3.标准的清除浮动
				在父元素的末尾手动添加空的子元素，设置clear:both;
3.定位布局
	属性：position
	取值：relative/absolute/fixed
	使用：
		1）已定位元素：只有设置position属性，取值为relative/absolute/fixed,才能称为已定位元素
		2）偏移属性:调整已定位元素显示位置
			top：设置元素与参照物顶部的距离
			left
			right
			bottom
		3）分类
			1.相对定位relative
				特点：相对定位的元素不会脱离文档流；参照元素在文档中的原始位置进行偏移
			2.绝对定位absolute
				特点：绝对定位的元素脱离文档流，不占位；参照离他最近的已定位的祖先元素进行偏移，没有的话，参照浏览器窗口的原点偏移
				使用：父元素相对定位，子元素绝对定位
			3.固定定位fixed
				特点：固定定位的元素会脱离文档流；参照浏览器窗口进行定位；不跟随页面滚动而滚动
		4）堆叠次序调整
			1.已定位的元素与正常的元素发生堆叠,永远是已定位的元素在上方显示
			2.同为已定位元素发生堆叠,看代码书写顺序，后来者居上
			3.调整堆叠次序：
				属性：z-index
				取值：无单位的数值，值越大越靠上
				注意：只能调整已定位元素的堆叠次序

一、背景属性
1.背景颜色
background-color
除表单控件外，其他元素默认背景色为透明色
2.背景图片相关
1）background-image:url("");
1.图片尺寸>元素尺寸，从元素左上角开始渲染，超出部分不可见
2.图片尺寸<元素尺寸，默认会对图片进行重复平铺，直至铺满元素。
2）background-repeat
设置背景图片的重复方式，默认沿水平和垂直两个方向同时重复。
取值：repeat(默认)/repeat-x/repeat-y/no-repeat(不重复平铺)
3）background-position
设置背景图片的显示位置
取值：
1.取像素值 x y
设置背景图片在元素坐标系中的显示位置
2.方位值
水平：left/center/right
垂直：top/center/bottom
注意：如果某个方向上缺省，默认为center
3.百分比 x y
计算坐标点(元素尺寸-图片尺寸)*x%
特殊值：
0% 0% -> left top
100% 100% -> right bottom
50% 50% -> center
4）background-size:width height;
调整背景图片的尺寸
可以取像素值；也可以取百分比，根据元素尺寸计算宽高
特殊：
cover:等比拉伸至足够大，完全覆盖元素，超出部分不可见
contain:等比拉伸至足够大，刚好被元素容纳，不能超出元素。
3.背景属性简写
background:color url() repeat position;
注意：
1）只有设置背景图片url()之后，才能设置重复方式和位置
2）background-size单独设置
二、文本属性
1.字体样式
1）font-size 设置字体大小
2）font-weight 设置字体粗细
取值：normal(400)/bold(700)
取关键字或无单位数值，100~900值越大，越粗
3）font-style 设置斜体
取值：italic
4）font-family 设置字体名称
取值：如果名称中出现中文或空格，必须加引号；可取多个值做备选字体，属性值之间使用逗号隔开
5）字体属性简写
属性：font
取值：style weight size family;
注意：
1.按顺序书写属性值
2.size和family是必填项,style和weight根据需要书写
2.文本样式
1）color 文本颜色
2）text-decoration 设置文本装饰线
取值：none/underline/overline/line-through
注意：装饰线的颜色与文本色保持一致
3）text-align 设置文本的水平对齐方式
取值：left(默认)/center/right/justify(两端对齐)
4）line-height 设置行高
常用：设置行高与高度保持一致，实现一行文本的垂直居中
三、显示属性
1.列表属性
list-style:none; 清除列表的项目符号
2.鼠标显示形状
属性：cursor
取值：
default 鼠标显示为箭头
pointer 鼠标显示为手指
text 鼠标悬停在文本内容上，默认显示为"I"