CSS盒子模型
  1. CSS长度单位
  1. px:像素。
  2. em:相对元素font-size的倍数。
  3. rem:相对根字体大小，html标签就是根.
  4. %:相对父元素计算。

CSS中设置长度，必须加单位，否则样式无效！



盒子模型的组成

CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子。

  1. margin（外边距）：盒子与外界的距离。（不会影响盒子大小，但会影响盒子的位置）
  2. border（边框）:盒子的边框。
  3. padding（内边距）:紧贴内容的补白区域。
  4. contert（内容）:元素中的文本或后代元素都是它的内容。

盒子的大小=content+左右padding+左右border。


margin注意事项

1.子元素的margin,是参考父元素的content计算的。（因为是父亲的content中承装着子元素）
2.上margin、左margin:影响自己的位置；下margin、右margin:影响后面兄弟元素的位置。
3.块级元素、行内块级元素，均可完美地设置四个方向的margin；但行内元素，左右margin可以完美设置，上下margin设置无效。
4.margin的值也可以是auto,如果给一个块级元素设置左右margin都为auto,该块级元素会在父元素中水平居中。
5.margin的值可以是负值。

margin塌陷问题

什么是margin塌陷？

  第一个元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。


如何解决margin塌陷？

  • 方案一：给父元素设置不为0的padding。
  • 方案二：给父元素设置宽度不为0的border。
  • 方案三：给父元素设置css样式overflow:hidden

处理内容溢出：也是加上voerflow:hidden.

隐藏元素的方式
vidibility:hidden
display:none

布局小技巧

1.行内元素、行内块元素，可以被父元素当做文本处理。

即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
例如：text-align、line-height、text-indent等。

2.如何让子元素，在父亲中水平居中：

  • 若子元素为块元素，给父元素加上：margin:0 auto;。
  • 若子元素为行内元素、行内块元素，给父元素加上：text-align:center

3.如何让子元素，在父亲中垂直居中:


  • 若子元素为块元素，给子元素加上：margin-top，值为：（父元素content-子元素盒子总高）/2。

  • 若子元素为行内元素、行内块元素：
    让父元素的height=line-height，每个子元素都加上：vertical-align:middle;。
    补充：若想绝对垂直居中，父元素font-size设置为0。