前端面试-CSS

一、CSS基础

CSS选择器及其优先级

对于选择器的优先级：
标签选择器、伪元素选择器：1
类选择器、伪类选择器、属性选择器：10
id 选择器：100
内联样式：1000

注意事项：
!important声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

CSS中可继承与不可继承属性有哪些

一、无继承性的属性
display：规定元素应该生成的框的类型
文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
盒子模型的属性：width、height、margin、border、padding
背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性
字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
元素可见性
visibility：控制元素显示隐藏
列表布局属性
list-style：列表风格，包括list-style-type、list-style-image等
光标属性
cursor：光标显示为何种形态

display的属性值及其作用

属性值 作用
none 元素不显示，并且会从文档流中移除。
block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承display属性的值。

display的block、inline和inline-block的区别

（1）block：会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；
（2）inline：元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
（3）inline-block：将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

隐藏元素的方法有哪些

display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件

link和@import的区别

两者都是外部引用CSS的方式，它们的区别如下：
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持

transition和animation的区别

transition是过渡属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。
animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。

display:none与visibility:hidden以及 opacity:0的区别

display: none
DOM 结构：隐藏后不占位置
事件监听：无法触发它绑定的事件；
性能：动态改变此属性时会引起重排，性能较差；
继承：不会被子元素继承，父元素都不存在了；
transition：无效。
visibility: hidden：
DOM 结构：隐藏后仍然占据空间；
事件监听：不会触发它绑定的事件；
性 能：动态改变此属性时会引起重绘，性能较高；
继 承：会被子元素继承，子元素可以通过设置 visibility: visible来显示子元素；
transition：visibility 从hidden到visible会立即显示，没有延时；反过来会延时；
opacity: 0
DOM 结构：透明度为 100%，元素隐藏，占据空间；
事件监听：可以进行 DOM 事件监听；
性 能：提升为合成层，不会触发重绘，性能较高；
继 承：会被子元素继承,且子元素并不能通过 opacity: 1 来取消隐藏；
transition：opacity 可以延时显示和隐藏

伪元素和伪类的区别和作用？

1. 伪类表示被选择元素的某种状态，例如:hover
2. 伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如::before和::after
   核心区别在于，是否创造了“新的元素”

每个选择器只能出现一个伪元素；可以出现多个伪类；
状态类伪类：
触发顺序为link–>visited—>hover—>active即记为love and hate ，然后单独记住focus在hover和active之间即可
:link，将特殊的样式添加到未被访问过的链接。
:visited，将特殊的样式添加到被访问的链接。
:hover，当鼠标悬浮在元素上方是，向元素添加样式。
:focus，将样式添加到被选中的元素
:active，将样式添加到被激活的元素
结构类伪类：
:first-child
:nth-child(n) 匹配属于其父元素的第 N 个子元素,不论元素的类型，n 可以是数字、关键词或公式。
:nth-of-type(n)匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。例如 p:nth-of-type(3n+0) 指定了下标是 3 的倍数的所有 p 元素的背景色

对requestAnimationframe的理解 HTML5请求动画API

对盒模型的理解

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：
标准盒模型的width和height属性的范围只包含了content，
IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型：
box-sizing: content-box表示标准盒模型（默认值）
box-sizing: border-box表示IE盒模型（怪异盒模型）

为什么有时候⽤translate来改变位置⽽不是定位？

translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效，可以缩短平滑动画的绘制时间。 ⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

li 与 li 之间有看不见的空白间隔是什么引起的？如何解决？

浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个<li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

解决办法：
（1）为<li>设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
（2）将所有<li>写在同一行。不足：代码不美观。
（3）将<ul>内的字符尺寸直接设为0，即font-size:0。不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。
（4）消除<ul>的字符间隔letter-spacing:-8px，不足：这也设置了<li>内的字符间隔，因此需要将<li>内的字符间隔设为默认letter-spacing:normal。

CSS3中有哪些新特性

1.新增选择器：属性选择器、结构伪类选择器、伪元素选择器
2.阴影和反射：
块级元素阴影box-shadow: offset-x offset-y blur-radius spread-radius color inset;
文字阴影text-shadow: offset-x offset-y blur-radius color;
反射：-webkit-box-reflect
3.文字渲染：text-decoration
4.圆角：border-radius
5.渐变：
线性渐变background-image: linear-gradient(direction, color-stop1, color-stop2, …);
径向渐变background-image: radial-gradient(shape size at position, color-stop1, color-stop2, …);
6.旋转、缩放、倾斜skew、动画、过渡属性

