认识盒模型#

什么是盒模型

• 所有HTML标签都可以看成矩形盒子，由width、height、 padding、border构成，称为“盒模型”，宽-高-内边距-边框组成，注意：外边距不属于盒子的宽高

width、height不是盒子总宽高

• 盒子的总宽度 = width + 左右padding + 左右border
• 盒子的总高度 = height + 上下padding + 上下border

width属性和height属性

• width属性表示盒子内容的宽度，height属性表示盒子内容的高度

• width属性和height属性的单位通常是px，移动端开发也会涉及百分数、 rem等单位

• 当块级元素（div、h系列、li等）没有设置width属性时，它 将自动撑满，但这并不意味着width可以继承

• 盒子的height属性如果不设置，它将自动被其内容撑开，如 果没有内容，则height默认是0

padding属性详解#

• padding是盒子的内边距，即盒子边框内壁到文字的距离

• 有四个方向的padding，分别用小属性进行设置

  属性	意义
  padding-top	上padding
  padding-right	右padding
  padding-bottom	下padding
  padding-left	左padding

padding的多数值写法

• padding属性如果用四个数值以空格隔开进行设置，分别表 示上、右、下、左的padding
• padding属性如果用三个数值以空格隔开进行设置，分别表 示上、左右、下的padding
• padding属性如果用二个数值以空格隔开进行设置，分别表 示上下、左右的padding

margin属性详解#

• margin是盒子的外边距，即盒子和其他盒子之间的距离

• margin也有四个方向

  小属性	意义
  margin-top	上margin，“向上踹”
  margin-right	右margin，“向右踹”
  margin-bottom	下margin，“向下踹”
  margin-left	左margin，“向左踹”

盒模型计算#

width、height不是盒子总宽高

• 盒子的总宽度 = width + 左右padding + 左右border
• 盒子的总高度 = height + 上下padding + 上下border

CSS写的width和height 不是盒子的宽高，而是内容区域 的宽高，如果写padding或者border就会把盒子撑大，这是因为CSS默认是box-sizing：content-box；

box-sizing属性

• 将盒子添加了box-sizing: border-box; 之后，盒子的width 、height数字就表示盒子实际占有的宽高（不含margin） 了，即padding、border变为“内缩”的，不再“外扩”
• box-sizing属性大量应用于移动网页制作中，因为它结合百 分比布局、弹性布局等非常好用，在PC页面开发中使用较少
• box-sizing属性兼容到IE9

盒模型其他属性#

行内元素和块级元素的相互转换：display属性

• 使用display;即可将元素转为块级元素
• 使用display;即可将元素转为行内元素，将元素转为行内元素的应用不多见
• 使用display;即可将元素转为行内块
• img和表单元素是特殊的行内块，它们既能够设置宽度高度 ，也能够并排显示

元素的隐藏：display: none;

• 使用display: none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样，但是dom依然存在
• 使用visibility: hidden;可以也可以将元素隐藏，但是元素不放弃自己的位置

拓展盒模型的一些特性#

margin的塌陷

• 竖直方向的margin有塌陷现象：小的margin会塌陷到大的 margin中，从而margin不叠加，只以大值为准

一些元素有默认的margin和padding

• 一些元素（比如body、ul、p等）都有默认的margin，在开 始制作网页的时候，要将他们清除

盒子的水平居中

• 将盒子左右两边的margin都设置为auto，盒子将水平居中

  1
  .box {
  2
    margin: 0 auto;
  3
  }

• 文本居中是text-align: center; 和盒子水平居中是两个概念

• 盒子的垂直居中，需要使用绝对定位技术实现