|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。
破洛洛文章简介:迟来的CSS3新属性:box-sizing.
说到IE的bug,一个臭名远扬的例子是它关于“盒模子”的毛病注释:在IE5.x和Quirks形式的IE6/7中,将border与padding都包括在width以内。这为前端工程师的事情平增了很多贫苦,几户每一个必要界说尺寸的box都要思考一下:是不是触发了“盒模子bug”?
同时,因为另外一撮扫瞄器对尺度的服从,我们在准确界说一个在无限空间内显现的box时,也必要盘算一下:留给它的空间只要那末年夜,刨往border和padding,我们该把它的width写成几呢?
这类情形在CSS3时期有了改良,得益于这个叫做box-sizing的属性,它具有“content-box”和“border-box”两个值。
- 界说box-sizing:content-box;时,扫瞄器对盒模子的注释服从我们之前熟悉到的W3C尺度;
- 界说box-sizing:border-box;时,扫瞄器对盒模子的注释与IE6不异;
为何说这个属性“迟来”呢?IE关于盒模子的注释当然不切合W3C的标准,可是也有它的优点:不管怎样修改border与padding的值,都不会招致box总尺寸产生变更,也就不会打乱页面全体结构。而在Firefox等古代扫瞄器下,假如我们要改动一下padding的值,就不能不从头盘算box的width。如今IE6与世长辞,这个CSS属性不免有些捷足先登。
试用这个新属性,Firefox请利用-moz-box-sizing,Safari/WebKit请利用-webkit-box-sizing,Opera间接用box-sizing便可。
另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用他的ID进行控制。 |
|