盒子模型
盒子模型组成
边框(border)
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框样式 |
border-color | 边框颜色 |
solid:实线边框
dashed:虚线边框
dotted:点线边框
border-collapse: collapse;//合并相邻的边框
外边距
外边距可以让盒子水平居中
盒子必须指定宽度。
盒子左右的外边距都设置为auto。
行内或者行内块元素水平居中给其父元素添加text-align:center即可。
圆角边框
border-radius:length;
盒子阴影
box-shadow
浮动(float)
网页布局准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
浮动特性:
1、浮动元素会脱离标准流。
2、浮动的元素会一行显示并元素顶部对齐。
3、浮动的元素会具有行内块元素的特性。
浮动的盒子不再保留原先的位置。
多个盒子设置了浮动,会按照属性值一行内显示并且顶端对齐排列。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
清除浮动
清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不影响下面的标准流了。
清除浮动:clear: both;
清除浮动的方法:
1、额外标签法也称为隔墙法
2、父级添加overflow属性
3、父级添加afer伪元素
4、父级添加双伪元素
额外标签法
加<div class="clear"></div> .clear{clear:both;}
注:要求这个新的空标签必须是块级元素。
父级添加overflow
给父级添加overflow属性,将其属性值设置为hidden、auto或scroll。
:afer伪元素法
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1;
}
双伪元素清除浮动
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}