首页 > Web开发 > 详细

CSS box-sizing属性(如何定义盒子的总宽高)

时间:2020-05-27 21:16:52      阅读:37      评论:0      收藏:0      [点我收藏+]

定义

CSS 中的 box-sizing 属性定义了应该如何计算一个元素的总宽度和总高度

box-sizing: content-box;(默认)

计算方式:
width = 内容宽度
height = 内容高度

box-sizing: border-box;

计算方式:
width = border + padding + 内容的宽度
height = border + padding + 内容的高度

示例

HTML代码:

<!-- width = 内容宽度 100px-->
<!-- height = 内容高度 100px-->
<div id="content">content box</div>
<hr>
<!-- width = padding + border + 内容宽度          100 = 10*2 + 5*2 + 内容宽度 = 30 + 内容宽度(70)-->
<!-- height = padding + border + 内容高度         100 = 10*2 + 5*2 + 内容高度 = 30 + 内容高度(70)-->
<div id="border">border box</div>

CSS代码:

#content {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid pink;
  /* box-sizing: content-box; */
}
#border {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid pink;
  box-sizing: border-box;
}

content-box:

技术分享图片

border-box:

技术分享图片

CSS box-sizing属性(如何定义盒子的总宽高)

原文:https://www.cnblogs.com/buildnewhomeland/p/12976483.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!