盒子模型

  • CSS 盒模型有两种，一种是 content-box 一种是 border-box。

  • 一般优先使用后者。

    内容盒

  • content box,设置的宽高即内容的宽高

  • content-box 的宽度 width 表示内容区的宽度，不包含 padding 和 border；

边框盒

  • border box，设置的宽高，减去border，padding，才是内容的宽高
  • border-box 的宽度 width 表示内容区 + padding + border 的总和。

代码练习

  1. HTML:
  2. <div class="content-box">content box</div>
  3.  <div class="border-box">border box</div>
  1. CSS:
  2. .content-box {
  3.  margin: 25px;
  4.  border: 5px solid red;
  5.  padding: 15px;
  6.  width: 100px;
  7.  height: 100px;
  8.  box-sizing: content-box;
  9. }
  10. .border-box {
  11.  margin: 25px;
  12.  border: 5px solid red;
  13.  padding: 15px;
  14.  width: 100px;
  15.  height: 100px;
  16.  box-sizing: border-box;
  17. }

为什么使用border-box

  • border-box定义的盒子，不会随着padding和boder的加入而增大盒子的占用空间
  • 不会再考虑边框和内边距会改变整体所占宽度
  • 适用于自适应的网页设计
  • 用这个属性网页结构不会被破坏

点击