11. 标准流中的间距问题
布局的时候,我们会遇到以下几种情况:
1. 相邻的行内块元素之间有默认几个像素的间距;
2.行内元素之间会出现空格合并现象;
当遇到上述情况时,需要使用浮动来将这些多余的间隔清除,使布局更加紧凑。
12. border-radius 设置边框半径
此属性为css3中的,可以设置一个矩形或正方形的弧度。
border-radius为复合属性,分别可以设置四个角的圆弧半径,顺序为:左上、右上、右下、左下。
这四个值具有上限,其峰值为宽度或高度的一半(取两个值中的最小值),当这四个值到达峰值时,会将元素变成圆形或者椭圆形。
13. 元素的margin值
在布局中需要个各种元素设置margin的值,而对于行内元素来说,左右的margin值可以起左右,但是上下的margin值是不起左右的。
14. 清除浮动
在个元素设置浮动时,即将元素脱离了标准流,可能或出现布局混乱的情况,所有我们需要使用清除浮动来将布局归整。
可以满足清除浮动的方法有以下几种:
1. 给父盒子设置一个固定的高度;
2. 在所有子盒子的下方增加一个div,并给该div设置clear:both;的属性;
3. 给父盒子设置overflow:hidden;的属性;
4. 伪元素或者双伪元素清除法:
.clearfix:before, .clearfix:after {
/*清除浮动,最好最标准的写法*/
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*IE/7/6*/ /*兼容IE6下的写法*/
}
15. 定位元素的层级
定位(固定、绝对或相对定位)的元素都有一个层级的属性。如果对相邻的多个元素设置了同一个定位,这些元素的层级都默认为0,但是后面的元素会覆盖掉前面的元素。如果想让前面的元素在后面的元素之上,这个时候就需要改变元素的层级关系。
用z-index属性来实现,z-index的取值范围为0到无穷大。