这篇主要是先总结一下CSS相关的知识点，可能某些部分不会涉及到太多具体的细节，主要是对知识点做一下汇总，如果有兴趣或者有疑惑的话可以自行百度查阅下相关资料或者在下方评论区留言讨论，后续文章再继续总结JS和其他方面相关的知识点，如有不对的地方还请指出。
- CSS盒模型
CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。
CSS盒模型可以看成是 由从内到外的四个部分构成，即内容区（content）、内边距(padding)、边框(border)和外边距(margin)。内容区是盒子模型的中心，呈现盒子的主要信息内容；内边距是内容区和边框之间的空间；边框是环绕内容区和内边距的边界；外边距位于盒子的最外围，是添加在边框外周围的空间。
根据计算宽高的区域我们可以将其分为 IE盒模型 和 W3C标准盒模型 ，可以通过 box-sizing 来进行设置：
content-box border-box 区别：
W3C标准盒模型 ：width(宽度) = content(内容宽度)
IE盒模型 ：width(宽度) = content(内容宽度) + padding(内边距) + border(边框)
- BFC
BFC即Block Fromatting Context(块级格式化上下文)，它是页面中的一块独立的渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。具有BFC特性的元素可以看成是一个隔离的独立容器，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
IE浏览器下为hasLayout，一般可以通过zoom:(除normal外任意值)来触发，hasLayout是IE浏览器渲染引擎的一个内部组成部分。在IE浏览器中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和和组织内容。为了调节这两个不同的概念，渲染引擎采用了hasLayout的属性，属性值可以为true或false。当一个元素的hasLayout属性为true时，我们就说这个元素有一个布局(Layout)。当拥有布局后，它会负责对自己和可能的子孙元素进行尺寸计算和定位，而不是依赖于祖先元素来完成这些工作。
2.1 触发条件
根元素( ) 浮动元素(元素的 float 不是 none ) 绝对定位元素(元素的 position 为 absolute 或 fixed ) 行内块元素(元素的 display 为 inline-block ) 表格单元格(元素的 display 为 table-cell ，HTML表格单元格默认为该值) 表格标题(元素的 display 为 table-caption ，HTML表格标题默认为该值) display 值为 flow-root 的元素 overflow 属性的值不为 visible 弹性元素( display 为 flex 或 inline-flex 元素的直接子元素) 网格元素( display 为 grid 或者 inline-grid 元素的直接子元素) 2.2 布局规则
普通文档流布局规则 ：
浮动的元素是不会被父级计算高度的 非浮动元素会覆盖浮动元素的位置 margin会传递给父级 两个相邻元素上下margin会发生重叠 BFC布局规则 ：
浮动的元素会被父级计算高度(父级触发了BFC) 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC) margin不会传递给父级(父级触发了BFC) 两个相邻元素上下margin不会发生重叠(给其中一个元素增加一个父级，并让它的父级触发BFC) 2.3 应用
防止margin重叠 清除内部浮动(原理是父级计算高度时，浮动的子元素也会参与计算) 自适应两栏布局 防止元素被浮动元素所覆盖 3. 层叠上下文
层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置都是三维的，分别是平面画布上的 X轴 ， Y轴 以及表示层叠的 Z轴 。一般情况下，元素在页面上沿 X轴Y轴 平铺，我们察觉不到它们在 Z轴 上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
如果一个元素含有层叠上下文，我们就可以理解为这个元素在 Z轴 上就"高人一等"，最终表现就是它离屏幕观察者更近。
你可以把层叠上下文理解为该元素当了官，而其他非层叠上下文元素则可以理解为普通群众。凡是"当了官的元素"就比普通元素等级要高，也就是说元素在 Z轴 上更靠上，更靠近观察者。
3.1 触发条件
根层叠上下文( ) position 属性为非 static 值并设置 z-index 为具体数值 CSS3 中的属性也可以产生层叠上下文
flex transform opacity filter will-change -webkit-overflow-scrolling 3.2 层叠等级
层叠等级(stacking level)，又叫"层叠级别"或者"层叠水平"。
Z轴 Z轴 注意：
普通元素的层叠等级优先由其所在的层叠上下文决定。 层叠等级的比较只有在当前层叠上下文元素中才有意义，不同层叠上下文中比较层叠等级是没有意义的。
根据以上的层叠等级图，我们在比较层叠等级时可以按照以下的思路来顺序比较：
首先判定两个要比较的元素是否处于同一个层叠上下文中 如果处于同一个层叠上下文中，则谁的层叠等级大，谁最靠上 如果处于不同的层叠上下文中，则先比较他们所处的层叠上下文的层叠等级 当两个元素层叠等级相同，层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上 4. CSS3中新增的选择器以及属性
属性选择器： 属性选择器 含义描述 E[attr^="val"] 属性attr的值以"val" 开头 的元素 E[attr$="val"] 属性attr的值以"val" 结尾 的元素 E[attr*="val"] 属性attr的值 包含 "val"子字符串的元素 结构伪类选择器 选择器 含义描述 E:root 匹配元素所在文档的根元素，对于HTML文档，根元素始终是 E:nth-child(n) 匹配其 父元素的第n个子元素 ，第一个编号为1 E:nth-last-child(n) 匹配其 父元素的倒数第n个子元素 ，第一个编号为1 E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1) E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) E:empty 匹配一个不包含任何子元素的元素，文本节点也被看作子元素 E:not(selector) 匹配不符合当前选择器的任何元素 CSS3新增属性 属性 含义描述 transition 过渡效果 transform 变换效果(移动(translate)、缩放(scale)、旋转(rotate)、倾斜(skew)) transform-origin 设置旋转元素的基点位置 animation 动画效果 border-color 为边框设置多种颜色 border-radius 圆角边框 box-shadow 边框阴影 border-image 边框图片 background-size 规定背景图片的尺寸 background-origin 规定背景图片的定位区域 background-clip 规定背景图片从什么位置开始裁切 text-shadow 文本阴影 text-overflow 文本截断 word-wrap 对长单词进行拆分，并换行到下一行 opacity 不透明度 box-sizing 控制盒模型的组成模式 rgba 基于r,g,b三个颜色通道来设置颜色值，通过a来设置透明度 5. CSS3中transition和animation的属性
- transition(过渡动画)
用法： transition: property duration timing-function delay
属性 含义描述 transition-property 指定哪个 CSS属性 需要应用到transition效果 transition-duration 指定transition效果的 持续时间 transition-timing-function 指定transition效果的 速度曲线 transition-delay 指定transition效果的 延迟时间 2) animation(关键帧动画)
用法： animation: name duration timing-function delay iteration-count direction fill-mode play-state
属性 含义描述 animation-name 指定要 绑定到选择器的关键帧的名称 animation-duration 指定动画的 持续时间 animation-timing-function 指定动画的 速度曲线 animation-delay 指定动画的 延迟时间 animation-iteration-count 指定动画的 播放次数 animation-direction 指定是否应该 轮流反向播放动画 animation-fill-mode 规定当动画 不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 animation-play-state 指定动画 是否正在运行或已暂停 6. 清除浮动的方式以及各自的优缺点
额外标签法(在最后一个浮动元素的后面新加一个标签如
，并在其CSS样式中设置clear: both;) 优点：简单，通俗易懂，写少量代码，兼容性好给父级设置高度 优点：简单，写少量代码，容易掌握
触发父级BFC(如给父元素设置 overflow:hidden ，特别注意的是：在IE6中还需要触发hasLayout，例如给父元素设置 zoom:1 。原理是触发父级BFC后，父元素在计算高度时，浮动的子元素也会参与计算) 优点：简单，代码简洁
缺点：设置 overflow:hidden 容易造成不会自动换行导致超出的尺寸被隐藏掉，无法显示要溢出的元素
使用after伪元素，常见的写法如下： .clearfix::after { content: "."; display: block; height: 0; line-height: 0; clear: both; visibility:hidden; font-size: 0; }
.clearfix { // 注意此处是为了兼容IE6和IE7浏览器，即触发hasLayout zoom: 1; } 优点：符合闭合浮动思想，结构语义化正确
缺点：代码量多，因为IE6-7下不支持after伪元素，需要额外写 zoom:1 来触发hasLayout
- 居中布局的方式
水平居中 ：
若是行内元素，则直接给其父元素设置 text-align: center 即可 若是块级元素，则直接给该元素设置 margin: 0 auto 即可 若子元素包含浮动元素，则给父元素设置 width:fit-content 并且配合 margin .parent { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; } 使用flex布局的方式，可以轻松实现水平居中，即使子元素中存在浮动元素也同样适用 // flex 2012年版本写法 .parent { display: flex; flex-direction: row; justify-content: center; }
// flex 2009年版本写法 .parent { display: box; box-orient: horizontal; box-pack: center; } 使用绝对定位的方式，再配合CSS3新增的 transform 属性 .child { position: absolute; left: 50%; transform: translate(-50%, 0); } 使用绝对定位的方式，再配合负值的 margin-left ( 此方法需要固定宽度 ) .child { position: absolute; left: 50%; width: 200px; // 假定宽度为200px margin-left: -100px; // 负值的绝对值为宽度的一半 } 使用绝对定位的方式，再配合 left:0;right:0;margin:0 auto; ( 此方法需要固定宽度 ) .child { position: absolute; left: 0; right: 0; margin: 0 auto; width: 200px; // 假定宽度为200px } 垂直居中 ：
line-height display:inline-block;vertical-align:middle .parent::after, .child { display: inline-block; vertical-align: middle; }
.parent::after { content: ""; height: 100%; } 使用 vertical-align 属性并且配合使用 display:table 和 display:table-cell 来让内容块居中 .parent { display: table; }
.child { display: table-cell; vertical-align: middle; } 使用flex布局的方式，可以轻松实现垂直居中，即使子元素中存在浮动元素也同样适用 // flex 2012年版本写法 .parent { display: flex; align-items: center; }
// flex 2009年版本写法 .parent { display: box; box-orient: vertical; box-pack: center; } 使用绝对定位的方式，再配合CSS3新增的transform属性 .child { position: absolute; top: 50%; transform: translate(0, -50%); } 使用绝对定位的方式，再配合负值的 margin-top ( 此方法需要固定高度 ) .child { position: absolute; top: 50%; height: 200px; // 假定高度为200px margin-top: -100px; // 负值的绝对值为高度的一半 } 使用绝对定位的方式，再配合 top:0;bottom:0;margin:auto 0; ( 此方法需要固定高度 ) .child { position: absolute; top: 0; bottom: 0; margin: auto 0; height: 200px; // 假定高度为200px } 水平垂直居中 ：
使用flex布局的方式同样可以轻松实现水平垂直居中 // flex 2012年版本写法 .parent { display: flex; justify-content: center; align-items: center; }
// flex 2009年版本写法 .parent { display: box; box-pack: center; box-align: center; } 使用绝对定位的方式，再配合CSS3新增的 transform 属性 .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 使用绝对定位的方式，再配合使用负值的 margin-top 和负值的 margin-left ( 此方法需要同时固定宽度和高度 ) .child { position: absolute; left: 50%; top: 50%; margin-top: -50px; // 负值的绝对值为高度的一半 margin-left: -100px; // 负值的绝对值为宽度的一半 width: 200px; // 假定宽度为200px height: 100px; // 假定高度为100px } 8. CSS的优先级和权重
选择器(优先级从高到低) 示例 特殊性值 !important(重要性标识) div { color: #fff !important; } 无，但为了方便记忆，可将其表示为1,0,0,0,0 行内样式
1,0,0,0 id选择器 #id 0,1,0,0 类，伪类和属性选择器 .content, :first-child, [type="text"] 0,0,1,0 标签和伪元素选择器 h1, ::after 0,0,0,1 通配符、子选择器、相邻选择器 *, div > p, p + p 0,0,0,0 继承 span { color: inherit; } 无 浏览器默认值 浏览器开发者工具右侧的 Styles 面板中会显示 user agent stylesheet 字样 无 9. 移动端1px物理像素边框我们知道，在移动端存在 物理像素(physical pixel) 和 设备独立像素(density-independent pixel) 的概念。物理像素也称为设备像素，它是显示设备中一个最微小的物理部件，每个像素可以根据操作系统设置自己的颜色和亮度。设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如CSS像素)，然后由相关系统转换为物理像素。根据物理像素和设备独立像素也衍生出了 设备像素比(device pixel ratio) 的概念，简称为 dpr ，其定义了物理像素和设备独立像素的对应关系，其计算公式为 设备像素比 = 物理像素 / 设备独立像素 。因为视网膜(Retina)屏幕的出现，使得一个物理像素并不能和一个设备独立像素完全对等，如下图所示：
在上图中，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素却对应4个物理像素，即在Retina屏幕下会有不同的 dpr 值。为了追求在移动端网页中更好的显示质量，因此我们需要做各种各样的适配处理，最经典的莫过于1px物理像素边框问题，我们需要根据移动端不同的 dpr 值来对边框进行处理。在JavaScript中，可以通过 window.devicePixelRatio 来获取当前设备的 dpr ，在CSS中，可以通过 -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio 来进行媒体查询，从而针对不同的设备，来做一些样式适配。这里对于1px像素的边框问题，给出一种最常见的写法：
.border-1px { position: relative; }
.border-1px::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #000; -webkit-transform: scaleY(.5); transform: scaleY(.5); }
@media only screen and (-webkit-min-device-pixel-ratio: 2.0), (min-device-pixel-ratio: 2.0) { .border-1px::after { -webkit-transform: scaleY(.5); transform: scaleY(.5); } }
@media only screen and (-webkit-min-device-pixel-ratio: 3.0), (min-device-pixel-ratio: 3.0) { .border-1px::after { -webkit-transform: scaleY(.33); transform: scaleY(.33); } } 10. 实现三栏布局的方式有哪些
三栏布局，顾名思义就是分为左中右三个模块进行布局，并且左右两边固定，中间模块根据浏览器的窗口变化进行自适应，效果图如下：
这里给出四种实现三栏布局的方式：
使用绝对定位的方式 .container { position: relative; height: 200px; line-height: 200px; text-align: center; font-size: 20px; color: #fff; }
.left { position: absolute; left: 0; top: 0; width: 150px; background: red; }
.main { margin-left: 160px; margin-right: 110px; background: green; }
.right { position: absolute; right: 0; top: 0; width: 100px; background: blue; }
缺点：元素脱离了文档流，可能会造成元素的重叠。
使用flex布局的方式
.container {
display: flex;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 20px;
color: #fff;
}
.left { width: 150px; background: red; }
.main { margin: 0 10px; flex: 1; background: green; }
.right { width: 100px; background: blue; }
双飞翼布局 .content { float: left; width: 100%; }
.main, .left, .right { height: 200px; line-height: 200px; text-align: center; font-size: 20px; color: #fff; }
.main { margin-left: 160px; margin-right: 110px; background: green; }
.left { float: left; margin-left: -100%; width: 150px; background: red; }
.right { float: right; margin-left: -100px; width: 100px; background: blue; }
圣杯布局 .container { margin-left: 160px; margin-right: 110px; }
.left,
.main,
.right {
height: 200px;
line-height: 200px;
text-align: center;
font-size: 20px;
color: #fff;
}
.main {
float: left;
width: 100%;
background: green;
}
.left { position: relative; left: -160px; margin-left: -100%; float: left; width: 150px; background: red; }
.right { position: relative; right: -110px; margin-left: -100px; float: left; width: 100px; background: blue; }
- 实现等高布局的方式有哪些
等高布局，顾名思义就是在同一个父容器中，子元素高度相等的布局。从等高布局的实现方式来说，可以分为两种，分别是 伪等高 和 真等高 。 伪等高是指子元素的高度差依然存在，只是视觉上给人的感觉就是等高，真等高是指子元素的高度真实相等 。效果图如下：
这里给出五种实现等高布局的方式：
伪等高 ：
使用 padding-bottom 和负的 margin-bottom 来实现 .container { position: relative; overflow: hidden; }
.left, .main, .right { padding-bottom: 100%; margin-bottom: -100%; float: left; color: #fff; }
.left { width: 20%; background: red; }
.main { width: 60%; background: green; }
.right { width: 20%; background: blue; }
中间内容
中间内容
中间内容
使用flex布局的方式 .container { display: flex; }
.left, .main, .right { flex: 1; color: #fff; }
.left { background: red; }
.main { background: green; }
.right { background: blue; }
中间内容
中间内容
中间内容
.left, .main, .right { position: absolute; top: 0; bottom: 0; color: #fff; }
.left { left: 0; width: 20%; background: red; }
.main { left: 20%; right: 20%; background: green; }
.right { right: 0; width: 20%; background: blue; }
中间内容
中间内容
中间内容
.left, .main, .right { display: table-cell; color: #fff; }
.left { width: 20%; background: red; }
.main { width: 60%; background: green; }
.right { width: 20%; background: blue; }
中间内容
中间内容
中间内容
.left { background: red; }
.main { background: green; }
.right { background: blue; }
中间内容
中间内容
中间内容
工作中我们经常会遇到需要三角形图标的应用场景，例如内容展开收起、左右箭头点击切换轮播，点击某条列表数据查看详情等。三角形图标的应用范围之广，使得我们有必要了解一下它的实现原理。
- 首先我们来实现一个最基础的边框效果
.content { width: 50px; height: 50px; border: 2px solid; border-color:#ff9600 #3366ff #12ad2a #f0eb7a; } 效果如下：
- 然后我们尝试将border值放大10倍
.content { width: 50px; height: 50px; border: 20px solid; border-color: #ff9600 #3366ff #12ad2a #f0eb7a; } 效果如下：
上图中我们可以很清楚地看到，在绘制border的时候并不是矩形区域，而是梯形区域，那么此时如果我们将 width 和 height 值设置为0，看会发生什么：
.content { width: 0; height: 0; border: 20px solid; border-color: #ff9600 #3366ff #12ad2a #f0eb7a; } 效果如下：
此时会看到一个由四个三角形拼装而成的矩形区域，即由上下左右四个边框组合而成。因此不难想象，如果我们想得到某一个方向的三角形，我们只需要让其他方向的边框不可见就行了，例如我们想得到一个朝左的三角形：
.content { width: 0; height: 0; border: 20px solid; border-color: transparent #3366ff transparent transparent; } 效果如下:
这样就得到了一个很完美的三角形图标，是不是很简单？
- link与@import的区别
从属关系区别 @import是CSS提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS，Rel连接属性，设置浏览器资源提示符preload、prefetch等。
加载顺序区别 HTML文档在解析的过程当中，如果遇到 link 标签，则会立即发起获取CSS文件资源的请求；@import引入的CSS将在页面加载完毕后才会被加载。
兼容性区别 @import是CSS2.1才有的语法，因此需要IE5以上才能识别；link标签作为HTML元素，不存在兼容性问题。
DOM可控性区别 link标签可以通过JS来动态引入，而@import无法通过JS来插入样式
const loadStyle = (url) => { const link = document.createElement('link'); link.setAttribute('type', 'text/css'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('href', url);
document.head.appendChild(link);
} 14. 浏览器是怎样解析CSS选择器的
CSS选择器的解析是从右向左解析的。若从左向右地匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点)，而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在CSS解析完毕后，需要将解析的结果与DOM Tree的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立Render Tree时浏览器就要为每个DOM Tree中的元素根据CSS的解析结果(Style Rules)来确定生成怎样的Render Tree。
- CSS的性能优化方案
!important link preload 推荐阅读
记一次大厂的面试过程 装饰你的敲门砖，离大厂更近一步
还有更多前端面经可以去；www.jianshu.com/u/7e7ee1652… 查看。
