css中那些和布局相关的问题你会了吗？-一一网

1. display: none，opcity: 0，visibility: hidden的区别

这三者都可以隐藏元素，区别在于：

特性	display: none	visibility: hidden	opcity: 0
占据空间	不占空间，修改会引起重排重绘	占空间，元素无效，修改只进行重绘	占空间，元素透明，修改只进行重绘
子节点继承	不继承，子元素不存在	继承，可以通过设置子元素 visibility:visible 使子元素显示出来	继承，但是不能通过设置子元素opacity: 0使其重新显示
事件绑定	元素不存在，无法触发	无法触发	可以触发
transition动画	元素不存在，设置无效	无效	有效

PS：

回流（reflow): 当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。每个页面至少需要一次回流，就是在页面第一次加载的时候
重绘（repaint): 当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color，则称为重绘。
其他隐藏元素的方法
- 设置position属性值为fixed(absolute、relative)，并设置足够大负距离left、top
- 用层叠关系z-index将元素置于最底层；
- 设置hight: 0，同时overflow: hidden；
- text-indent: -9999px使文字隐藏。

2. BFC

2.1 定义

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

2.2 规则

内部的Box会在垂直方向一个接着一个地放置。
Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动子元素也参与计算。

2.3 创建

⭐️ 根元素（<html>）
⭐️ 浮动元素（元素的 float 不是 none）
⭐️ 绝对定位元素（元素的 position 为 absolute 或 fixed）
⭐️ overflow 计算值(Computed)不为 visible 的块元素
⭐️ 行内块元素（元素的 display 为 inline-block）
⭐️ 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
⭐️ 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

2.4 用途

解决浮动元素令父元素高度坍塌的问题

当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷。而计算BFC的高度时，浮动子元素也参与计算。所以可以通过给父节点开启BFC来清除浮动。

两栏自适应布局

利用BFC的区域不会与float box重叠原理，左边固定宽度，右边开启BFC。

外边距垂直方向重合的问题

该问题是因为属于同一个BFC的两个相邻的Box的margin会发生重叠。可以给其中一个Box单独再包一层BFC Box。

3. display 值

none: 此元素不会被显示。
block: 此元素将显示为块级元素。
- 总是另起一行
- 可以设置其宽度、高度，内外边距
- 在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）
- 可以容纳行内元素和其他块元素
inline: 默认。此元素会被显示为内联元素，元素前后没有换行符。
- 总是和相邻的行内元素在同一行上
- 设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效
- 默认宽度是他自身内容的宽度
- 行内元素只能容纳其他行内元素或者文本
inline-block: 行内块元素综合了块元素和行内元素的不同特点。
- 和相邻行内元素在同一行，但是之间会有空白缝隙
- 默认宽度是他本身内容的宽度
- 宽度、高度、行高、外边距以及内边距都可以手动设置

4. position 值

static (默认) : 始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让top，right，bottom，left的值失效。在用js切换的时候可以尝试这个方法。
relative: 基于元素在正常的文档流的默认位置偏移。
absolute: 脱离标准文档流，不占据空间位置，不会将父类撑开，设置top，right，bottom，left的值是相对于第一个非static的父元素。
fixed: 脱离标准文档流，设置top，right，bottom，left的值是相对于窗口元素。

注意：

除了static值，在其他三个值的设置下，z-index才会起作用。
页面上很多效果都是父相(relative)子绝(absolute)来实现的。

5. 元素居中

水平居中

行内元素:

.father { text-alain: center }
复制代码

固定宽度块状元素:

// margin设置为auto
.son { margin: 0 auto }

// 利用position负定位，父元素position设为relative
.son {
    width: 100px;
    position: absolute;
    left: 50%; // 父元素宽度的50%
    margin-left: -50px; // 负的子元素宽度的一半
}

// 利用position定位 + margin设置，父元素position设为relative
.son {
    width: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}
复制代码

不固定宽度块状元素

// 利用position负定位，父元素position设为relative
.son {
    position: absolute;
    left: 50%; // 父元素宽度的50%
    transform: translate(-50%, 0); // 负的子元素宽度的一半
}

// flex布局, 可灵活运用进行多个块状元素的居中
.father {
    display: flex;
    justify-content: center;
}
复制代码

垂直居中

单行，固定父元素高度:

.son { line-height: 100px } // 行高等于父元素高度
复制代码

固定高度块状元素:

// 利用position负定位，父元素position设为relative
.son {
    height: 100px;
    position: absolute;
    top: 50%; // 父元素高度的50%
    margin-top: -50px; // 负的子元素高度的一半
}

// 利用position定位 + margin设置，父元素position设为relative
.son {
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
复制代码

不固定高度块状元素

// 利用伪元素
.father::after, .son {
    display: inline-block;
    vertical-align: middle;
}
.father::after {
    content: ' ';
    height: 100%;
}

// 利用表格特性，父元素display设为table
.son {
    display: table-cell;
    vertical-align: middle;
}

// 利用position负定位，父元素position设为relative
.son {
    position: absolute;
    top: 50%; // 父元素高度的50%
    transform: translate(0， -50%); // 负的子元素高度的一半
}

// flex布局, 可灵活运用进行多个块状元素的居中
.father {
    display: flex;
    align-items: center;
}
复制代码

6. flex布局

通过设置 display 属性值为 flex 或 inline-flex，将容器指定为Flex布局。

容器属性

flex-direction: 主轴的方向，即项目的排列方向，row（主轴水平，向右排列） | row-reverse（主轴水平，向左排列） | column（主轴垂直，向下排列） | column-reverse（主轴垂直，向上排列）
flex-wrap: 换行，nowrap（不换行） | wrap（换行，新行在下方） | wrap-reverse（换行，新行在上方）
flex-flow: flex-direction + flex-wrap 简写，默认 row nowrap
justify-content: 主轴上项目的对齐方式，flex-start | flex-end | center | space-between | space-around
align-items: 交叉轴上对齐方式，flex-start | flex-end | center | baseline | stretch
align-content: 多根轴线对齐方式，flex-start | flex-end | center | space-between | space-around | stretch

项目属性

order: 项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow: 项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink: 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis: 分配多余空间之前，项目占据的主轴空间。值为长度或百分比。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。可以设为跟width或height属性一样的值使项目占据固定空间。
flex: flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

flex值

flex的取值	flex-grow flex-shrink flex-basis	含义
默认	0 1 auto	不放大可缩小
auto	1 1 auto	可放大可缩小
none	0 0 auto	不放大不缩小
1	1 0 auto	可放大不缩小
n	n 0 auto	一个数字，则n表示flex-grow的值
n m	n m auto	两个数字，则n表示flex-grow flex-shrink的值
L	0 1 L	长度或百分比，则n表示flex-basis的值
n L	n 1 L	两个数字，则n表示flex-grow flex-basis的值