默认情况下，网页上元素的实际宽度或高度取决于元素内容区域的宽度或高度、内边距和边框属性的大小，因此在对元素进行布局时，还必须考虑元素的内边距和边框属性占用的页面空间。这一点在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;
- }
- .two {
- box-sizing: content-box;
- }
- .three {
- box-sizing: border-box;
- }
- </style>
- </head>
- <body>
- <div class=“one”>默认情况</div>
- <div class=“two”>box-sizing: content-box;</div>
- <div class=“three”>box-sizing: border-box;</div>
- </body>
- </html>
运行结果如下图所示：
图：box-sizing 属性演示
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容