CSS3 box-sizing属性

原创已于 2022-07-07 10:40:07 修改 · 420 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

于 2018-12-05 10:55:18 首次发布

HTML5 专栏收录该内容

13 篇文章

订阅专栏

本文详细解析了CSS中的box-sizing属性，包括其三种设置值：content-box、border-box和inherit，以及它们如何影响元素的宽度计算。通过具体代码示例展示了标准盒模型与IE盒模型的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

box-sizing属性可以为三个值之一：content-box（default），border-box(IE盒子模型)，inherit(默认为不继承)

content-box: border和padding不计算入width之内。
标准盒模型：
border-box: border和padding计算入width之内。
IE盒模型：

在这里插入图片描述

例子：

<!DOCTYPE html>
<html>
<head>
	<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;
    }
    .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #3DA3EF;
        background: yellow;
    }
</style>
	
	<div class="content-box"></div>
	<div class="border-box"></div>

</head>
<body>

</body>
</html>