静态页面实例-京东商城03
16.清除浮动（补充）
有时候在页面布局的时候，父盒子的高度无法确定，是由内部子盒子的高度撑起的，但如果子盒子设置浮动以后，会使父盒子的高度会变为0，就相当于父盒子在标准流中没有位置了，这种情况就是父盒子发生了高度塌陷，而清除浮动就是清除父盒子高度塌陷时对页面布局产生的影响。
17.块级元素水平垂直居中的实现
块级元素的水平居中可以使用margin: 0 auto;属性来实现，但是此刻块级元素还在标准流中，且块级元素的位置自由度低。
所以我们可以将块级元素定位（固定定位或者绝对定位），并设置水平或者垂直方式达到相对于浏览器或者父盒子50%的位置，然后再让元素回退自己宽度或者高度的一半，这样就能实现块级元素垂直或者水平居中的效果。
在块级元素回退自己宽度或者高度一半时，只能设置margin-left或者margin-top，并没有margin-right或者margin-bottom两个属性。
18.透明度 opacity
所有浏览器都支持opacity属性，但是IE8以及更早的版本支持替代的filter属性。
opacity属性在设置透明度时，元素的内容也会随之透明，会使用户看不清具体的内容。
所以我们可以对元素设置背景颜色的透明作为突出点，具体属性为：background: rgba(0,0,0,.3);
其中rgba的值分别为：r代表红色值；g代表绿色值；b代表蓝色值；a代表透明度。a代表的透明度和opacity一致，取值范围为0~1，但是这里的a值只改变背景颜色的透明度，不影响元素的内容。
19.相邻元素的层级
由于定位元素的层级关系，相邻多个元素设置同样的定位，这时选中前面元素时会出现元素显示不全的问题，如以下代码：
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 500px;
border: 10px solid blue;
float: left;
margin-left: -10px;
position: relative; /*定位了的元素，默认的都会有层级的概念，而且默认的层级都是0*/
}
div:hover {
border-color: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
这时选中其中前面的div时，它的边框会有部分被后面的div覆盖了，如果想要将它全部显示出来，需要在hover中增加其定位后的层级，即增加如下代码：
div:hover {
border-color: red;
position: relative;
z-index: 1;
}
提高该div触发时的层级。
