目录
注意：企业开发种，不常用隔墙法清楚浮动。因为会存在大量的无意义的标签
CSS盒子模型
盒子模型得宽度和高度
1、内容得宽度和高度：
通过标签的width和height属性设置的宽度和高度
图中蓝色区域即内容的宽度和高度
2、元素的宽度和高度：
宽度：左边框+左内边距+width+右内边距+右边框
高度：上边框+上内边距+height+下内边距+下边框
图中红线部分即元素的宽度和高度
3、元素空间得宽度和高度
宽度：左外边距+左边框+左内边距+width+右内边距+右边框+右外边距
高度：上外边距+上边框+上内边距+height+下内边距+下边框+下外边距
图中红线部分
-----------------------------------------------------------------------------------------------------------------------------------------
CSS定位流
了解
定位流分类：相对定位、绝对定位、固定定位、静态定位
->相对定位
->了解
添加属性：position:relative;
->什么是相对定位：相对于自己以前在标准流种的位置来移动。
->相对定位是不脱离标准流的，会继续在标准流种占用一份空间
->在定位中，同一个方向上的定位属性只能使用一个。
->由于相对定位不脱离标准流，所以在相对定位中是区分块级元素/行内元素/行内块级元素。
->由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性的时候会影响到标准流的 布局
->相对定位的应用：
->用于微调
->配合绝对定位使用
->绝对定位
->了解
绝对定位是相对于body定位。
添加属性：position:absolute;将标签变成绝对定位。
->绝对定位的元素是脱离标准流的
->绝对定位不区分块级元素/行内元素/行内块级元素，可以设置宽高
->如果一个绝对定位元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点(只要这个绝对定位元素的祖先元素都可以;定位流是指：绝对定位/相对定位/固定定位;定位流中只有静态定位不行。)
设置绝对定位水平居中：
设置绝对定位元素的left：50%；
设置绝对定位元素的margin-left:负的元素宽度的一半；
如：元素宽度是300px;设置这个元素水平具中
left:50%;
margin-left:-150px;
->固定定位
设置属性：position:fixed;
固定定位的元素脱离标准流，不会占用标准流的空间
->静态定位
默认元素为静态定位
--------------------------------------------------------------------------------------------------------------------
浮动与清除浮动
了解
CSS中元素分为：块级元素、行内元素、行内块级元素
一、标准流中的两种排版方式
1、垂直排版
元素是块级元素，会垂直排版
2、水平排版
元素是行内元素，或行内块级元素，会水平排版
浮动
->浮动流排版方式
1、浮动流是一种“半脱离标准流”的排版方式
2、浮动流只有一种排版方式，就是水平排版，只能设置某个元素左对齐或右对齐。
3、在浮动流中：margin: 0 auto; 无效，不能使用
->特点：
1、在浮动流中不区分块级元素、行内元素、行内块级元素
无论什么元素都水平排版，显示在同一行。
2、浮动流中，块级元素、行内元素、行内块级元素都可以设置宽高
->什么是浮动元素的脱标
脱标：脱离标准流
当某一个元素浮动之后，那么这个元素看上去就像从标准流中删除了一样，这个就是浮动元素的脱标。
->浮动元素脱标之后有什么影响？
如果前面一个元素浮动了，而后面一个元素没有浮动，前面的一个元素就会盖住后面的一个元素。
->浮动元素排序规则
1、相同方向上的浮动元素，先付东的元素会显示在前面，后浮动的元素会显示在后面
2、不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
3、浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定
清除浮动
第一种：给后面的盒子添加clear属性
clear取值：
none：默认取值，按照浮动元素的排序规则来排序
left:不要找前面的左浮动元素
reght:不要找前面的右浮动元素
第二种：隔墙法
1、外墙法
在两个盒子中间添加一个额外的块级元素
给这个额外添加的块级元素设置clear：both;属性
外墙法可以让第二个盒子使用margin-top属性，但是不能给第一个盒子使用margin-bottom属性
2、内墙法
在第一个盒子中所以在子元素最后添加一个额外的块级元素
给这个额外添加的元素设置clear：both；属性
内墙法可以让第二个盒子使用margin-top属性，也可以第一个盒子使用margin-bottom属性
3、外墙法和内墙法的区别：
外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度
注意：企业开发种，不常用隔墙法清楚浮动。因为会存在大量的无意义的标签
第三种：利用伪元素选择器和隔墙法相结合
伪元素选择器：CSS3种新增内容
作用：给指定标签的内容前面添加一个子元素或者给制定标签的内容后面添加一个子元素
格式：
在指定标签前面添加一个子元素
标签名称::before{
属性名称：值；
/*指定添加的子元素的内容*/
content:"添加内容";
/*指定添加的子元素的宽度和高度*/
width:50px;
height:50px;
/*指定添加的子元素的显示方式*/
display:block;
/*隐藏添加的子元素*/
visibility:hidden;
/*给添加的子元素设置clear:both属性*/
clear:both；
}在指定标签后面添加一个子元素
标签名称::after{
属性名称：值；
}
如果给元素设置宽高属性后无效，则需要设置其属性：display:block;
由于伪元素选择器是CSS3新增内容，所以不兼容IE6
需要设置兼容IE6的属性,对指定标签设置以下属性后，即可兼容IE6
标签名称{
/*兼容IE6*/
*zoom:1;
}