静态页面实例-京东商城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 {
             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触发时的层级。

原文地址:https://www.cnblogs.com/chendu/p/5705780.html