box-sizing属性怎么用

　　CSS3box-sizing属性

　　作用：允许您以确切的方式定义适应某个区域的具体内容。

　　说明：InternetExplorer、Chrome、Safari以及Opera支持box-sizing属性。Firefox需要前缀-moz-。

　　语法：

　　box-sizing:content-box|border-box|inherit;

　　值描述

　　content-box

　　这是由CSS2.1规定的宽度高度行为。

　　宽度和高度分别应用到元素的内容框。

　　在宽度和高度之外绘制元素的内边距和边框。

　　border-box

　　为元素设定的宽度和高度决定了元素的边框盒。

　　就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

　　通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

　　inherit 规定应从父元素继承box-sizing属性的值。

　　CSS3box-sizing属性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　div.container

　　{

　　width:30em;

　　border:1emsolid;

　　margin:100pxauto;

　　}

　　div.box

　　{

　　box-sizing:border-box;

　　-moz-box-sizing:border-box;/*Firefox*/

　　-webkit-box-sizing:border-box;/*Safari*/

　　width:50%;

　　border:1emsolidred;

　　float:left;

　　}

　　</style>

　　</head>

　　<body>

　　<divclass="container">

　　<divclass="box">这个div占据左半部分。</div>

　　<divclass="box">这个div占据右半部分。</div>

　　</div>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56293.shtml