盒模型

每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这4个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。

内容区

内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的三部分都是可选的。

内容区有三个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区而言，并不包括padding部分。当内容信息太多，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。

width、height不是盒子总宽高,盒子的总宽度 = width + 左右padding + 左右border,盒子的总高度 = height + 上下padding + 上下border.

width属性

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

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

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

height属性

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

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

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

内边距

内边距，指的是内容区和边框之间的空间，可以看做是内容区的背景区域。

关于内边距的属性有5种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。使用这5种属性可以指定内容区域各方向边框之间的距离。

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

• padding的四数值写法

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

• padding的三数值写法

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

• padding的二数值写法

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

边框

在CSS盒子模型中，边框属性有border-width、border-style、border-color以及综合了三类属性的快捷边框属性border。

其中border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。“border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”。

外边距

外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。

margin也有四个方向

margin的塌陷

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

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

盒子的水平居中

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

   .box {margin: 0 auto;

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

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

margin写法有三种

• “margin:20px;”表示4个方向的外边距都是20px；

• “margin:20px 40px;”表示margin-top和margin-bottom为20px，margin-right和margin-left为40px。

• “margin:20px 40px 60px 80px;”表示margin-top为20px，margin-right为40px，margin-bottom为60px，margin-left为80px。

box-sizing属性

将盒子添加了box-sizing: border-box; 之后，盒子的width 、height数字就表示盒子实际占有的宽高（不含margin）了，即padding、border变为“内缩”的，不再外扩

box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在PC页面开发中使用较少

box-sizing属性兼容到IE9

 .box {
  box-sizing: border-box; 
  width: 200px; 
  height: 200px;
     border: 10px solid #000;
  padding: 10px; 
 }

行内元素和块级元素

行内块

img和表单元素是特殊的行内块，它们既能够设置宽度高度，也能够并排显示

行内元素和块级元素的相互转换

使用display:block;即可将元素转为块级元素

使用display:inline;即可将元素转为行内元素，将元素转为行内元素的应用不多见

使用display:inline-block;即可将元素转为行内块

元素的隐藏

使用display: none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样

使用visibility: hidden;可以也可以将元素隐藏，但是元素不放弃自己的位置