CSS3 box-sizing 属性

时间：5年前阅读：4354

今天看了一些关于box-sizing的一些资料，在这里整理一下，希望也能对大家有所帮助。

　　box-sizing是CSS的一个属性，很好的解决了盒模型的相关问题。CSS中的盒模型（Box model）分为两派，一派是W3C的标准模型，一派是IE的传统模型。那它们之间有什么不同的呢？首先需要明确它们都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系；而不同的地方就在于两者的计算方法不一至：（下面引用一些公式向大家展示一下两者的不同之处）

box-sizing属性可以为三个值之一：

content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<style type="text/css">
    .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
        color: white;
    }
    .padding-box{
        box-sizing:padding-box;
        -moz-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #186645;
        background: red;  
        color: white;              
    }
    .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #3DA3EF;
        background: yellow;
    }
</style>
	</head>
	<body>
		<div class="content-box">content-box</div>
		<div class="padding-box">padding-box</div>
		<div class="border-box">border-box</div>
	</body>
</html>

我是在火狐浏览器下运行的，所以加了-moz-；-moz-代表firefox浏览器私有属性

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

CSS3 box-sizing 属性

网友评论