HTML+CSS零基础学习笔记（三）

CSS学习笔记（二）

一、两栏布局

两栏布局，即：左侧内容宽度自适应，右侧内容宽度固定，且两侧内容相邻而不重合。详见下图：

如上述代码所示，在两栏布局的时候，在html中必须先写需要用到定位的那一栏，否则会出错！
如果将上图左侧html文档中的div调换位置，会出现以下两栏布局不成功的情况！

二、两大经典BUG

1. margin 塌陷
   ★定义★：父子嵌套的两个元素，垂直方向的margin会结合到一起，并取两者中的最大值。
   解决方式：
   1）给父级元素设置一个上边框（1px…）— 不能用
   2）bfc语法 — block format context (块级格式化上下文)
   
   在一个元素的父级的CSS中，应用上图中四种方式的任意一种，都能够触发此父级盒子的bfc语法。但需根据具体需求决定使用哪一种方法好，同时使其对周围元素产生的影响降到最小。
2. margin 合并
   ★定义★：两个兄弟结构元素在垂直方向上的margin是合并的。
   解决方式：
   1）将其中一个兄弟元素或者将这两个兄弟元素都套在一个具有bfc语法规则的父级元素里（如下图）。— 不好，不用（因为在实际开发中，不能因为解决某个BUG而改变HTML结构）
   
   2）此bug可以不解决，只需要知道此BUG的存在，并且在设置margin值时注意一下就行。（如：在上图的代码中，只设置 demo1的下边距 或 demo2的上边距 为150px，就可以避免引发此BUG。）

三、浮动模型（float:left/right）

1. 应用 float 属性的前后对比
   1）没有设置 float 属性时：
   
   
   2）设置了 float 属性时：
   
   
2. float属性的值 left 和 right 的区别
   
3. ★浮动元素 会产生 浮动流★
   对于所有产生了浮动流的元素：①块级元素看不到它们；②产生了 bfc 的元素、具有文本类属性(inline)的元素和文本都能看到浮动元素。
   
   
   

   【注意】
   1）上述问题还可以通过触发浮动元素的父级元素的bfc 来解决。但是，通过伪元素来解决是最常用的，也是效果最好的。
   2）凡是设置了position: absolute; 或 float: left / right; 的元素，系统会打内部把元素转换成inline-block，这时会由该元素的内容撑开它的宽高。

4. float 属性也可以用来实现“报纸式”环绕布局
   

四、伪元素（::before / ::after）

伪元素是行级元素，不能直接设置宽高，需要将其的display属性值改为：inline-block 或 block。

五、小案例（淘宝导航条）

总结自《渡一教育_2020权威HTML+CSS零基础入学》