静态页面实例-京东商城03-白红宇

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

阅读量：6816 次

发布时间：2019-06-26

本文共 1238 字，大约阅读时间需要 4 分钟。

16.清除浮动（补充）

有时候在页面布局的时候，父盒子的高度无法确定，是由内部子盒子的高度撑起的，但如果子盒子设置浮动以后，会使父盒子的高度会变为0，就相当于父盒子在标准流中没有位置了，这种情况就是父盒子发生了高度塌陷，而清除浮动就是清除父盒子高度塌陷时对页面布局产生的影响。

块级元素的水平居中可以使用margin: 0 auto;属性来实现，但是此刻块级元素还在标准流中，且块级元素的位置自由度低。

所以我们可以将块级元素定位（固定定位或者绝对定位），并设置水平或者垂直方式达到相对于浏览器或者父盒子50%的位置，然后再让元素回退自己宽度或者高度的一半，这样就能实现块级元素垂直或者水平居中的效果。

在块级元素回退自己宽度或者高度一半时，只能设置margin-left或者margin-top，并没有margin-right或者margin-bottom两个属性。

所有浏览器都支持opacity属性，但是IE8以及更早的版本支持替代的filter属性。

opacity属性在设置透明度时，元素的内容也会随之透明，会使用户看不清具体的内容。

所以我们可以对元素设置背景颜色的透明作为突出点，具体属性为：background: rgba(0,0,0,.3);

其中rgba的值分别为：r代表红色值；g代表绿色值；b代表蓝色值；a代表透明度。a代表的透明度和opacity一致，取值范围为0~1，但是这里的a值只改变背景颜色的透明度，不影响元素的内容。

由于定位元素的层级关系，相邻多个元素设置同样的定位，这时选中前面元素时会出现元素显示不全的问题，如以下代码：

<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>

</body>

这时选中其中前面的div时，它的边框会有部分被后面的div覆盖了，如果想要将它全部显示出来，需要在hover中增加其定位后的层级，即增加如下代码：

div:hover {

border-color: red;

position: relative;

z-index: 1;

}

提高该div触发时的层级。

转载于:https://www.cnblogs.com/chendu/p/5705780.html

你可能感兴趣的文章