(CSS3)box-sizing

作者: xszi | 来源:发表于2018-09-13 20:35 被阅读0次

IE盒子模型和标准盒子模型
box-sizing属性(CSS3新增属性)
盒模型
Css - 标准盒模型与IE盒模型
CSS3 框大小
css样式属性
css盒子模型
盒子模型之宽和高
2017-02-20 CSS 学习笔记am
Web前端培训技术知识点了解css3弹性盒

1.定义（W3C）

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
三个属性/box-sizing: content-box|border-box|inherit;
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

神马神马？--- 要是如此一目就了然了，我还精心准备例子？

2.举例

html：

<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>

2.1 box-sizing: content-box

css：

.box1{
    width: 100px;
    height: 100px;
    border: solid 10px green;
    background-color: skyblue;
    float: left;
    /* box-sizing: content-box;*/
    margin: 10px;
}

.box2{
    width: 100px;
    height: 100px;
    border: solid 10px green;
    background-color: hotpink;
    float: left;
    box-sizing: content-box;
    margin: 10px;
}

结果：

01.jpg

02.jpg

box1未设置box-sizing的值，box2设置box-sizing的值为content-box，从01和02图中可以看出，box1和box2的border的宽度值均显示在盒子外边为10px，"向外撑开"，且可以知道box-sizing: content-box;为默认下的状态。

2.2 box-sizing: border-box

css：

.box1{
    width: 100px;
    height: 100px;
    border: solid 10px green;
    background-color: skyblue;
    float: left;
    /* box-sizing: border-box;*/
    margin: 10px;
}

.box2{
    width: 100px;
    height: 100px;
    border: solid 10px green;
    background-color: hotpink;
    float: left;
    box-sizing: border-box;
    margin: 10px;
}

03.jpg

04box1.jpg

05box2.jpg

box1未设置box-sizing的值，box2设置box-sizing的值为 border-box;，从03、04和05图中可以看出，box1的border的宽度值前面说过自然显示在盒子外部为10px，"向外撑开"，而box2的border的宽度值显示在盒子内部为10px，"向内撑开"。