↩ zhcn 编程语言 Web相关 JSON 非公開: CSS box-sizing：改变盒子模型

CSS box-sizing：改变盒子模型

默认情况下，网页中元素的实际宽度或高度取决于元素内容区域的宽度或高度、padding 以及 border 属性的大小，因此您还必须考虑元素的 padding 是多少。布局元素时的边框属性所占用的页面空间已经在CSS盒模型中讨论过。

这就是为什么当你设置页面元素的宽度和高度时，元素的实际尺寸往往会大于你设置的尺寸。为此，CSS3添加了box-sizing属性，它改变了默认的盒子模型，通过box-sizing属性，可以在元素的内容区域中绘制元素的内边距和外边距，从而使其。可见，出现的元素的宽度和高度与相同宽度和高度的集合相同。

box-sizing 属性的可选值为：

价值	解释
content-box	默认值，元素的实际宽度或高度，等于元素的内容区域、填充和边框宽度或高度的总和
border-box	在元素的内容区域内绘制填充或边框，而不影响元素的实际宽度或高度
inherit	从父元素继承 box-sizing 属性的值。

[示例] 下面是一个示例，演示了 box-sizing 属性的使用。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 300px;
            height: 50px;
            margin-top: 5px;
            border: 10px solid red;
            padding: 5px;
        }
        .class-two {
            box-sizing: content-box;
        }
        .class-three {
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="class-one">デフォルトの状態</div>
    <div class="class-two">box-sizing: content-box;</div>
    <div class="class-three">box-sizing: border-box;</div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_809”对齐=“aligncenter”宽度=“1024”] 图：盒子尺寸属性演示

图：框大小属性演示[/caption]

提示：当你为元素定义 box-sizing: border-box; 属性时，元素内容区域的实际宽度和高度就是宽度和高度属性减去边框的宽度和每边的内边距。一件事。

通俗易懂的讲解《CSS box-sizing：改变盒子模型》！您必须观看的 2 个最佳视频

CSS Box-sizing

https://www.youtube.com/watch?v=bv16wjxgV4U&pp=ygU1IENTUyBib3gtc2l6aW5nOiDjg5zjg4Pjgq_jgrnjg6Ljg4fjg6vjga7lpInmm7QmaGw9SkE%3D

JSON