CSS 传统布局

最重要的终极问题

布局是用来干什么？

• 答：改变网页上元素的默认摆放位置，将元素们放在我想把它放在的地方。

传统布局是什么？

• 答：指以盒子模型为基础、以 CSS display属性和position属性为辅助的方式。

为什么叫传统布局？

• 因为新出了很多更顺手方便的布局如 flex, grid。

例如，下面截图中有四张图片，四个<img>元素：

1. 整体分：上下顺序：一上三下，上面的居中
2. 下面又分：左右顺序：一左二右
3. 右边又分：上下顺序；一上一下

你们四兄弟是怎么做到一家人整整齐齐的？

Normal flow

有选择的阅读。

为了解决问题而参阅查询资料的时候，要快速浏览，而不是从上到下事无巨细的像圣经一样虔诚，找到你所需要的，解决问题，over。

1. 布局是谁的布局？

   • 答：元素，也叫标签。
   • 例：就是p、div、img等

2. 最简单的布局是什么？

   • 答：把一个个元素从左到右，从上到下摆放。
   • 例：比如你正在看到的多段文字（paragraph），p元素，和上一句话之间是从上到下摆放。

3. 怎么把元素和简单的布局联系起来？

   • 答：指定元素的display属性。三个值：inline、block、inline-block。

4. 指定完了之后呢？就行了？

   • 答：对。但是难点在于怎么指定。
     1. inline代表该元素像同一行内的周围的文本一起流动，而文本本身是从左到右的，满了就换行。设置高度宽度没有效果。设置 margin 和 padding 只有左右方向才会导致和其他文字间隔开，上下方向只存在，没效果，除了用来改变border的高度没啥用。
     2. block可设宽高，独占一行，代表这像个箱子一个个摞起来，只不过方向是从上到下。
     3. inline-block代表代表了可以设置宽高的块，又可以在行内从左到右，而且是一个整体，不会换行分开。

5. 为什么我写元素的时候没管什么display属性也能从左到右、从上到下布局？

• 答：因为这些元素默认就自带这个属性和值。

6. 这就完了？

• 答：想得到更复杂的结果，那就只能引入更复杂的操作方式。基本就这个，更多就需要操作 CSS position属性，他有4个值：
  1. static: 默认的文档正常流，就本来自带该咋显示就砸显示。
  2. relative: 相对于文档正常流种他自己的位置进行变化
  3. absolute：从正常文档流移除，后面的会填补这个空。自己生成一个块相对于定位
  4. fixed：相对于窗口定位
  5. sticky： 我的天，继续刨根问底又涉及到包含块，什么鬼。 本文待整理。

目标

左右布局

子元素左右浮动，父元素添加.clearfix消除浮动，

.clearfix::after {
    content="";
    display: block;
    clear:both;
}

左中右布局

子元素左右浮动，中间margin: 0 auto;

水平居中

• inline 元素:
  • 如果不是inline 设置为display:inline-block
  • 再给父元素一个text-align:center
• 固定宽度的块级元素:
  • margin:0 auto;

垂直居中

父元素添加text-align:center

该元素添加vertical-align:center