波动层全自动融入高宽比的处理方式

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

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

先看1个事例:
HTML:

拷贝编码
编码以下:

<ul>
<li></li>
<li></li>
</ul>

CSS:

拷贝编码
编码以下:

ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
ul li {
width:100px;
height:100px;
float:left;
margin-right:10px;
background-color:#99cc00;
}

在各个访问器中的实际效果1致:

能够看到,外面 ul 即蓝色的地区高宽比为0,假如沒有设定 padding,这个 ul 是看不见的。自然要让它伸长也很简易,只必须在最终1个 li 后边加1个标识清晰下波动便可以了。但是这样的话就更改了HTML构造,不太好。如今这里要探讨的便是怎样在不更改构造的状况下让 ul 全自动伸长。

留意:全自动伸长对于的是包括波动元素的元素(这里是 ul)。而并不是波动元素本身(li)。

第1种方式:
IE 适用1个 CSS 特性 zoom, 这个元素接纳1个数据或1个百分数,表明这个元素变大(变小)的占比。比如:zoom:0.5或zoom:50% 表明变小1半,而zoom:2或zoom:200%则表明变大1倍。
当界定了这个特性以后在 IE 访问器里边就会全自动融入高宽比了。当运用了这个特性以后,IE 就会全自动伸长了。1般状况下大家不必须变大或变小,因此界定 zoom:1 就可以了。如今的 CSS:

拷贝编码
编码以下:

ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1; /* IE */
}

而非 IE 访问器不适用这个特性。因此第1种方式需把访问器分成两个势力:IE 和 非IE。
针对非 IE 访问器必须用到1个伪类 :after (IE 访问器不适用)。CSS 编码以下:

拷贝编码
编码以下:

ul:after {
content:".";
display:block;
clear:both;
height:0;
}

:after 伪类用于向元素后边插进1段內容,即 content 特性。随后在这个插进的內容里消除波动,大家能够想像成在最终1个 <li> 后边插进了1个 <span>.</span>里边的內容是1个”.”,随后设定display:block; clear:both; height:0; 等特性 (这个比喻不1定精确)。
大家看下在 Firefox 下面的实际效果:

能够看到 ul 早已全自动伸长了,但下面有个小小的的斑点。坚信你早已猜到了,这个斑点对应的便是 content:”.” 。
这个斑点毫无疑问是要去掉的啦,大家能够用 font-size:0;line-height:0; 将其去掉。
好了,如今在两个势力的访问器里都完成总体目标了。下列是 ul 全部的CSS编码:

拷贝编码
编码以下:

ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1;/* IE */
}
ul:after {
content:".";
display:block;
clear:both;
height:0;
font-size:0;
line-height:0;
}

第2种方式
我刚说过不止1种方式能够处理,那如今就来讲说第2种方式。第2种方式还要更简易1些。一样,必须将访问器分为两个势力。但是和上1个有一定的不一样,这1次 IE7 站到了此外1个势力。即 IE7, Firefox, Opera, Safari 等(这里临时称为A访问器)。针对这些访问器,要是界定1个 overflow:auto; 便可,可是针对 IE6 和 IE5 (称为B访问器)却不起功效。但是要 IE6,IE5 聪明也很简易。要是界定1个高宽比便可,哪怕是 0 ,也会全自动伸长。了解这些还没用,大家还得区别这两个势力的访问器才行。如何区别呢?
A 访问器适用特性挑选符,而B访问器不适用。

因此下列编码仅有A访问器才会实行。

拷贝编码
编码以下:

[xmlns] ul { /* html[xmlns] ul 的简写 */
overflow:auto;
}

必须留意的是HTML 务必要有< !DOCTYPE >头顶部和<html>有xmlns特性才会起功效。但是这个难题好像不大,如今绝绝大多数网页页面都有这两个东东,包含 Dreamweaver 默认设置新建的网页页面都会全自动再加。

而针对B访问器则能够根据下列方法:

拷贝编码
编码以下:

* html ul {
height:1%;
}

实际上 height 彻底能够写成 0,为何要写1%呢?告知你实际上我也不知道道,大伙儿都这么写。

好了,第2种方式的 ul 所有款式编码以下:

拷贝编码
编码以下:

ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
[xmlns] ul { /*html[xmlns] ul 的简写*/
overflow:auto;
}
* html ul {
height:1%;
}

如今既然有两种方式,那末那1种更好呢?我本人较为喜爱第2种方式。缘故很简易,编码更少,并且是合乎规范的。只是在非常少数状况下会出現翻转条,因此应当这两种方式相互配合应用。

也有,这些编码是能够通用性的,能够提取为1个对比如 .clearfix 。这个每日任务就交到你自身进行吧。