css中float、clear、z-index、overflow、百分号和像素值的用法

╰+哭是因爲堅強的太久メ 2022-05-09 09:30 91阅读 0赞

***float:*** 设置元素浮动，元素浮动后就脱离了标准的放置位置，原本竖着排放的块元素会浮动的依次向左边浮动；而它后面的元素因为该元素已经浮动，脱离原来位置，而获得了该元素的标准摆放位置。如下图：

![float\_noclear][float_noclear]

可以看到由于浮动导致“***版权信息***”获得了***divs***的标准放置位置，且divs依次向左靠齐。

html代码如下：

***clear:*** 清除上一个元素浮动造成的影响，如果不注释clear:left; 那么可以看到清除浮动后，会把上一个元素当作标准位置，而将下一个元素放置在它应该放置的下一个块的位置。清除浮动后效果图如下：

![70][]

*** z-index:*** 元素的堆叠顺序。数值越大越靠近用户，比如1比-1更加靠近用户，所以z-index=1;的会完全显示，而z-index=-1的会被遮住。

注释掉clear:left; 然后取消对position: absolute;和z-index: 1；的注释，可以发现，版权信息显示在黄色背景之上。z-index属性必须和position定位一起使用才有效。

参考：[CSS z-index 属性][CSS z-index]

***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;
    }

<div id="copy">
    		<p>版权信息1</p>
    		<p>版权信息2</p>
    		<p>版权信息3</p>
    </div>

页面效果：

![70 1][]

可以看到本该显示三个段落的，因为设置了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>

![percentage][]

可以看到显示并没有因为浏览器变窄而导致div向下移动。

[float_noclear]: /images/20220509/9a03a729269f4040bfc906192b7ae8cf.png
[70]: /images/20220509/fe259f6130a74c67bf601a714e14b563.png
[CSS z-index]: http://www.w3school.com.cn/cssref/pr_pos_z-index.asp
[70 1]: /images/20220509/940badf6e5f347f2bd0713280c91805c.png
[percentage]: /images/20220509/742efc48c1f6413ebde6b84a82ecc080.png