认识盒子模型
理解选择器的权重
核心知识
- position和z-index
- display
- float
- margin
显示模式display
block
inline
inline-block 行内块
外边距margin
margin padding 受盒子的宽高影响
实际应用中 会先全部清除：
* {
margin: 0;
padding: 0;
}
浮动float
-
一般遵循：一个元素加了浮动，其他兄弟元素都加浮动（一浮全浮）
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
-
清除浮动
方法一
额外标签法（不推荐）在子级标签使用 最后一个浮动后面加块级标签，
如：
<div class="clear"></div>
.clear {
clear: both;
}
方法二
在父级样式中使用 添加
overflow: hidden;
方法三（推荐）
在父级标签中使用 添加属性clearfix（伪元素法）
.clearfix:after {
content: "."; //内容为“.”
display: block; //加入的这个元素转换为块级元素
clear: both; //清除左右两边浮动
visibility: hidden; //可见度设为隐藏
line-height: 0;
height: 0;
font-size:0;
}
.clearfix {
*zoom:1;
} //针对于IE6
方法四（推荐）
在父级标签中使用 添加属性clearfix（双伪元素法）
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}