float: 设置元素浮动,元素浮动后就脱离了标准的放置位置,原本竖着排放的块元素会浮动的依次向左边浮动;而它后面的元素因为该元素已经浮动,脱离原来位置,而获得了该元素的标准摆放位置。如下图:
可以看到由于浮动导致“版权信息”获得了divs的标准放置位置,且divs依次向左靠齐。
html代码如下:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.divs {
width: 200px;
height: 200px;
background-color: yellow;
margin-left: 50px;
float: left;
margin-top: 20px;
}
#copy {
width: 100%;
height: 100px;
background-color: gray;
text-align: center;
/* z-index: 1;
position: absolute;
clear: left; */
}
</style>
</head>
<body>
<div id="div">
<p id="p1">我是P1</p>
<p id="p2">我是P2</p>
</div>
<hr />
<div class="divs">内容一</div>
<div class="divs">内容二</div>
<div class="divs">内容三</div>
<div class="divs">内容四</div>
<div id="copy">版权信息</div>
</body>
clear: 清除上一个元素浮动造成的影响,如果不注释clear:left; 那么可以看到清除浮动后,会把上一个元素当作标准位置,而将下一个元素放置在它应该放置的下一个块的位置。清除浮动后效果图如下:
z-index: 元素的堆叠顺序。数值越大越靠近用户,比如1比-1更加靠近用户,所以z-index=1;的会完全显示,而z-index=-1的会被遮住。
注释掉clear:left; 然后取消对position: absolute;和z-index: 1;的注释,可以发现,版权信息显示在黄色背景之上。z-index属性必须和position定位一起使用才有效。
overflow:该属性可以设置当内容溢出块状元素的时候,是显示还是隐藏还是以滚动条等等的方式来处理。
代码如下:
/*CSS代码*/
#copy {
width: 100%;
height: 100px;
background-color: gray;
text-align: center;
/* z-index: 1;
position: absolute; */
clear: left;
overflow: hidden;
}
#copy p{
width: 100%;
height: 50px;
}
<!-- html代码 -->
<div id="copy">
<p>版权信息1</p>
<p>版权信息2</p>
<p>版权信息3</p>
</div>
页面效果:
可以看到本该显示三个段落的,因为设置了overflow: hidden;来隐藏溢出的部分,因此第三个段落就没有显示。
下面来说说百分号和像素来指定width和height的区别:
使用百分号的时候,该百分号对应的元素会随着窗口大小的改变而改变,会自动适应窗口;而使用像素值会使其对应的元素无论窗口如何改变,都不会变大或者变小。尤其是在使用了浮动后,某些页面的浮动元素会随着窗口大小改变而跑到下一行(块),严重影响显示。因此通常推荐可以先使用像素值来指定宽高,后使用百分比来使页面元素自适应。但是这样又会导致在电脑端显示的网页正常,而运行到移动端就会变形。额。。。。通常若不指定其父元素的高度,那么使用百分比来定义该元素会无效,因为页面高度可以任意大小,不指定就不知道其百分比对应多少。但是宽度不一样,宽度通常固定为屏幕宽度。
html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
/*可以在浏览器中看到,无论页面怎么缩放,
元素大小总是不变,这样就可以避免页面宽度变化带来的
元素位置偏移。
*/
width: 1340px;
height: 600px;
}
.divs{
width: 20%;
height: 10%;
border: 2px dotted red;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="divs">内容一</div>
<div class="divs">内容二</div>
<div class="divs">内容三</div>
<div class="divs">内容四</div>
</body>
</html>
可以看到显示并没有因为浏览器变窄而导致div向下移动。