饥人谷技术博客

content-box与border-box区别

2019-02-16  本文已影响11人  fanison

1.盒模型尺寸:

2.content-box与border-box区别

两者的盒子的宽度是否包含表框和内边距

- content-box

  div{
    width:100px;
    height:100px;
    border:1px solid red; 
    padding: 10px;
  }
content-box

- border-box

  div{
    box-sizing:border-box;
    width:100px;
    height:100px;
    border:1px solid red; 
    padding: 10px;
  }
border-box

:通过对比发现

content-box 的 width 不包括 padding 和 border

border-box 的 width 包括 padding 和 border

上一篇下一篇

猜你喜欢

热点阅读