css中的box-sizing属性怎么用

这篇文章主要为大家展示了“css中的box-sizing属性怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css中的box-sizing属性怎么用”这篇文章吧。

合浦ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

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>

以上是“css中的box-sizing属性怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

分享文章：css中的box-sizing属性怎么用
URL网址：https://www.cdcxhl.com/article6/iidcig.html

成都网站建设公司_创新互联，为您提供外贸建站、标签优化、品牌网站制作、商城网站、微信公众号、网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容