css波动中防止包括元素高宽比为0的4种处理方式

日期:2021-03-10 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

当1个元素只包括波动元素的情况下,它会出現高宽比折叠(在火狐中是这样,IE9不容易),即元素的左右底边重叠,和高宽比为0实际效果1样,下面是处理这个难题的4种方式。
最先我么看最初始的状况,下面是编码:

拷贝编码
编码以下:

<html>
<head>
<title>Float</title>
<style type = "text/css">
ul {
list-style-type: none;
width: 800px;
background: blue;
}
li {
float: left;
}
</style>
</head>
<body>
<ul>
<li><img src = "1.jpg" /></li>
<li><img src = "2.jpg" /></li>
<li><img src = "3.jpg" /></li>
<li><img src = "4.jpg" /></li>
<li><img src = "5.jpg" /></li>
<li><img src = "6.jpg" /></li>
</ul>
</body>
</html>

运作結果:
 
原本ul的情况色被设定成blue,可是因为它出現了高宽比折叠,因此看不见情况色。
1 给包括元素设定高宽比height
最立即的方法是给包括元素设定1个高宽比,在本例中便是给ul标识加上height特性,加上后的编码以下:

拷贝编码
编码以下:

ul {
list-style-type: none;
width: 800px;
background: blue;
height: 300px; /*加上高宽比特性*/
}

可是这类方式有1个缺陷,便是包括元素的高宽比不可以自融入內容。例如大家在加上好几个目录项,那末高宽比又不足了。
2 运用overflow特性
能够包括元素设定overflow特性,并设定特性值为auto或hidden,加上后的编码以下:

拷贝编码
编码以下:

ul {
list-style-type: none;
width: 800px;
background: blue;
overflow: hidden; /*加上overflow特性,能够设定为auto或hidden*/
}

这类方法沒有立即设定height特性的限定,可是当包括元素的overflow特性务必设定为visible时,这类方式无效。
3 加上1个空的div
这类方式是加上1个空的div,这个div和波动元素同1级別,且坐落于波动元素的最终。这类方式要修改两个地区,1个是html编码,另外一个是务必要为这个div加上1个clear特性:

拷贝编码
编码以下:

<html>
<head>
<title>Float</title>
<style type = "text/css">
ul {
list-style-type: none;
width: 800px;
background: blue;
}
li {
float: left;
}
/*为加上的空div设定的款式*/
.clearDiv {
clear: both;
}
</style>
</head>
<body>
<ul>
<li><img src = "1.jpg" /></li>
<li><img src = "2.jpg" /></li>
<li><img src = "3.jpg" /></li>
<li><img src = "4.jpg" /></li>
<li><img src = "5.jpg" /></li>
<li><img src = "6.jpg" /></li>
<div class = "clearDiv"></div> <!--新加上的空div,它和波动元素同1级別,且坐落于最终-->
</ul>
</body>
</html>

这类方式尽管也能处理高宽比难题,可是却引进了1个过剩的标识div,它这里其实不具备具体实际意义,它的功效只是撑开ul标识罢了。
4 运用伪元素:after
用这类方式时要为包括元素先加上1个类名,这里为ul标识设定的类名.clearUl,编码以下:

拷贝编码
编码以下:

<html>
<head>
<title>Float</title>
<style type = "text/css">
ul {
list-style-type: none;
width: 800px;
background: blue;
}
li {
float: left;
}
/*运用:after伪元素*/
.clearUl:after {
content:"";
display: block;
clear: both;
}
</style>
</head>
<body>
<ul class = "clearUl"> <!--为包括的外围元素设定类-->
<li><img src = "1.jpg" /></li>
<li><img src = "2.jpg" /></li>
<li><img src = "3.jpg" /></li>
<li><img src = "4.jpg" /></li>
<li><img src = "5.jpg" /></li>
<li><img src = "6.jpg" /></li>
</ul>
</body>
</html>

在:after为元素里边用到了content特性,这样这条款式的意思是在ul元素后边转化成特定的內容,这里转化成的內容是1个空标识符串,由于只是让它来清除ul标识的高宽比折叠,其实不让它显示信息出来。也有,这条款式里有display特性,要将他设定成block,这样clear特性才会起功效,由于消除实际操作只功效于块级元素,它的基本原理是为要实行消除实际操作的元素加上上边距,以此让元素降到波动元素的下面,而实际操作行内元素的上边距不起功效。