CSS布局

盒模型

css中所有元素都被一个个的“盒子(box)”包围

盒模型的组成

1. 标准盒模型(默认值content-box)

width/height为内容的宽高 盒子宽高 = 内容 + padding + border

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

2. 替代(IE)盒模型(border-box)

width/height即为盒子的宽高

.box {
    box-sizing: border-box;
    ...
}

设置默认盒模型

html {
    box-sizing: border-box;
}
*, *::before, *::after {
    /*所有的盒子模型都继承于html*/
    box-sizing: inherit;
}

外边距margin

不属于盒子，是盒子外面周围一圈看不见的地方

1. 外边距的折叠问题

有两个外边距相接的元素，上下的外边距会产生折叠，及外边距不是两个相加，而是取二者中最大的一个 清除外边距折叠

1. display: inline-block\
2. float属性值不是"none"的元素\
3. 绝对定位

2. 负数外边距

外边距为正数，撑开控件；外边距为负数，收缩空间。

浮动(float)

浮动盒子可以向左、右移动，直到它的外边沿接触父级的外边沿或另一个浮动盒子的外边沿。浮动盒子会脱离常规文档流，所以文档流中的元素几乎认为浮动盒子不存在。

清除浮动

定位

1. 绝对定位absolute 定位依据：第一个不是static的祖先元素，若没有依据html，绝对定位的元素最后会脱离文档流。

绝对定位非常适合创建弹出层、提示和对话框等覆盖于其他内容之上的组件

2. 相对定位relative 定位依据：相对该元素原有的位置进行移动，且该元素还是占据原有的位置，不脱离文档流

3. 固定定位fixed 定位依据：定位的参照始终为视口

display

1. flex:弹性盒子布局
   • 大小，基本内容以及可用空间
   • 流动方向，水平/竖直、正向/反向
   • 两个轴线上的对齐和分布
   • 排列顺序
2. grid:网格布局