实例：居中五环，两栏布局，两个经典bug，BFC，浮动模型

初学入门，可能有些地方会理解有误，恳请批评指正~

1. 居中五环：用到上节层模型中的居中方法。

2. 两栏布局：一个固定一个自适应。

    （1）让固定栏定位（必须先写固定栏）。

    （2）让自适应的那栏让出固定栏的位置。用margin-right（固定栏在右侧时）。

3. 自适应容器：高度为容器内所装元素高度，宽度为文本宽度。

4. margin塌陷：父子嵌套的元素，垂直方向的margin，取父与子中最大的值。解决方法：

    （1）在父元素中，人为加上"border-top"属性。（能解决问题，但不合适，不可以用。）

    （2）改变父级的渲染规则，让父级变成bfc（弥补margin塌陷问题）。bfc：block format context（块级格式化上下文），通过一定的手段可以让盒子里默认的渲染规则发生改变。触发父元素的bfc。

            <1>如何触发一个盒子的bfc（每种触发方式都会引起其他问题，选择引起的问题对本设计无关的方法）：

                    《1》设置"position:absolute;"

                    《2》设置"display:inline-block;"

                    《3》设置"float:left/right;"

                    《4》设置"overflow:hidden;"（溢出盒子的部分要隐藏）

5. margin合并（不解决该问题）：两个元素，一个设置margin-bottom，一个设置margin-top，但是只显示最大的那个值，不会累加。若改变html代码可以解决，但是在开发过程中，html代码最好不要改动，因为会引起css、js的变化。所以这个问题只能通过改变设置数字的方式解决。

6. 浮动模型：float:left/right;

    （1）left：不管之前的排序方式，从左向右站队；right：不管之前的排序方式，从右向左站队。站队的边界为父级的边界

    （2）浮动元素产生了浮动流：

            <1>所有产生了浮动流的元素，块级元素看不到他们。

            <2>产生了bfc的元素和文本类属性（inline）的元素以及文本，都能看到浮动元素。——都可以包裹浮动元素

            <3>clear:both/left/right;——清除周边的浮动流。添加一个块级元素（必须是块级元素），使其具有clear属性，可以解决“父级看不到浮动元素”的问题——包裹浮动元素——该方法不科学

7. 伪元素：天生存在于任意一个元素中，可以通过css将伪元素选出来。

    （1）标签：：before{}——选出标签前面的伪元素；标签：：after{}——选出标签后面的伪元素

    （2）伪元素必须含有的属性：content；修改伪元素的内容，可以什么都不写.

    （3）伪元素是行级元素，可以改变display属性，使其变成inline-block

    （4）包裹浮动元素：先选出标签后面的伪元素，（必须含有content属性），然后设置其display属性为inline-block，然后添加clear:both;属性。——只能这样实现。

    （5）position:absolute; float:left/right;打内部把元素转换成inline-block，即内容决定大小。

    （6）使用过浮动元素以后，必须清除元素的浮动流，以免对后面的元素造成影响。

            元素：：after{

                        content:"";

                        display:inline-block;

                        clear:both;

            }

8. 报纸布局（文字环绕）：利用浮动可以实现。

2018-10-21（渡一教育“web前端开发HTML+CSS精英班”笔记）

拖了很久才听完，今天其实是11.1，好多内容都忘记了……要坚持下来呀~