box-sizing属性理解

目录

• box-sizing
  • boder-box

box-sizing

box-sizing 有三个属性，用于告诉浏览器如何计算高度和宽度，下面一 一介绍：

boder-box

box-sizing:border-box;
width = 元素内容宽度 + boder边框宽度 + pading留白宽度
heigth = 元素内容高度 + border边框高度 + padding留白高度

 <div class="content-box">Content box</div><br>
 <div class="border-box">Border box</div>

<style>
div {
   200px;
  height: 70px;
  padding: 30px;
 border: 10px solid orange;
  background: pink;
}

 /**元素的总宽度 = 200 + 30*2 + 10*2; 总高度 = 70 + 30*2 + 10*2 ; */ 
.content-box { 
  box-sizing: content-box; 
}

 /** 元素的总宽度 = 200; 总高度 = 70px; */  
.border-box { 
  box-sizing: border-box;
}
</style>