1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

CSS3 box-sizing 属性

今天看了一些关于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/post/6966.html

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: