border-box与content-box的区别

最新推荐文章于 2023-04-03 14:17:51 发布

banchi6453

最新推荐文章于 2023-04-03 14:17:51 发布

阅读量270

点赞数

原文链接：http://www.cnblogs.com/shihaiying/p/11589477.html

版权

㈠box-sizing 属性

⑴box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

⑵语法：box-sizing: content-box|border-box|inherit;

⑶取值

㈡content-box相关内容

⑴padding和border不被包含在定义的width和height之内。

对象的实际宽度等于设置的width值和border、padding之和；

即 ( Element width = width + border + padding )

此属性表现为标准模式下的盒模型。

⑵审查元素看示例

①代码部分

②盒模型部分

㈢border-box相关内容

⑴padding和border被包含在定义的width和height之内。

对象的实际宽度就等于设置的width值，

即使定义有border和padding也不会改变对象的实际宽度；

即 ( Element width = width )

此属性表现为怪异模式下的盒模型。

⑵审查元素看示例

①代码部分

②盒模型部分

㈣具体示例对比两者区别

⑴content-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>

效果图：

⑵border-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

㈤js测试box-sizing属性

<style>
div{
    background-color:red;
    width:200px;
    height:200px;
    border:solid 1px;
    padding:10px;
}

img{
     width:200px;
     height:200px;
    }
</style>
<div id="cs">
<img src="ym.jpg">
</div>
<hr>
<button onclick="document.getElementById('cs').style.boxSizing='content-box'">content-box</button>
<button onclick="document.getElementById('cs').style.boxSizing='border-box'">border-box</button>

效果如下：

⑴点击按钮：

⑵点击按钮：

转载于:https://www.cnblogs.com/shihaiying/p/11589477.html

banchi6453

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
border-box与content-box的区别

㈠box-sizing属性⑴box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。⑵语法：box-sizing: content-box|border-box|inherit;⑶取值㈡content-box相关内容⑴padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和b...
复制链接

扫一扫