值 | 描述 |
---|---|
content-box | 默认值,元素的实际宽度或高度等于元素内容区的宽度或高度、内边距和边框的和 |
border-box | 在元素的内容区内绘制内边距或边框,内边距或边框不会影响元素的实际宽度或高度 |
inherit | 从父元素继承 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 属性演示
本文链接:http://task.lmcjl.com/news/14689.html