1、什么是语义化标签？都有哪些语义化标签及其对应的意思？
1）合理的标签干合理的事情。即使用恰当语义的标签，使页面元素有含义，页面结构清晰，便于理解及搜索引擎优化。
2）常用的语义化标签：
<h1>~<h6> 标题、<header>页面头部介绍展示区域、<nav> 页面导航链接区域、<main> 页面的主要内容、<aside> 侧边栏、<footer> 页面的底部信息 ...等。
2、html 标签分为哪几种？有何区别？如何转换？
1）行内标签（spa、a、i、em）、块级标签（div、p、h1~h6、ul、li）和行内块级标签（input、button、img、td）
2）行内标签不能设置宽高，仅可设置行高，不能容纳块级元素，只能容纳其他行内元素和文本，设置 margin 和 padding 上下值无效、左右值有效，行内元素一条水平线内排列，在同一行。
块级标签独占一行，可以设置宽高，可以容纳块级元素、行内元素及其他内联元素等，可以设置 margin 和 padding，块级元素独占一行垂直向下排列。
行内块级标签综合了行内标签和块级标签的特性，在一行上排列，可以设置宽高和内外边距。
3）这三类标签可以相互转换，通过修改 display 的属性值。
display:inline; 设置为行内元素 display:block; 设置为块级元素 display:inline-block; 设置为行内块级标签
3、display 还有哪些属性值？
dispaly:none; 隐藏元素 display:flex; 弹性布局 display:grid; 网格布局 display:table-cell 表格布局，元素作为表格单元格显示
4、隐藏一个元素有哪些方法？display:none; 和 visibility:hidden 的区别？
1）display:none; 和 visibility:hidden; 常用的隐藏元素方法
opacity:0; 元素透明度
position: absolutely; top: -9999px; left: -9999px; 把元素放在可视区域外
overflow:hidden; 防止溢出，隐藏超出范围的元素
2）display:none; 隐藏后的元素不占据任何空间，而 visibility:hidden; 隐藏后的元素空间依旧保留，还会影响页面布局；在切换显示与否时，visibility:hidden; 性能上要好，不会引起回流，而 display:none 会引起回流（回流必然引起重绘，重绘不一定会回流）
5、有哪些方式能实现元素居中？
定位：三种
.child {
box-sizing: border-box;
width: 100px;
height: 50px;
line-height: 48px;
text-align: center;
font-size: 16px;
border: 1px solid lightblue;
background: lightcyan;
}
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -50px;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} display:flex;
.parent {
display: flex;
justify-content: center;
align-items: center;
} display:table-cell;
.parent {
display: table-cell;
vertical-align: middle;
text-align: center;
/* 固定宽高 */
width: 500px;
height: 500px;
}
.child {
display: inline-block;
}6、响应式布局方法有哪些？
@media媒体查询：针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。
百分比%：使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。
vm/vh：vw 表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下，1vw 都等于视图宽度的百分之一。
rem：rem 单位是相对于html元素（也称为根元素）字体大小的。 默认情况下，html 元素的 font-size 为16px。所以此时1rem = 16px。
利用 rem 和媒体查询，在分辨率发生变换时，给它不同的font-size。
利用 UI 框架实现响应式布局，如 elementUI，iview，bootstrap 等框架提供了栅格系统。
移动端响应式布局 viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
7、盒子模型有哪些，有何区别？
W3C盒模型（标准盒模型）：box-sizing:content-box
怪异盒模型（IE盒模型）：box-sizing:border-box；
区别：W3C盒模型设置的宽度就等于内容的宽度；怪异盒模型内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度。
box-sizing: inherit; // 规定应从父元素继承 box-sizing 属性的值。
8、z-index 的工作原理及适用范围？
1）z-index 属性表示元素在三维浏览器视觉中绘制的顺序，默认情况下，所有元素的 z-index 皆为 0，浏览器按照 DOM 顺序进行绘制；然而实际上，z-index 为我们提供了何时绘制元素的细节控制，通过指定较高的 z-index，我们可以使绘制出的元素“更接近”用户，如果我们指定一个较低的(或负值) z-index，我们可以使绘制出的元素更接近画布。
2）z-index 仅用于 position 属性不为 static 的元素；z-index 仅适用于元素在其所属的层叠上下文中的位置。
9、flex:1; 缩写了哪几个属性？flex 如何实现垂直集中？flex-basis 与 width 的区别？
1）flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto 。
flex-grow 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大；
flex-shrink 定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小；
flex-basis 给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。
flex:1; => flex:1 1 0;
2）justify-content:center; align-items:center;
3）在 flex 布局中，flex-basis 优先级比 width 高，若同时设置了具体的数值，则 width 在样式表现上完全忽略；width 只是 flex-basis 为 auto 时，间接生效。
10、什么是重绘和回流（重排）？有何区别？使用 transform 会触发重绘和回流？transform 和 z-index 同时设置的情况下其优先级？
1）回流：元素的变化影响了元素的几何信息(位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置。
重绘：元素的外观发生改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观，没有改变布局。
2）重绘不一定需要回流，回流必然会导致重绘。回流对性能的消耗更多一些
3）transform 属于合成属性，不会触发重绘回流。对合成属性进行 transtion/animate 动画时，将会创建一个合成层，使得动画元素在独立的层进行渲染。
被提升为合成层的渲染层元素：
- 3D transforms: translate3d、translateZ
- video、canvas、iframe
- 通过 Element.animate() 或 CSS动画 实现的 opacity 动画转换
- position:fixed;
- 具有 will-change 属性
- 对 opacity、transform、fliter、
backdropfilter应用了animation或transition
注：使用 will-change: transform; 将 CPU 消耗高的渲染元素提升为一个新的合成层，开启 GPU 加速页面渲染，从而大大降低了 CPU 的负载压力，达到优化页面渲染性能的目的，也可以使用 transform: translateZ(0)。
4）使用 z-index 和 transform 都可以改变元素的堆叠顺序。z-index 控制 z 轴， 需结合 position 属性，z-index 数值越大层级越高，越接近用户；通过 transform:translateZ() 改变元素层叠顺序，需在其父元素设置 transform-style:preserve-3d 或在 transform 中结合 perspective 使用，数值越大层级越高；
如果同时设置了 transform 和 z-index，则 z-index 会失效，因为 transform 会创建比 z-index 更高层级的 堆叠上下文。
11、CSS优化技巧？
CSS 选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间，所以优化选择器的原则是尽量避免使用消耗更多匹配时间的选择器。
CSS 选择器是从右到左进行规则匹配，最右边选择符称为关键选择器
CSS选择器执行效率排序（高>低）: id选择器（#）>类选择器（.）>标签选择器（p,h1）>相邻选择器（h1+p）>子选择器（ul<li）>后代选择器（li a）>通配符选择器（*）>属性选择器（a[ref="ex"]）>伪类选择器（a:hover,li:nth-child）
优化：避免使用通用选择器；避免使用标签或 class 选择器限制 id 选择器；避免使用标签限制 class 选择器；避免使用多层标签选择器，使用 class 选择器替换，减少 css 查找；避免使用子选择器；使用继承。
注：若有解答不详的问题，可以再查阅下其他资料，仅供参考；
若有误，还请大佬们指出，谢谢！
3169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
