【前端面试题】04—33道基础CSS3面试题(附答案) - 知乎 (zhihu.com)
CSS 盒模型（width + padding + border + margin）
当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
- 在box-sizing属性为conten-box的时候，width=元素的内容区
- 在box-sizing属性为border-box的时候，width=元素内容区+padding+border
普通盒模型和IE盒模型：box-sizing：content-box和border-box的区别
描述几种定位的含义和区别：
一看就懂，关于HTML5里面的定位 （position ）相对定位，绝对定位，固定定位 ，粘性定位；有图有对比 值得你的信赖（一个在千锋逆战班奋斗的年轻人）_VIP弟弟的博客-CSDN博客
- position:static(默认值)没有定位，元素出现在正常的标准流中；
- position:relative(相对定位)
- position:absolute(绝对定位)
- Position:fixed(固定定位)
- position:sticky(粘性定位)（css3新增兼容不好）
.position:relative(相对定位)：
不脱离文档流，相对定位后，该元素原来的空间还占浏览器位置；不影响其他元素的排列。
相对于自己本身的位置（初始位置）移动，参照物是自己；
.posittion:absolut(绝对定位)
脱离文档流，当一个元素绝对定位之后，该元素是悬空的，会影响其他元素的排列；
相对于定位方式不是static的第一个父元素进行定位（往上寻找参照元素，一直到根元素为止，即body）；
如果多个元素同时给了绝对定位，那么排在后面的元素会在最上面，可以通过 z-index：0（默认值是0），可以给负值，值越大层越靠上。
posittion:fixed(固定定位)
脱离文档流，但该元素会固定在某个位置不动，如果有多个元素，固定定位元素会盖在最上面
用top left right bottom 移动 位置，固定位置后元素以窗口为参照物固定其位置不变
参照物是浏览器窗口，和它元素无关（包括添加了定位的元素），拖动窗口不在改变
posittion:sticky(粘性定位)
粘性定位被视为对固定定位和相对定位的混合体，该元素被视为相对定位直到它超过一定范围后，此时它被称为固定定位
A.必须指定 top、right、bottom、left 四个阈值的其中之一， 粘性定位才会生效。
B.此外，粘性定位元素的表现与其父元素有关当父元素不是 body 时，父元素的高度（或宽度）必须大于粘性定位元素的高度，才能在页面滚动时，看出粘住效果。
float
CSS 的 Float（浮动），会使当前元素脱离普通流，可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。其周围的元素也会重新排列。浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。
浮动float的本意是什么呢？是：让文字像流水一样环绕浮动元素。
清除浮动 clear : none | left | right | both
稍微要注意的是，clear是仅作用于当前元素，例如元素A是浮动元素，靠左显示。元素B是block元素紧跟在A后面。此时要清除浮动，是在B上设clear:left。你在A上设clear:right是没有用的，因为A的右边没有浮动元素。
父元素内部所有元素都float的话，会造成父元素高度塌陷-->解决：
1、BFC(Blocking formatting context)==>设置父元素 overflow 或者display：table 属性来闭合浮动什么是BFC？看这一篇就够了_Leon_94的博客-CSDN博客_bfc
BFC："块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
2、给父元素设置宽高（能够详细计算出实际高度，否则容易布局混乱）
3.给父元素添加一个子元素，设置clear属性；
4.给父元素添加一个伪类设置clear；
float效果非常近似于display:inline-block。但相比之下，浮动能设定为左浮和右浮，但display:inline-block都是从左到右排列的。（还有些细微差别，两个display:inline-block间会有空隙，但两个float间没有。）
display:inline-block元素之间空隙 : 换行符/空格间隙问题！
display:inline-block元素之间空隙的产生原因和解决办法_Hayley2016的博客-CSDN博客_displayinlineblock 元素有空隙
空隙产生的原因
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。
解决空隙的办法
1、元素排列在一行，解决元素之间的空白符（缺点：代码的可读性变差）
2、为父元素中设置font-size: 0，在子元素上重置正确的font-size（缺点：inline-block元素必须设定字体，不然行内元素中的字体不会显示。 增加了代码量）
3、最优解---设置父元素，display:table和word-spacing。几个关于diaplay:table布局神器的绝妙应用场景
IFC（Inline formatting contexts）：内联格式上下文
IFC 的 line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)IFC 中的 line box 一般左右都贴紧整个 IFC，但是会因为 float 元素而扰乱。
float 元素会位于 IFC 与与 line box 之间，使得 line box 宽度缩短。同个 ifc 下的多个 line box 高度会不同
IFC 中时不可能有块级元素的，当插入块级元素时（如 span 中插入 div）会产生两个匿名块与 div 分隔开，即产生两个 IFC，每个 IFC 对外表现为块级元素，与 div 垂直排列。
1、p元素中是不能嵌套块级元素的。
p标签内嵌div的结果是p标签被div切成两个标签了~估计脑补的过程是这样的：
<p>sample</p><div>inline</div><p></P>
2、内联元素的img 与 input比较特殊，他们有内联元素没有的宽高，w3c定义为replace元素，将元素设置为display:inline-block，模拟的就是replace元素。
那么 IFC 一般有什么用呢？
水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。
垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
GFC（GrideLayout formatting contexts）：网格布局格式化上下文
当为一个元素设置 display 值为 grid 的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
那么 GFC 有什么用呢，和 table 又有什么区别呢？首先同样是一个二维的表格，但 GridLayout 会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。
FFC（Flex formatting contexts）:自适应格式上下文
display 值为 flex 或者 inline-flex 的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少 safari 和 chrome 还是 OK 的，毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。
通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。
伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。
1、-webkit-, -moz-, -o-, -ms- 私有前缀：
目的：向前兼容不同的老版本的浏览器
-moz-对应 Firefox,
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer
解决：npm autoprefixer工具。采用CSS预处理语言：Sass 与 Less
2、postcss:postcss - 简书
(99条消息) Scss中的指令@import、@media、@extend 继承、@mixin、@include_Army-海军的博客-CSDN博客_@include scssPostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS 中文网
Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网
需要动手实践操作。
3、css优先级，属性选择器的优先级在哪
！important>内联样式>内部样式>外部样式
选择器的优先级中：最高的是ID选择器
紧接着是：类选择器、属性选择器、伪类选择器
再下来是：元素选择器、伪元素选择器
最后是：其他选择器
至于同级的选择器一般看在页面中出现的位置，后写的生效。
选择器的权重计算：
第一等：代表内联样式，如: style=” ”，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表class，伪类和属性选择器，如.content，权值为0010。
第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值
4、伪类选择器和伪元素选择器
伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
伪类：伪类存在的意义是为了通过选择器格式化DOM树以外的信息 (比如： <a> 标签的:link、:visited等。这些信息不存在于DOM树中。)；还有不能被常规CSS选择器获取到的信息。(比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child来获取到。)只有一个：
a:link|a:visited|a:hover|a:active
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。
伪元素：本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码），伪元素不是节点，它不会出现在DOM树中，但是在显示上会具备节点的效果
有两个：：
/* 为某个元素的第一行文字使用样式。 */ ::first-line /* 为某个元素中的文字的首字母或第一个字使用样式。 */ ::first-letter /* 在某个元素之前插入一些内容。 */ ::before /* 在某个元素之后插入一些内容。 */ ::after
::selection用来改变浏览网页选中文的默认效果
区别：
伪类与伪元素都是用于向选择器加特殊效果 ，伪类与伪元素的本质区别就是是否抽象创造了新元素 ，伪类只要不是互斥可以叠加使用， 伪元素在一个选择器中只能出现一次，并且只能出现在末尾
CSS选择器以及如何区分伪类选择器和伪元素选择器_就是干！！的博客-CSDN博客_伪元素选择器和伪类选择器区别
5、CSS动画：transform、translate、transition
transform 是指变换、变形，是 css3 的一个属性，和 width，height 属性一样；
translate 是 transform 的属性值，是指元素进行 2D(3D)维度上位移或范围变换（使用百分比是以该元素的内容区+padding+border为标准计算的）
transition 是指过渡效果，往往理解成简单的动画，需要有触发条件。
这里可以补充下 transition 和 animation 的比较，前者一般定义开始结束两个状态，需要有触发条件；而后者引入了关键帧、速度曲线、播放次数等概念，更符合动画的定义，且无需触发条件
（1）Transform: 向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
| transform-origin | 允许你改变被转换元素的轴心位置（例如旋转时的中心点）。 |
rotate、scale、scaleX、scaleY、skewX、skewY、skew、matrix
（2）Transition：transition: property duration timing-function delay;
transition: 1s 1s height ease;transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
CSS Animation就是为了解决这些问题而提出的。
（3）Animation+@keyframes
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
animation: 1s 1s rainbow linear 3 forwards normal;@keyframes 中创建动画：请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
注释：当动画完成后，动画的状态会回到初始状态。要改变这一点，可以设置 animation-fill-mode: forwards; 使动画完成后停留在最后一帧。
6、垂直水平居中的几种实现方式
一、固定宽高：
（1）定位 + margin-top + margin-left
.box-container{
position: relative;
width: 300px;
height: 300px;
}
.box-container .box {
width: 200px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px; /* 高度的一半 */
margin-left: -100px; /* 宽度的一半 */
}
（2）定位 + margin
.box-container{
position: relative;
}
.box {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
（3）absolute + calc，存在兼容问题（依赖calc的兼容性）
.box-container{
position: relative;
}
.box {
position: absolute;;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
二、未知宽高
1、transform 方案: 存在兼容问题：
.box {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
2、flexbox 方案: 存在兼容问题
.box-container {
display: flex;
justify-content: center;
align-items: center;
}
3、display: table-cell 无兼容性问题
.box {
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
（1）通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。
（2）父元素：display:flex；子元素：align-self:center;
（3）为父元素添加伪元素:before，使得子元素实现垂直居中：
父元素:before{
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
（4）父元素display:table，子元素display：table-cell的方式实现CSS垂直居中
（5）给子元素的position:relative，再通过translateY即可定位到垂直居中的位置：translateY(-50%);
（6）设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。
7、CSS两栏布局
(105条消息) CSS两栏布局_lalaxuan的博客-CSDN博客_css双栏布局
block（块）元素的特点:
①、总是在新行上开始；
②、高度，行高以及外边距和内边距都可控制；
③、宽度缺省是它的容器的100%，除非设定一个宽度。
④、它可以容纳内联元素和其他块元素
行内元素与块级元素有什么不同？
区别一：
块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
区别二：
块级：块级元素可以设置宽高
行内：行内元素不可以设置宽高
区别三：
块级：块级元素可以设置margin，padding
行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
区别四：
块级：display:block;
行内：display:inline;
可以通过修改display属性来切换块级元素和行内元素
(105条消息) CSS两栏布局_lalaxuan的博客-CSDN博客_css双栏布局
左右两栏布局（左列定宽，右列自适应）：
1、浮动+BFC
.left{width:100px;height:100%;float: left;background: #f00;}
.right{height: 100%;background: #0f0;overflow: hidden;}2、定位
.container {
position: relative;
}
.left {
position: absolute;
left: 0;
width: 300px;
height: 50vh;
background-color: yellowgreen;
}
.right {
position: absolute;
left: 300px;
right: 0;
height: 100vh;
background-color: skyblue;
}
3、浮动+margin || 定位+margin
.left {
width: 300px;
height: 50vh;
background-color: yellowgreen;
float: left;
}
/**.left {
position: absolute;
left: 0;
width: 300px;
height: 50vh;
background-color: yellowgreen;
}
*/
.right {
height: 100vh;
background-color: skyblue;
margin-left: 300px;
}
4、使用flex布局
.container {
display: flex;
height: 50vh;
}
.left {
width: 300px;
background-color: yellowgreen;
}
.right {
/* 填充剩余空间 */
flex: 1;
background-color: skyblue;
}
5、浮动布局+负外边距（双飞翼布局的两栏版）
<div class="container">
<div class="left"></div>
<div class="right">
<div class="content"></div>
</div>
</div> .left {
width: 300px;
height: 50vh;
background-color: yellowgreen;
float: left;
margin-right: -100%;
}
.right {
width: 100%;
float: left;
}
.content {
margin-left: 300px;
height: 100vh;
background-color: skyblue;
}
6、使用calc
.container {
display: flex;
height: 50vh;
}
.left {
width: 300px;
background-color: yellowgreen;
}
.right {
width: calc(100% - 300px);
background-color: skyblue;
}左列不定宽，右列自适应
flex布局或者浮动+BFC
去掉宽度设置即可 左边栏的大小 靠内容撑开
上下两栏布局：
*{margin: 0;padding: 0;}
html,body,.wrap{width: 100%;height: 100%;}
.wrap{padding-top: 100px;box-sizing: border-box;position: relative;}
.top{height: 100px;width: 100%;background: #f00;position: absolute;top: 0;}
.bottom{width: 100%;height: 100%;background: #0f0;}*{margin: 0;padding: 0;}
html,body,.wrap{width: 100%;height: 100%;}
.wrap{position: relative;}
.top{height: 100px;width: 100%;background: #f00;}
.bottom{width: 100%;position: absolute;top: 100px;bottom: 0;background: #0f0;}左中右三栏布局（左右两边固定，中间自适应）
<style>
*{margin: 0;padding: 0}
html,body,.wrap{width:100%;height: 100%;}
.left{width: 100px;height: 100%;float: left;background: #f00;}
.right{width:100px;height: 100%;float:right;background: #f00;}
.center{height: 100%;overflow: hidden;background: #0f0;}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
/**注意div顺序，将右边的盒子放在中间盒子的上边，否则页面解析到中间盒子的时候，就自动将左边盒子的右边剩余的空间占满，然后右边的盒子就在第二屏出现*/CSS经典布局 -- 圣杯布局 & 双飞翼布局
(105条消息) CSS经典布局 -- 圣杯布局 & 双飞翼布局_爱划水de鲸鱼哥～的博客-CSDN博客
8、CSS和JS的位置会影响页面效率，为什么？
css在加载过程中不会影响到DOM树的生成，但是会影响到Render树的生成，进而影响到layout，所以一般来说，style的link标签需要尽量放在head里面，因为在解析DOM树的时候是自上而下的，而css样式又是通过异步加载的，这样的话，解析DOM树下的body节点和加载css样式能尽可能的并行，加快Render树的生成的速度。
js脚本应该放在底部，原因在于js线程与GUI渲染线程是互斥的关系，如果js放在首部，当下载执行js的时候，会影响渲染行程绘制页面，js的作用主要是处理交互，而交互必须得先让页面呈现才能进行，所以为了保证用户体验，尽量让页面先绘制出来。
9、word-wrap（Overflow-Wrap） vs. word-break & hyphens 允许长单词或数字换行
（1）word-break属性指定非CJK脚本的断行规则。
提示:CJK脚本是中国，日本和韩国（"中日韩"）脚本。
word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法overflow-wrap。
（2）word-break: normal|break-all|keep-all; (break-word只有Chrome、Safari等部分浏览器支持)断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。排列比较紧凑。行内元素是没有效果,但谷歌可以。
word-break: break-all 在特殊的标点符号时无效，比如连续一串中文或英文感叹号，此时反而是 break-word 有效；word-break: keep-all 会在空格或连字符 - 时拆分单词，不止是空格
word-wrap: normal|break-word; 首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。word-wrap对行内元素是没有效果的。
（3）white-space:normal | nowrap | pre | pre-wrap | pre-line;
指定元素内的空白怎样处理
white-space:nowrap：不换行。直到遇到 <br> 标签为止。
（4）hyphens: none|manual|auto|initial|inherit;是否允许英文换行时添加连字符。使用时，HTML页面，必须为英文语言
<html lang="en-US">10、text-decoration:
text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。
text-decoration-skip-ink ：不属于text-decoration属性简写中的一部分。IE不支持。
By default, browsers will “skip” areas where the “ink” of a character crosses an underline, like so:
You can change this behavior to force the underline/overline to go through the character by setting text-decoration-skip-ink to none.
linear-gradient：
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
11、Flex 布局： 30 分钟学会 Flex 布局 - 知乎
需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。
Flex 容器属性：
有下面六种属性可以设置在容器上，它们分别是：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
align-items和align-content的区别，我们只需要记住以下两点，
align-items属性是针对单独的每一个flex子项起作用，它的基本单位是每一个子项，在所有情况下都有效果（当然要看具体的属性值）。
align-content属性是将flex子项作为一个整体起作用，它的基本单位是子项构成的行，只在两种情况下有效果：①子项多行且flex容器高度固定 ②子项单行，flex容器高度固定且设置了flex-wrap:wrap;
除了基本的排列和居中用法外，还有伸缩的作用：
Flex 项目属性：
有六种属性可运用在 item 项目上：
- order：定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
- flex-basis
- flex-grow
- flex-shrink
- flex
- align-self
flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，负值对该属性无效。。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小，这时候 item 的宽高取决于 width 或 height 的值。flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。
例：当主轴为水平方向的时候，当设置 flex-basis为auto之外的值(number: 一个长度单位或者一个百分比，规定 flex 元素的初始长度)，项目的宽度设置值会失效
- 当 flex-basis 值为 0 % 时，是把该项目视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。
- 当 flex-basis 值为 auto 时，则跟根据尺寸的设定值(假如为 100px)，则这 100px 不会纳入剩余空间。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
flex:1 到底代表什么? - 知乎；
11、Grid 布局：
grid-template-row和grid-auto-row区别？
12、first-child vs. first-of-type
:first-child和:first-of-type的区别（:first-child选择无效）_哈哈哦0的博客-CSDN博客
13、css重排与重绘：触发回流一定会触发重绘
(99条消息) 浏览器重排与重绘详解_星河梦~的博客-CSDN博客_浏览器的重绘和重排
面试官：怎么理解回流跟重绘？什么场景下会触发？ | web前端面试 - 面试官系列 (vue3js.cn)
掌握浏览器重绘(repaint)重排(reflow))-前端进阶_wx60d4764eb475e的技术博客_51CTO博客
什么是重排和重绘，更改哪些属性会触发重排和重绘，如何避免？ - 掘金 (juejin.cn)
还有一些容易被忽略的操作也会引起重排：获取一些特定属性的值
offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight
这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流
除此还包括getComputedStyle方法，原理是一样的
14、clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
clientHeight & clientWidth（只读）：
- 一个元素没有css或者这个元素是内联元素时，返回 0。包含内边距，但不包括水平滚动条、边框和外边距。没有定义CSS或者内联布局盒子的元素为0
- contentH + paddingH - scrollbarH (if present)
scrollTop
一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
判断是否滚到最底部
const isRead = HTMLElement.scrollHeight - HTMLElement.scrollTop === HTMLElement.clientHeight;scrollHeight & scrollWidth（只读）：
- 返回元素的高度，包括不可见的溢出部分
- 包含伪类的高度(::after,::before等)
- 如果没有滚动条的话，和clientHeight相等
offsetHeight & offsetWidth（只读）：
- contentH + paddingH + borderH + scrollbarH (if present)
- 包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包括外边距
- display:none时，值为0
- 不包含伪类(::before ::after)的高度
offsetParent：
- 返回最近的设置过position的祖先元素
- 如果当前元素没有设置过position，会返回最近的td、th、table、body
- 当该元素的display为none时候，offsetParent 返回 null
offsetLeft & offsetTop（只读）：
- 对于块状元素，offsetLeft 和 offsetTop 描述的是当前元素的border外侧 距offsetParent的border内侧的距离，和scroll无关
- 对于内联元素，offsetLeft 和 offsetTop 描述的是当前元素的border外侧 距offsetParent的border外侧的距离，和scroll无关
CSS中可继承属性：
字体系列属性、文本系列属性（注意：a 标签的字体颜色不能被继承；h1~h6标签字体的大小也是不能被继承的）、列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
所有子元素都可继承属性
- visibility：元素可见性
- cursor：光标属性
- z-index：堆叠顺序
响应式布局：
transform
rem：相对长度单位，相对于html根元素中定义的font-size值，例如html中定义font-size: 100px那么1rem就等于100px
vh：
media：
z-index的属性（取值范围：auto、number、inherit）
z-index堆叠规则 - starof - 博客园 (cnblogs.com)
z-index适用于已定位元素（即定义了position为相对定位、绝对定位、固定定位的元素，浮动元素不能用）。
同一层叠上下文
层叠级别大的显示在上，级别小的显示在下（层叠级别中的两个元素，根据它们在html文档中的顺序，写在后面的将会覆盖写在前面的）。
不同层叠上下文
元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。
(即：父节点的z-index值很小，无论子节点的z-index值多大，其层级依旧小。)
层叠顺序，层级由低到高：
标准流盒子< 浮动盒子< 定位盒子
- 根元素（即HTML元素）的背景和border
- 正常流中非定位后代元素
- 浮动元素
- 正常流中inline后代元素
- 已定位后代元素
background / border < 负z-index < block块状水平盒子 < float浮动盒子 < inline / inline-block水平盒子 < z-index: 0; < 正z-index
注：定位了的元素永远能压住没有定位的元素，浮动元素之间是不会出现z-index重叠的
什么样的元素会生成堆叠上下文呢？符合下面规则之一的：
- 根元素（即HTML元素）
- 已定位元素（即绝对定位或相对定位）并且z-index不是默认的auto。
- a flex item with a z-index value other than "auto",
- 元素opacity属性不为1(See the specification for opacity)
- 元素transform不为none
- 元素min-blend-mode不为normal
- 元素filter属性不为none
- 元素isolation属性为isolate
- on mobile WebKit and Chrome 22+,
position: fixedalways creates a new stacking context, even when z-index is "auto" (See this post) - specifing any attribute above in
will-changeeven you don't write themselves directly (See this post) - elements with -webkit-overflow-scrolling set to "touch"
15. svg和字体图标
2068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
