【前端】相信你会用到的一篇笔记---CSS篇（2）

个人博客： smile小站
欢迎各位来访，交换友链

1.文档流

正常：自上向下，自左向右
如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失

2.布局模式

在网页中，元素有三种布局模型：

1. 流动模型（Flow） 默认的
2. 浮动模型 (Float)
3. 层模型（Layer）

流动模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动

层模型有三种形式：
1、相对定位(position: relative)
2、绝对定位(position: absolute)
3、固定定位(position: fixed)

常见布局：

• 一列布局 （一般都是固定的宽高）
• 二列布局 （常用 float 实现，注意及时清除浮动）
• 三列布局 （两侧定宽中间自适应）
• 混合布局 （在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分）

3.何为定位？

定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。

4.定位的种类

• 静态定位（正常布局）static
• 相对定位（保留原位置空白，在原位置基础上定位）relative
• 绝对定位（原位置不留白，在第一个设置 静态定位 的元素基础上定位）absolute
• 固定定位（相对于浏览器定位）fixed
• 混合定位（相对定位与固定定位的混合）sticky

定位可以使用：top bottom left right 进行调整
元素重叠可以用 z-index 设置元素的高低，只对定位元素有效

5.弹性盒子（flex）

优点:

• 在父内容里面垂直居中一个块内容。
• 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
• 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

使用：
flex-direction 可以指定主轴方向 列(column)/行(row) 若需方向添加(-reverse)
flex-wrap 可以指定是否还行

align-items 控制 flex 项在交叉轴上的位置
justify-content 控制 flex 项在主轴上的位置

6.多列（column）

column-width 列的宽度
column-count 列数
column-gap 列的间距
column-rule 指定列的宽度，样式和颜色

7.对齐方式

• 水平居中
• 垂直居中
• 水平垂直居中
  详情参考

8.左侧固定右侧自适应布局实现方法：

1. 双 inline-block
2. 双 float
3. float+margin-left
4. absolute+margin-left
5. float+BFC
6. flex
7. grid

9.圣杯布局和双飞翼布局

事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。

10.元素的 BFC 特性

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”，它规定了内部如何布局，与这个区域外部毫不相干。
BFC的布局规则：

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
• 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算。

什么时候会触发BFC：

• float的值不为none。
• overflow的值为auto,scroll或hidden。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。

BFC的作用：

• 利用BFC避免margin重叠。
• 自适应两栏布局
• 清除浮动
  详情参考