《重学前端》学习笔记Day119

CSS排版

正常流

简单总结：依次排序，排不下换行。
理解了简单的概念，剩下功能只是在这个基础上延伸一下：
float，使得一些盒占据了正常流需要的空间，我们可以把float理解为“文件环绕”。
vertical-align规定了如何在垂直方向对其盒。相关概念：基线，文字顶/底，行顶/底。

margin折叠，把margin可以理解为“一个元素规定了自身周围至少需要的空间”。

正常流原理  

在CSS标准中，规定了如何排布每一个文字或是盒的算法，这个算法依赖一个排版的“当前状态”，CSS把这个当前状态称为“格式化上下文(formtting context)”。  
可以认为排版是这样的：

格式化上下文 + 盒/文字 = 位置
Formatting context + boxes/charater = position  

排版的盒是分为块级盒和行内级盒，所以排版需要分别为它们规定块级格式化上下文和行内级格式化上下文。
块级格式化上下文顺次排列元素：

行内级格式化上下文顺次排列元素：

注意，块级和行内级元素的排版，受文字书写方向的影响，这里示例只是为了方便理解。
当我们要把正常流中的一个盒或者文字排版，需要分成三种情况处理。

• 当遇到块级盒：排入块级格式上下文
• 当遇到行内级盒或者文字：首先尝试排入行内级格式上下文，如果排不下，创建新的行盒，先将行盒排版（行盒是块级，所以到第一种情况），行盒会创建一个行内级格式上下文。
• 遇到float盒，把盒的顶部跟当前行内级上下文上边缘对齐，然后根据float的方向把盒的对应边缘对到块级格式化上下文的边缘，之后重排当前行盒。

一些元素会在其内部创建新的块级格式上下文：

1. 浮动元素；
2. 绝对定位元素；
3. 非块级但仍能包含块级元素的容器（如inline-blocks, table-cells, table-captions）；
4. 块级的能包含块级元素的容器，且属性overflow不为visible。

正常流的使用技巧

等分布局问题

<div class="outer">
    <!-- 方式一 -->
    <!-- <div class="inner"></div><div class="inner"></div><div class="inner"></div> -->
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>
<style>
.outer {
     /* 方式三 */
    width: 301px;
}
.inner {
    width: 33.33%;
    height: 300px;
    display: inline-block;
    outline: 1px solid #f00;
    font-szie: 30px;
}
.inner:last-child {
    margin-right: 5px;
}
.outer {
    /* 方式二 */
    /* font-size: 0; */
}
</style>

自适应宽

<div class="outer">
    <div class="fixed"></div>
    <div class="auto"></div>
</div>
<style>
.fixed {
    width: 200px;
}
.fixed, .auto {
    height: 300px;
    outline: solid 1px blue;
}
.fixed {
    display: inline-block;
    vertical-align: top;
}
.auto {
    dispaly: inline-block;
    width: 100%;
    margin-left: -200px;
    padding-left: 200px;
    box-sizing: border-box;
    vertical-align: top;
}
</style>

此文章为7月Day22学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