CSS面试总结
文章首次发表：_时雨_CSDN
1. BFC:块级格式化上下文（重点关注）
BFC基本概念:BFC是 CSS布局的一个概念，是一块独立的渲染区域(环境)，里面的元素不会影响到外部的元素。
BFC原理(渲染规则、布局规则):
(1)内部的 Box会在垂直方向，从顶部开始一个接着一个地放置;
(2)Box垂直方向的距离由 marain决定，属于同一个 BFC 的两个相邻 Box的margin 会发生重叠;
(3)每个元素的margin Box的左边，与包含块 border Box的左边相接触，(对于从左到右的格式化，否则相反)。即使存在浮动也是如此;
eg:左浮是子div的左边接触父div的borderbox的左边，右浮是子div接触父div的borderbox右边
(4)BFC在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。
BFC布局规则：
(5)BFC的区域不会与float Box重叠(即清浮动)
(6) 计算BFC的高度时，浮动元素也参与计算。
BFC触发条件(即脱离文档流)
- 根元素，即HTML元素(最大的一个 BFC)
- 浮动(float 的值不为none)
- 定位(position的值为absolute或fixed)
- 表格单元(display为
table、table-cell、table-caption、inline-block等 HTML表格相关的属性 ) - 弹性盒(display为
flex或inline-flex) - overflow不为visible
BFC作用（应用场景）
1、自适应两(三)栏布局(避免多列布局由于宽度计算四舍五入而自动换行)
2、避免元素被浮动元素覆盖
3、让父元素的高度包含子浮动元素，清除内部浮动(原理:触发父 div的BFC属性，使下面的子 div都处在父 div的同一个BFC区域之内)
4、使用不同的BFC防止margin重叠
2. CSS盒子模型
CSS的盒子模型：标准盒子模型、IE盒子模型(怪异盒模型)
区别：
标准盒子模型宽高 = content + border + padding + margin
IE盒子模型宽高 =margin+content（content包含 border + padding ）
即标准盒子模型增大padding 、 border 就会撑大盒子，但IE盒模型则不会撑大，而是通常减小content
默认为标准盒子模型
CSS盒子模型的转换：
box-sizing: content-box; /*标准盒子模型*/
box-sizing: border-box; /*IE盒子模型*/
<style>
.box2 {
margin-bottom: 10px;
width: 100px;
border: 20px solid black;
height: 100px;
background-color: red;
}
.box3 {
box-sizing: border-box;
margin-top: 10px;
width: 100px;
border: 20px solid black;
height: 100px;
background-color: blue;
}
</style>
<div class="box2"></div>
<div class="box3"></div>
3. 清除浮动
- 给父元素单独定义高度
优点简单，代码少 ； 缺点无法进行响应式布局 - 给浮动元素的容器加overflow：hidden
优点简单，兼容性较高 ； 缺点：超出部分被隐藏 - 在浮动元素后面加一个带clear：both属性的空标签
优点：简单代码少，兼容性较高 ； 缺点：增加无语义的空标签，不利于页面优化和后期维护 - ：after伪元素方法（最推荐）一定要有的属性
content display clear
优点：写法固定，兼容性高 ； 缺点：代码多
<style>
.box {
border: 1px solid black;
padding: 5px;
width: 450px;
/* overflow: hidden;
法二：父元素加overflow: hidden;
*/
}
/* 法三：伪元素（推荐） */
.box:after {
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.left {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.right {
width: 100px;
height: 100px;
background-color: red;
float: right;
}
/* .clean{
clear: both;
} */
</style>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<!-- 法一：加一个标签 -->
<!-- <div class="clean"></div> -->
</div>
</body>
4. 隐藏元素的方法及各自的特点
- rgba(0,0,0,0) /*占据空间，可以响应点击事件 */
- opacity:0 /* 占据空间，可以响应点击事件 ，子元素会继承吗，在读屏软件中无法隐藏*/
- overflow：hidden /*用来隐藏元素溢出部分，占据空间，无法响应点击事件*/
- visibility:hidden /* 占据空间，无法点击 ：与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏*/
- transform: scale(0,0) /* 占据空间，无法点击 */
- display：none /*不占据空间，无法点击*/
- z-index:-1000 /* 不占据空间，无法点击 */
- position：absolute;
left:-99999px;
top:-90999px; /* 不占据空间，无法点击 */
5. line-height和heigh区别
line-height：每一行文字的高，如果文字换行则整个盒子高度会增大（高度=行数*行高）。
height：定值，即这个盒子的高度。
6. 用CSS画三角形
按要求画某一朝向的三角形，其他三个边框设为透明
<style>
div{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom:50px solid red;
}
.all{
margin-top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-color: blue green purple black;
}
</style>
<div></div>
<div class="all"></div>
7.圣杯布局（三栏布局方式两边固定中间自适应，与双飞翼布局解决的问题一致）
eg: 两边100px，中间自适应
<body>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>
- 使用flex布局：左右固定宽 中间 flex：1
/* 法一：flex布局 */
body{
display: flex;
}
.left{
width: 100px;
height: 500px;
background-color: aquamarine;
}
.middle{
flex:1;
/* 占据剩余空间 */
background-color: lightsalmon
}
.right{
width: 100px;
height: 500px;
background-color: red;
}
- 绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右 margin 值撑开距离
<style>
body {
position: relative;
margin: 0;
}
.left {
position: absolute;
width: 100px;
height: 500px;
background-color: aquamarine;
left: 0;
top: 0;
}
.right {
width: 100px;
height: 500px;
position: absolute;
background-color: red;
right: 0;
top: 0;
}
.middle {
height: 500px;
margin-left: 100px;
margin-right: 100px;
background-color: lightsalmon;
}
</style>
- 自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后
.left {
float: left;
width: 100px;
height: 500px;
background-color: aquamarine;
}
.right {
width: 100px;
height: 500px;
float: right;
background-color: red;
}
.middle {
height: 500px;
background-color: lightsalmon;
}
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle">25484868</div>
</body>
- margin 负值法：左右两栏均左浮动，左右两栏采用负的 margin 值。中间栏被宽度为 100%的浮动元素包起来
8. 画一根0.5px的线
- 采用meta viewport的方式（viewport只针对移动端，只在移动端上才能看到效果）
<meta name="viewport" content="width=device-width, initial-scale=0.5"/>
-采用transform: scale()的方式
<style>
div{
margin: 50px;
width: 150px;
height: 1px;
background-color: aqua;
transform: scaleY(0.5);
}
</style>
<body>
<div></div>
</body>
9.水平 垂直居中问题
固定宽高
水平居中
- 法一 ： margin: auto;
div {
width: 500px;
height: 200px;
background-color: blue;
/* 法一 ： margin: auto;*/
margin: auto;
}
</style>
<div></div>
- 父元素text-align: center;子元素display: inline-block;
<style>
body{
text-align: center;
}
div{
width: 500px;
height: 200px;
background-color: blue;
display: inline-block;
}
</style>
<div></div>
- Flex布局
body{
display: flex;
justify-content: center;
}
div{
width: 500px;
height: 200px;
background-color: blue;
}
</style>
<div></div>
垂直居中
- 已知父元素高度，子元素相对定位并 transform:translateY(-50%);
- 弹性盒布局，父元素 display：flex，子元素 align-self：center
- 使用 line-height改变行高，设置子元素和父元素行高一样使内联元素居中，需要已知父元素的高度
水平垂直居中
- 绝对定位+margin
div{
width: 500px;
height: 200px;
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
}
</style>
<div></div>
- 绝对定位，设置四个方向值为0后margin设为auto
div{
width: 500px;
height: 200px;
background-color: blue;
position: absolute;
top:0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
<div></div>
不固定宽高
水平垂直居中
- 子元素相对父元素绝对定位后子元素top,left值为50%，再
transform: translate(-50%,-50%); - 父元素设置弹性盒子
display: flex;
justify-content: center;
align-items: center;
- table-cell
.parent {
width: 200px;
height: 150px;
background-color: blue;
display: table-cell;
/* 不是行内元素无效 */
text-align: center;
vertical-align: middle;
}
.son {
/* 转换为行内块元素防止css失效 */
display: inline-block;
}
10. 骰子布局
11. overflow 的原理
当元素设置了 overflow 样式且不为visible 时，该元素就构建了一个BFC。BFC 在计算高度时内部浮动元素的高度也会计算在内，故BFC 的高度不会发生坍塌，所以达到了清除浮动的目的。
12. display: none与visibility: hidden的区别
占用位置的区别
display: none不占用位置
visibility: hidden占用位置重绘和回流的问题
visibility: hidden;、 display: none; 均产生重绘
display: none 还会产生一次回流
PS: 产生回流一定会造成重绘，但是重绘不一定会造成回流。
13. 重绘与回流
回流（重构/重排/reflow）：
定义
当渲染树中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。（重排开销大）
触发条件
1.一个DOM 元素的几何属性发生变化，常见的几何属性有width、height、padding、margin、left top、 border 等
2.可见的DOM 节点添加、删除、更新
3.读写 offset 族、 scroll 族和 client 族属性时（需要通过即时计算得到）
4.字体大小改变
5.display：none
重绘
定义：
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，由于没有导致 DOM 几何属性的变化，因此元素的位置信息不需要更新，从而省去布局的过程，跳过了生成布局树和建图层树的阶段。
触发：
颜色的修改、阴影的修改等外观样式的改变
减少重绘与回流
- 最小化重绘和重排，如样式集中改变，使用
添加新样式类名.class而不是用大量的style修改 - 批量操作 DOM，比如读取某元素
offsetWidth属性存到一个临时变量再去使用，而不是频繁使用这个计算属性;或利用document.createDocumentFragment()来添加要被添加的节点，处理完之后再插入到实际 DOM 中 - 使用 absolute 或 fixed 使
元素脱离文档流，再对其进行复杂动画效果的绘制 - 尽量避免使用table布局
- 开启 GPU 加速，利用 css 属性
transform、will-change等，如改变元素位置时使用translate 比使用绝对定位改变高效，因为它不会触发重排或重绘
14. 单双冒号区别
单冒号:用于表示伪类，操作文档已有的元素，伪类一般匹配的是元素的一些特殊状态，如 hover、link等
双冒号:用于表示伪元素，会创建文档树之外的元素，伪元素一般匹配的是特殊位置，如after、before等，侧重于表达或定义不在语法定义范围内的抽象元素
15. 元素空隙原因及解决方法
原因代码中添加了空白符(空格、tab(制表符)、回车换行等)等字符引起的:
元素被当成行内元素排版的时候，元素之间的空白符(空格、tab(制表符)、回车换行等)都会被浏览器处理，根据white-space的处理方式(默认是normal，合并多余空白)，原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。
解决方案：
- 在HTML中的标签之间不留空格，但代码可读性会变差
- 父元素 font-size:0，子元素再单独设置字体样式
- margin 负值
- 设置父元素的letter-spacing属性
- word-spacing 词间距
- float: left
16. Css3新特性
- Box-shadow
- Box-radius
- css3选择器 last-child、nth-child
- 渐变
- 弹性盒flex
- 过渡、动画、2D/3D转换
17.Scoped原理
原理：
1.给HTML的DOM节点加一个不重复data属性(形如:data-v-2333a)来表示他的唯一性。
2.在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(如[data-v-
2333a])来私有化样式。
优点: 实现组件的私有化，不对全局造成样式污染
缺点：父组件无法设置子组件样式
解决：使用两个style，一个用于私有样式，一个用于公共样式。
18.CSS 动画比JavaScript 动画高效的原因
通常渲染引擎生成一帧图像有三种方式：重排、重绘和合成。其中重排和重绘操作都是在渲染进程的主线程上执行的，比较耗时；而合成操作是在渲染进程的合成线程上执行的，执行速度快，且不占用主线程。
js的动画执行在主线程容易引发阻塞和等待；css的动画执行在合成线程，速度快且不阻塞主线程。
参考资料
CSS面试总结的更多相关文章
- 总结CSS面试题目的考察点及常见布局问题整理
整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考. 写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试 ...
- HTML&CSS面试高频考点(二)
HTML&CSS面试高频考点(一) ♥ 6. W3C盒模型与怪异盒模型 标准盒模型(W3C标准) 怪异盒模型(IE标准) 怪异盒模型下盒子的大小=width(content + bord ...
- html与css面试结合工作的总结难点
面试的时候一般会常常问起的,同时也是工作的时候会常常问道的几个问题,一下之列表内容,详细的后会附有文章,希望能帮到大家,同时有不足希望大家多多补充交流. 1.主要是的是浮动的问题(常见的问题有,三列布 ...
- CSS面试细节整理（一）
最近面试时候发现自己最熟悉的css确实开发中好多细节没注意到,为了防止在栽跟头,打算从头到底捋一遍咯 语法部分: 1.css几种选择器的写法 (1)h1 em {color:red;} (后代选择器) ...
- css 面试学习
最经在学习前端的一些东西 转载于http://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html 雅虎的css前端的35条定律
- 微软CSS面试全记录
先是会有一轮简单的电话技术面试,聊的比较随意,什么都会问,跟职位相关的都有.然后会发一些材料说是要学习,是windows内存管理相关的东西. 完了就是一轮oral test,和技术没有任何关系,问问为 ...
- CSS面试细节整理（二）
5.css盒模型: CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式
- CSS面试复习（三）：预处理器、工程化方案、三大框架中的CSS
一.预处理器 1.介绍 基于CSS的另一种语言.通过工具编译成CSS.添加了很多CSS不具备的特性.能提升CSS文件的组织 2.less嵌套 3 .sass嵌套 4. less变量 5.sass变量 ...
- CSS面试复习（二）：CSS的使用
一.CSS基础 1.选择器 选择器{ 属性:值: 属性:值 } 作用:用于匹配HTML元素.分类和权重.解析方式和性能.值得关注的选择器 分类: 元素选择器a{} 伪元素选择器::before{} 类 ...
- CSS面试复习（一）：HTML强化
1. HTML常见元素和理解 head类 meta:字符集.base:路径. a[href,target] img[src,alt] table td[colspan,rowspan] form[ta ...
随机推荐
- 墙裂推荐！一款 VM 大规模集群管理工具
关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ Google 发布了基础设施管理工具 VM Manager,可自动维护大型Compute En ...
- mmsegmentation中构造自己的数据集和数据加载部分，跑现有demo
在mmsegmentation中训练自己的数据集 先在mmse/dataset下创建一个python文件,我的名字是my_thermal_dataset.py 在其中填写下面内容 这里要注意,在设置s ...
- Spring注解开发_Spring容器创建概述
浅尝Spring注解开发_Spring容器创建概述 浅尝Spring注解开发,基于Spring 4.3.12 概述Spring容器创建的过程,包括12个方法的执行 浅尝Spring注解开发_自定义注册 ...
- 机构：DARPA
DARPA,美国国防部高级研究计划局. 2021年3月19日,英特尔(Intel)宣布与美国国防部高级研究计划局(DARPA)达成的一项新合作,旨在推动在美制造的专用集成电路(ASIC)芯片的开发. ...
- monit 命令详解（monit）
monit是Monit软件的主操作控制命令. 语法 monit [options]+ [command] 选项(options) -c file 指定要使用的配置文件 -d n 每间隔多少秒运行一次M ...
- 基于.NetCore开发博客项目 StarBlog - (8) 分类层级结构展示
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- Unity实现”对象池管理器“
前言:警告!这可能是坨屎,空闲时间写成,仅作娱乐 在Unity中生成或销毁一个物体会占用较大的资源,如果是制作FPS射击游戏,子弹生成更是雪上加霜.所以我自己写了一个PoolManager,不能和网上 ...
- 白嫖Azure与体验GoLand远程开发
前言 近期因为有本地开发远程使用Linux编译部署的需求,而虚拟机的性能实在是不敢恭维,WSL的坑之前也踩过(没有systemd等),故考虑使用SSH连接云服务器开发. 目前VSCode提出了Remo ...
- SpringBoot Restful 接口实现
目录 SpringBoot 核心注解 SpringBoot Restful 接口实现 封装响应数据 SpringBoot 核心注解 SpringBoot 基础入门 注解 说明 Component 声明 ...
- 『忘了再学』Shell基础 — 28、AWK中条件表达式说明
目录 1.AWK的条件表达 2.条件表达式说明 (1)BEGIN (2)END (3)关系运算符 (4)说明AWK中条件表达式的执行过程 (5)AWK中使用正则表达式 (6)A~B练习 1.AWK的条 ...