今天给大家讲解关于CSS box-sizing改变盒子模型

默认情况下,网页上元素的实际宽度或高度取决于元素内容区域的宽度或高度、内边距和边框属性的大小,因此在对元素进行布局时,还必须考虑元素的内边距和边框属性占用的页面空间。这一点在CSS框模型中进行了说明。

因此,设置页面元素的宽度和高度时,元素的实际大小通常大于设置的大小。此CSS3添加了用于更改默认长方体型号的长方体(box-sizing)属性。box-sizing属性允许在元素内容区域内绘制元素的内边距和外边距,使元素的宽度和高度与设置的宽度和高度相同。

box-sizing 属性的可选值如下:

描述
content-box 默认值,元素的实际宽度或高度等于元素内容区的宽度或高度、内边距和边框的和
border-box 在元素的内容区内绘制内边距或边框,内边距或边框不会影响元素的实际宽度或高度
inherit 从父元素继承 box-sizing 属性的值。

【示例】下面通过一个示例来演示 box-sizing 属性的使用:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 300px;
  7. height: 50px;
  8. margin-top: 5px;
  9. border: 10px solid red;
  10. padding: 5px;
  11. }
  12. .two {
  13. box-sizing: content-box;
  14. }
  15. .three {
  16. box-sizing: border-box;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div class=“one”>默认情况</div>
  22. <div class=“two”>box-sizing: content-box;</div>
  23. <div class=“three”>box-sizing: border-box;</div>
  24. </body>
  25. </html>

运行结果如下图所示:

1119425911-0
图:box-sizing 属性演示
© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片