对 CSSSprites 的理解

CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。
优点：
利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这是CSS Sprites最大的优点；
CSS Sprites能减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
缺点：
在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
开发的时候有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片;
不能随意的改变大小和颜色；

margin 和 padding 的使用场景

需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin；
需要在border内测添加空白，且空白处需要背景（色）时，使用 padding

对line-height 的理解及其赋值方式

（1）line-height的概念：
line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；
一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；
line-height 和 height 都能撑开一个高度；
（2）line-height 的赋值方式：
带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
百分比：将计算后的值传递给后代

::before 和 :after 的双冒号和单冒号有什么区别？

（1）冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
（2）::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

注意： :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after

display:inline-block 什么时候会显示间隙？

1.有空格时会有间隙，可以删除空格解决；
2.margin正值时，可以让margin使用负值解决；
3.使用font-size时，可通过设置font-size:0、重新设定其他元素
4.letter-spacing、word-spacing解决；
.space {
letter-spacing: -3px;
}
.space a {
letter-spacing: 0;
}

单行、多行文本溢出隐藏

单行
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
多行
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数

对媒体查询的理解？

简单来说，使用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

.div1 {
   
    background-color: orange;
}
@media only screen and (min-width: 1000px) and (max-width: 1200px){
   
    .div1 {
   
        background-color: red;
    }
}
@media only screen and (min-width: 800px) and (max-width: 1000px){
   
    .div1 {
   
        background-color: green;
    }
}
@media only screen and (max-width: 800px){
   
    .div1 {
   
        background-color: blue;
    }
}

z-index属性在什么情况下会失效

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。

z-index属性在下列情况下会失效：
1.元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
2.父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
3.元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

CSS3中的transform转换有哪些属性？

2D转换 transform
对元素进行移动、缩放、旋转、拉长或拉伸

.box img {
   
            /* transform: translate(100px,50px); */
            transform: translate(-100px);水平
            transform: scaleX(0.5);
            /* 先旋转后位移 */
            transform: rotate(30deg) translate(150px);
            /* 先位移后旋转 */
            transform: translate(150px) rotate(30deg);
            注： 元素旋转后，坐标轴也跟着发生转变，transform书写顺序不同导致转换效果不同。
            /* 倾斜 水平和垂直方向的倾斜角度 第二个值不写默认为0 */
            transform: skew(30deg);
            /* 设置基准点水平和垂直方向 */
            /* 水平：left、center、right、px、百分比 */
            /* 垂直：top、center、bottom、px、百分比 */
            transform-origin: left top;
}

3D转换
（1）透视 perspective
设置在z轴的视线焦点的观察位置，将一个2D平面在转换过程中呈现3D效果，属性值大观察点距离z轴原点越远
特点：近大远小
注： 透视属性需要设置给3D变化元素的父级
（2）transform-style
用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴。
注： 一般设置给3D变换图形的父级元素。transform-style: preserve-3d;

transition过渡有哪些属性？

当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指)，那么A和B之间就可以实现平滑的过渡的动画效果
transition简写，一个属性中设置4个属性

transition： all .5s ease;

transition-property规定应用过渡的CSS属性的名称，none表示没有属性过渡；all表示所有变化的属性都过渡；属性名：使用具体的属性名，多个属性名中间逗号分隔
transition-duration定义过渡效果花费的时间。默认是0。s秒为单位，0s必须加单位
transition-timing-function规定过渡效果的时间曲线，默认是"ease"，慢快慢
transition-delay规定过渡效果何时开始，默认是0。s秒为单位，0s必须加单位

animation动画有哪些属性？

（1）@keyframes规则
用于创建动画，创建由从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。使用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%，0%是动画的开始，100%是动画的完成。
animation-name规定@keyframes动画的名称
animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0
animation-timing-function规定动画的速度曲线，默认是ease
animation-delay规定在动画开始之前的延迟，默认是0
animation-iteration-count规定动画被播放的次数，默认是1，infinite是无限次播放
animation-direction 规定是否应该轮流反向播放动画。默认normal

.box {
   
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 200px auto;
            background-color: skyblue;
            /* 添加绑定动画 动画名称 过渡时间 速度曲线  延时时间 动画次数 前两个必须设置 */
            /* animation: move 1s linear 3 2s; */
            animation: move2 3s linear infinite;
        }
        /* 自定义动画 过程 */
        @keyframes move {
   
            /* 从头开始，最好保持跟默认样式的状态一致 */
            from {
   
                transform