1box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素.
2语法: box-sizing: content-box|border-box|inherit;
3取值
2 content-box 相关内容
1padding 和 border 不被包含在定义的 width 和 height 之内.
对象的实际宽度等于设置的 width 值和 border,padding 之和;
即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型.
2审查元素看示例
1代码部分
2盒模型部分
3 border-box 相关内容
1padding 和 border 被包含在定义的 width 和 height 之内.
对象的实际宽度就等于设置的 width 值,
即使定义有 border 和 padding 也不会改变对象的实际宽度;
即 (Element width = width )
此属性表现为怪异模式下的盒模型.
2审查元素看示例
1代码部分
2盒模型部分
4具体示例对比两者区别
1content-box 的示例代码如下
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- content-box 示例
- </title>
- <style>
- .one{ background-color:red; width:200px; height:200px; float:left; border:solid
- 1px; padding:10px } .two{ background-color:yellow; width:200px; height:200px;
- float:left; border:solid 1px; padding:10px; box-sizing:content-box; } img{
- width:200px; height:200px; }
- </style>
- </head>
- <body>
- <div class=one>
- <img src=ym.jpg>
- </div>
- <div class=two>
- <img src=ym.jpg>
- </div>
- </body>
- </HTML>
效果图:
2border-box 的示例代码如下
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- border-box 示例
- </title>
- <style>
- .one{ background-color:red; width:200px; height:200px; float:left; border:solid
- 1px; padding:10px; } .two{ background-color:yellow; width:200px; height:200px;
- float:left; border:solid 1px; padding:10px; box-sizing:border-box; } img{
- width:200px; height:200px; }
- </style>
- </head>
- <body>
- <div class=one>
- <img src=ym.jpg>
- </div>
- <div class=two>
- <img src=ym.jpg>
- </div>
- </body>
- </HTML>
效果图:
★通过对比发现:
content-box 的 width 不包括 padding 和 border
border-box 的 width 包括 padding 和 border
来源: http://www.bubuko.com/infodetail-3213493.html