CSS面试相关问题
- 前言
- css盒子模型
- 垂直、水平居中
- BFC和清除浮动
- CSS 选择符有哪些？
- 行内元素、块级元素区别
- CSS 三大特性
- CSS优先级计算
- CSS有哪些继承属性
- link 与 @import 的区别
- 常见的元素隐藏方式？
- 去除inline-block元素间间距和图片下间隙的方法
- 为什么要初始化CSS样式
- 解释浏览器如何确定哪些元素与 CSS 选择器匹配。编写高效的 CSS 应该注意什么？
- 使用 CSS 预处理的优缺点分别是什么？
- 如何解决不同浏览器的样式兼容性问题？
- em\px\rem区别？
- 什么是响应式设计？响应式设计的基本原理是什么？与自适应区别？
- 对媒体查询的理解？
- css布局系列
- css hack是什么
- 过渡与动画的区别是什么
- 关于CSS的动画与过渡问题
- 已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形
- iframe的作用
- inline和inline-block有什么区别？
- 你有没有使用过视网膜分辨率的图形？当中使用什么技术？
- 利用画三角(普通+伪元素)
- 实现一个宽高自适应的正方形
- 文本超出部分显示省略号
- 对css sprites的理解
- 为什么有时候人们用translate来改变位置而不是定位？
- 伪类和伪元素的区别是什么？
- CSS 多列等高如何实现？
- 对flex的理解？
- 占位符
- 参考
前言
问题太多了，挑一些出来整理一下。
备注
回流（reflow）或重绘（repaint）可以看一下。
css盒子模型
盒模型的概念
网页中，每一个元素都占有一定的空间，无论是div、h1~h6、还是p，都可以看成是盒子。
盒模型组成
content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。
有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding
（2）IE盒模型：属性width，height包含content、border和padding，指的是content+padding+border。
box-sizing的使用
如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默认属性是content-box
总结
盒模型都是由四个部分组成的，分别是margin、border、padding和content。
W3C标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的
范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。
一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。
参考：
https://blog.csdn.net/zwkkkk1/article/details/79678177
垂直、水平居中
BFC和清除浮动
CSS 选择符有哪些？
（1）id选择器（#myid）
（2）类选择器（.myclassname）
（3）标签选择器（div,h1,p）
（4）后代选择器（h1p）
（5）相邻后代选择器（子）选择器（ul>li）
（6）兄弟选择器（li~a）
（7）相邻兄弟选择器（li+a）
（8）属性选择器（a[rel=“external”]）
（9）伪类选择器（a:hover,li:nth-child）
（10）伪元素选择器（::before、::after）
（11）通配符选择器（*）
行内元素、块级元素区别
块级元素的特点：div,ul,li,p,h1
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素的特点： <a> 、 <span>
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
CSS 三大特性
CSS 三大特性分别为：层叠（覆盖-即就近原则，后加载覆盖前的）、继承（字号、颜色）、优先级
CSS优先级计算
!important > (行内) > id > class > tag > (*)
| 类型 | (A,B,C,D) |
|---|---|
| 继承或者* 的权重 | 0,0,0,0 |
| 每个元素（标签）权重 | 0,0,0,1 |
| 每个类，伪类权重 | 0,0,1,0 |
| 每个ID权重 | 0,1,0,0 |
| 每个行内样式权重 | 1,0,0,0 |
| 每个!important权重 | ∞ 无穷大 |
CSS有哪些继承属性
可继承属性：
font系列、text系列、line-height、color、visibility、cursor
- font
- word-break
- letter-spacing
- text-align
- text-rendering
- word-spacing
- white-space
- text-indent
- text-transform
- text-shadow
- line-height
- color
- visibility
- cursor
不可继承：
border padding margin width height。。。
link 与 @import 的区别
link 是 HTML 方式， @import 是 CSS 方式
link 支持并行下载，@import 等待页面加载完成之后再进行加载
浏览器对 link 支持早于@import ，可以使用 @import 对老浏览器隐藏样式
（减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。）
总体来说：link 优于@import
常见的元素隐藏方式？
opacity:0：本质上是将元素的透明度将为0，就看起来隐藏了，但能够响应元素绑定的监听事件。visibility:hidden: 与上一个方法类似的效果，占据空间，但是不可以交互了display:none: 这个是彻底隐藏了元素，元素从文档流中消失（渲染树不会包含该渲染对象），既不占据空间也不交互，也不影响布局overflow:hidden:这个只隐藏元素溢出的部分，但是占据空间且不可交互z-index:-9999: 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了transform: scale(0,0):平面变换，将元素缩放为0，但是依然占据空间，但不可交互
还有一些靠绝对定位把元素移到可视区域外，或者用clip-path进行裁剪的操作过于Hack，就不提了。
详细资料可以参考： 《CSS 隐藏元素的八种方法》
去除inline-block元素间间距和图片下间隙的方法
行内块元素，会有如下情况
解决方法
1.容器设置font-size: 0;
2.设置display: block;
3.设置vertical-align: middle;
更详细的介绍请看:去除inline-block元素间间距的N种方法
<body>
<style>
.main {
background-color: #ccc;
/* font-size: 0; */
}
img {
/* display: block; */
vertical-align: middle;
}
</style>
<div class="main">
<img src="../src/assets/1.png" width="400" height="400" alt="">
<img src="../src/assets/1.png" width="400" height="400" alt="">
</div>
</body>
为什么要初始化CSS样式
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
- 去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。
解释浏览器如何确定哪些元素与 CSS 选择器匹配。编写高效的 CSS 应该注意什么？
这部分与上面关于编写高效的 CSS 有关。浏览器1.从最右边的选择器（关键选择器）根据关键选择器，2.浏览器从 DOM 中筛选出元素，然后3.向上遍历被选元素的父元素，4.判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。
例如，对于形如p span的选择器，浏览器首先找到所有<span>元素，并遍历它的父元素直到根元素以找到<p>元素。对于特定的<span>，只要找到一个<p>，就知道’`已经匹配并停止继续匹配。
搞清楚哪些 CSS 属性会触发重新布局（reflow）、重绘（repaint）和合成（compositing）。在写样式时，避免触发重新布局的可能。
参考
https://developers.google.com/web/fundamentals/performance/rendering/
https://csstriggers.com/
参考
使用 CSS 预处理的优缺点分别是什么？
优点：
- 提高 CSS 可维护性。
- 易于编写嵌套选择器。
- 引入变量，增添主题功能。可以在不同的项目中共享主题文件。
- 通过混合（Mixins）生成重复的 CSS。
- Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.
- 将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。
缺点：
- 需要预处理工具。
- 重新编译的时间可能会很慢
如何解决不同浏览器的样式兼容性问题？
- 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
- 使用已经处理好此类问题的库，比如 Bootstrap。
- 使用 autoprefixer 自动生成 CSS 属性前缀。
- 使用 Reset CSS 或 Normalize.css。
em\px\rem区别？
- px：绝对单位，页面按精确像素展示。
- em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
- rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持
什么是响应式设计？响应式设计的基本原理是什么？与自适应区别？
响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏
幕尺寸做处理。页面头部必须有meta声明的viewport。
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。
响应式设计与自适应设计的区别：
响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；
自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。
对媒体查询的理解？
一说到响应式设计，肯定离不开媒体查询media。
是什么
媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度、设备像素比和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身,非常适合web网页应对不同型号的设备而做出对应的响应适配。
如何使用？
媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.那么媒体查询内的样式将会生效。
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
主要属性
width | min-width | max-width
height | min-height | max-height
device-width | min-device-width | max-device-width
device-height | min-device-height | max-device-height
aspect-ratio | min-aspect-ratio | max-aspect-ratio
device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
color | min-color | max-color
color-index | min-color-index | max-color-index
monochrome | min-monochrome | max-monochrome
resolution | min-resolution | max-resolution
scan | grid
逻辑操作符
操作符not、and、or、only和逗号(,)可以用来构建复杂的媒体查询
css布局系列
CSS布局系列
Holy Grail 圣杯布局详解
前端响应式布局原理与方案（详细版）
css hack是什么
如伪元素清除浮动中 要对ie设置 {*zoom: 1}，主要用在IE浏览器。
由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。
具体请看：
http://www.cnblogs.com/Renyi-Fan/p/9006084.html
过渡与动画的区别是什么
- transition
可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟以一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果而动画属性 - animation
可以制作类似Flash动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。
关于CSS的动画与过渡问题
transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)
@keyframes test{
0%{background-color: lightblue;}
30%{background-color: lightgreen;}
60%{background-color: lightgray;}
100%{background-color: black;}
}
animation-name: 动画名称(默认值为none)
animation-duration: 持续时间(默认值为0)
animation-timing-function: 时间函数(默认值为ease)
animation-delay: 延迟时间(默认值为0)
animation-iteration-count: 循环次数(默认值为1)
animation-direction: 动画方向(默认值为normal)
animation-play-state: 播放状态(默认值为running)
animation-fill-mode: 填充模式(默认值为none)
已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形
需要用到css的object-fit属性
div {
width: 200px;
height: 200px;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
iframe的作用
frame是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。
优点
- 一般用来展示内容，如教程右边的手机
- 便于修改，模拟分离，像一些信息管理系统会用到。
- iframe能够原封不动的把嵌入的网页展现出来。
- 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决
- 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
- 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
- 但现在基本不推荐使用。除非特殊需要，一般不推荐使用。
缺点
6. iframe的创建比一般的DOM元素慢了1-2个数量级
7. iframe标签会阻塞页面的的加载，如果页面的onload事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好，在Safari和Chrome中可以通过js动态设置iframe的src属性来避免阻塞。
8. iframe对于SEO不友好，替换方案一般就是动态语言的Incude机制和ajax动态填充内容等。
inline和inline-block有什么区别？
我把block也加入其中，为了获得更好的比较。
(由于基线对齐，行内快元素会有下间隙）
| – | block | inline-block | inline |
|---|---|---|---|
| 大小 | 填充其父容器的宽度。 | 取决于内容。 | 取决于内容。 |
| 定位 | 从新的一行开始，并且不允许旁边有 HTML 元素（除非是float） | 与其他内容一起流动，并允许旁边有其他元素。 | 与其他内容一起流动，并允许旁边有其他元素。 |
| 能否设置width和height | 能 | 能 | 不能。 设置会被忽略。 |
| 可以使用vertical-align对齐 | 不可以 | 可以 | 可以 |
| 边距（margin）和填充（padding | 各个方向都存在 | 各个方向都存在 | margin只有水平方向存在。垂直方向会被忽略。 尽管border和padding在content周围，但垂直方向上的空间取决于’line-height’ |
| 浮动（float） | - | - | 就像一个block元素，可以设置垂直边距和填充。 |
你有没有使用过视网膜分辨率的图形？当中使用什么技术？
使用二倍图、svg
我倾向于使用更高分辨率的图形（显示尺寸的两倍）来处理视网膜显示。更好的方法是使用媒体查询，像@media only screen and (min-device-pixel-ratio: 2) { ... }，然后改变background-image。
对于图标类的图形，我会尽可能使用 svg 和图标字体，因为它们在任何分辨率下，都能被渲染得十分清晰。
还有一种方法是，在检查了window.devicePixelRatio的值后，利用 JavaScript 将<img>的src属性修改，用更高分辨率的版本进行替换。
https://www.sitepoint.com/css-techniques-for-retina-displays/
利用画三角(普通+伪元素)
<body>
<style>
.block {
width: 0;
height: 0;
border: 30px solid transparent;
border-left-color: green;
}
</style>
<div class="block"></div>
</body>
<body>
<style>
.corner {
position: relative;
}
.corner::after {
content: '';
position: absolute;
left: 0;
top: 0;
border: 10px solid transparent;
border-right-color: #cccccc;
}
</style>
<div class="corner"></div>
</body>
实现一个宽高自适应的正方形
/*1.第一种方式是利用vw来实现*/
.square {
width: 10%;
height: 10vw;
background: tomato;
}
/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
.square {
width: 20%;
height: 0;
padding-top: 20%;
background: orange;
}
/*3.第三种方式是利用子元素的margin-top的值来实现的*/
.square {
width: 30%;
overflow: hidden;
background: yellow;
}
.square::after {
content: "";
display: block;
margin-top: 100%;
}
一个自适应矩形，水平垂直居中，且宽高比为 2:1
/*实现原理参考自适应正方形和水平居中方式*/
.box {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
width: 10%;
height: 0;
padding-top: 20%;
background: tomato;
}
文本超出部分显示省略号
单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;
white-space
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
normal : 默认处理方式
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。可以处理中文
text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
<body>
<style>
.corner {
background-color: #cccccc;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<div class="corner">
<a>文本超出部分显示省略号</a>
</div>
</body>
对css sprites的理解
是什么 ？
雪碧图也叫CSS精灵， 是一CSS图像合成技术，开发人员往往将小图标合并在一起之后的图片称作雪碧图。
如何操作？
使用工具（PS之类的）将多张图片打包成一张雪碧图，并为其生成合适的 CSS。 每张图片都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。 使用图片时，将相应的类添加到你的元素中。
好处：
- 减少加载多张图片的 HTTP 请求数（一张雪碧图只需要一个请求）
- 提前加载资源
不足： - CSS Sprite维护成本较高，如果页面背景有少许改动，一般就要改这张合并的图片
- 加载速度优势在http2开启后荡然无存，HTTP2多路复用，多张图片也可以重复利用一个连接通道搞定
为什么有时候人们用translate来改变位置而不是定位？
translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。 因此translate()更高效，可以缩短平滑动画的绘制时间。
而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况。
伪类和伪元素的区别是什么？
是什么？
伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
区别
其实上文已经表达清楚两者区别了，伪类是通过在元素选择器上加入伪类改变元素状态，而伪元素通过对元素的操作进行对元素的改变。
我们通过p::before对这段文本添加了额外的元素，通过 p:first-child改变了文本的样式。
拓展阅读：伪类与伪元素
CSS 多列等高如何实现？
（1）利用padding-bottom|margin-bottom正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow: hidden），这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。(这个在我文章圣杯布局有参考,原文这里）
（2）利用table-cell所有单元格高度都相等的特性，来实现多列等高。
（3）利用flex布局中项目align-items属性默认为stretch，如果项目未设置高度或设为auto，将占满整个容器的高度
的特性，来实现多列等高。
对flex的理解？
web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局
微信小程序用flex布局
具体用法移步阮一峰的flex语法、flex实战，讲得非常通俗易懂，而且我们一两句话说不清楚。
占位符
参考
https://github.com/woai3c/Front-end-basic-knowledge/blob/master/CSS.md2
https://github.com/Advanced-Interview-Question/front-end-interview/blob/dev/docs/guide/cssBasic.md1
https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md3
https://github.com/poetries/FE-Interview-Questions/blob/master/CSS.md
