CSS3 box-sizing 属性 ——使用box-sizing对盒子模型布局

我们在写html页面的时候，通常会给盒子模型设置高度和宽度，例如我们写一个宽度为200px高度为100px的盒子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style type="text/css">
        .box {
            width: 200px;
            height: 100px;
            background-color: #009688;
        }
    </style>
    <div class="box"></div>
</body>
</html>

此时我们给这个盒子添加padding、border和margin属性,`padding: 20px;border: 15px blue solid;margin: 10px;`,现在查看元素，盒子的大小为盒子的宽度： = `padding*2 + border*2 + width` = `20px*2 + 15px*2 + 200px` = `270px` 盒子的高度： = `padding*2+ border*2 + height` = `20px*2 + 15px*2 + 100px` = `170px` 如果我们不想这样，想要添加的padding和border属性大小在原始设置的大小范围内。box-sizing就为我们提供了这个解决方案。我们在样式中添加`box-sizing: border-box;`，再查看盒子的大小，变为 200px*100px了。

box-sizing语法

box-sizing: content-box|border-box|inherit;

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

值

描述

content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit

规定应从父元素继承 box-sizing 属性的值。

CSS3 box-sizing 属性 ——使用box-sizing对盒子模型布局

box-sizing语法

猜你喜欢