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 定义
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的值 |
|---|
参考
- display: none、visibility: hidden与opacity: 0的区别
- 一次弄懂css的BFC
- Flex 布局语法教程
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！