静态页面实例-京东商城02

标签：

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到无穷大。

静态页面实例-京东商城02

标签：

原文地址：http://www.cnblogs.com/chendu/p/5701921.html