# CSS常问面试题

# CSS优先级算法

选择器	优先级
元素选择符	1
class选择符	10
id选择符	100
内联样式	1000

其他规则
- !important声明样式优先级最高
- 优先级相同，看最后出现的样式
- 继承得到的样式优先级最低

!important > 内联style > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器>继承

# CSS3新特性

过渡，动画，变换过渡：

属性	说明	值
`transition-delay`	指定过渡开始之前的延迟时间	时间
`transition-duration`	指定过渡的持续时间	时间
`transition-property`	指定应用过渡的属性	字符串
`transition-timing-funtion`	指定过渡期间计算中间值的方式	`ease ease-in ease-out ease-in-out linear` 还有一个`cubic-bezier`贝塞尔曲线

简写：

transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

cubic-bezier

transition-timing-function: cubic-bezier(p0,p1,p2,p3) /*四个点*/

动画：

属性	说明	值
`animation-delay`	设置动画开始前的延迟	时间 s/ms
`animation-direction`	设置动画循环播放的时候是否反向播放	`normal/alternate`
`animation-duration`	设置动画播放的持续时间	时间
`animation-iteration-count`	设置动画的播放次数	`infinite`/数值
`animation-name`	动画名称	*
`animation-play-state`	允许动画暂停和重新播放	`running/paused`
`animation-timing-function`	如同上面	*

简写：

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count>

变换：

属性	说明	值
`transform`	指定应用的变换功能	参考下面应用变换
`transform-origin`	指定变换的起点	参考下面指定元素变换起点

应用变换：

值	说明
`translate`	在水平/垂直方向或者两个方向上平移元素
`scale`	在水平/垂直方向或者两个方向上缩放元素
`rotate`	旋转角度
`skew`	倾斜元素一定角度

指定元素变换起点：

transform-origin允许我们指定应用变换的起点，默认情况下使用元素的中心作为起点

值	说明
`%`	指定元素x/y轴的起点
`left/center/right`	指定x轴上的位置
`top/center/bottom`	指定y轴上的位置

边框

创建圆角边框

border-radius: 一次设置四个角简写属性，分别为`border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius`

指定两个半径值即可定义一个圆角，采用长度值和百分数值均可。第一个值指定水平曲线半径，第二个为垂直曲线半径。百分数值是相对于元素盒子的宽高来说的。

背景图片

背景图片尺寸

contain值确保图像调整尺寸后，整个图像始终包含在元素内部。浏览器判断图像长度和宽度哪个更大，并将较大者调整至容器相应长度或宽度大小。相反，如果取cover值，浏览器选中较小的值，并沿着该方向调整图像大小。

盒阴影

# 常见兼容性问题

不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

TIP

为什么要初始化css样式？也是为了解决兼容性问题，还要清除元素的一些默认样式。

# CSS里的`visibility`属性有个`collapse`属性值

visibility设置为hidden，表示元素不可见但在页面仍会占据空间。当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。

chrome中，使用collapse值和使用hidden没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

# `position`和`display`,`overflow`,`float`叠加使用

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

# 浮动

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：
- 父元素高度无法被撑开，影响与父元素同级的元素。
- 与浮动元素同级的非浮动元素（内联元素）会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面结构

清除浮动的方式：

父级div定义height
最后一个浮动元素后加一个空div标签，并添加样式clear:both;

clear属性表示设置元素的左右边界不允许出现浮动元素

父级元素触发BFC
包含浮动元素的父标签添加样式overflow:hidden/auto;
父级div定义伪元素和zoom:1
建立伪类选择器

//添加:after伪元素
    .parent:after{
        content: ''; /* 设置添加子元素的内容是空 */  
        display: block; /* 设置添加子元素为块级元素 */       
        height: 0; /* 设置添加的子元素的高度0 */     
        visibility: hidden; /* 设置添加子元素看不见 */     
        clear: both; /* 设置clear：both */
    }
    <div class="parent">
        <div class="f"></div>
    </div>

1
2
3
4
5
6
7
8
9
10
11

TIP

清除浮动——一个父元素的所有子元素如果都是浮动的，那么这个父元素是没有高度的。

（1）如果这个父元素的相邻元素是行内元素，那么这个行内元素将会在这个父元素的区域内见缝插针，找到一块放得下它的地方。（2）如果相邻的元素是一个块级元素，那么设置这个块级元素的margin-top将会以这个父元素的起始位置作为起点。

浮动两个特性：
- 浮动的元素不像absolute定位那样，它并没有脱离正常的文档流，仍然占据正常文档流的空间。而这个空间正是正常文档流的background的border，反过来说，其它元素将会围绕着浮动的元素排列，浮动的元素就会占据着它们的背景和border
- 浮动的元素虽然还在父容器的区域内排列，但它不会撑起父容器的高度，父容器的高度跟没有子元素一样都是0px。

# 使用百分比设定单位

TIP

position:ablsolute中的%

对于设置绝对定位的元素，我们可以用left,top表示其偏移量，我们把这个元素的祖先元素中第一个存在定位属性的元素为参照物，其中%是相对于参照物的，left相对于参照物的width,top相对于这个参照物height。

position:relative中的%

对于设置相对定位的元素，%的数值是相对于自身的，left相对于自身的width,top相对于自身的height

position:fixed中的%

对于设置固定定位的元素，%是相对于视口的。left-->视口的width,top相对于视口的height

margin/padding的%

无论top/left都是相对于父元素的宽度的。是宽度！！！

border-radius/background-size/transform:translate

相对于自身的宽高

text-indent

设置首行缩进，相对于父元素的宽。

font-size

相对于父元素的字体大小

line-height

相对于该元素的font-size数值的。

# 布局

多列布局（如同报纸模式）允许在多个垂直列中布局内容

属性	说明	值
`column-count`	指定列数	数值
`column-fill`	指定内容在列与列之间的分布方式	`balance/auto`
`column-gap`	指定列之间的距离	长度值
`column-rule`	列边样式的简写	和边框一样
`columns`	设置`column-span/column-width`简写属性
`column-span`	设置元素横向跨多少列	`None/all`
`column-width`	指定列宽	长度值

弹性布局

设定Flex布局以后，子元素的float和clear，vertical-align属性将失效。水平的叫主轴，垂直叫交叉轴。

设置在容器上的属性：
- flex-direction: row/row-reverse/column/column-reverse
决定主轴的方向，即项目的排列方向
- flex-wrap: nowrap/wrap/wrap-reverse
默认项目都水平排列在主轴上，该属性定义如果一条轴线排不下如何换行。
- flex-flow
前两个属性的简写，默认为row nowrap
- justify-content
定义项目在主轴上的对齐方式。flex-start/flex-end/center/space-between/space-around
- align-items
定义项目在交叉轴的对齐方式。flex-start/flex-end/center/baseline/stretch

TIP

baseline：项目中第一行文字基线对齐 stretch：默认值，如果项目未设置高度或设为auto，将占满整个容器高度。
- align-content
定义多根轴线的对齐方式，如果只有一个轴线，不起作用。flex-start | flex-end | center | space-between | space-around | stretch;
设置在项目上的属性：
- order
定义项目的排列顺序。数值越小，排列越靠前，默认为0
- flex-grow
定义项目放大比例，默认为0，所以如果存在剩余空间，也不放大。

TIP

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
- flex-shrink
定义项目的缩小比例，默认为1。项目空间不足，则将缩小。
- flex-basis。该属性定义了在分配多余空间之前，项目占据的主轴空间
默认值为auto
- flex
2-4属性的缩写：flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]。后两个属性可选
- align-self： auto | flex-start | flex-end | center | baseline | stretch;
允许单个项目有与其他项目不一样的对齐方式。可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，没有父元素则取stretch

<div class="container">
    <div class="left"></div> // 286
    <div class="right"></div> // 314
</div>

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .container {
        width: 600px;
        height: 300px;
        display: flex;
    }
    .left {
        flex: 1 2 500px;
        background: red;
    }
    .right {
        flex: 2 1 400px;
        background: blue;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

TIP

flex-shrink计算方式：

flex-shrink 属性定义空间不够时各个元素如何收缩。其值默认为 1。flex-shrink 定义的仅仅只是元素宽度变小的一个权重分量。每个元素具体收缩多少，还有另一个重要因素，即它本身的宽度。

例子： 父元素500px。三个子元素分别设置为150px，200px，300px。三个子元素的 flex-shrink 的值分别为 1，2，3。首先，计算子元素溢出多少：150 + 200 + 300 - 500 = -150px。那这 -150px 将由三个元素的分别收缩一定的量来弥补。**具体的计算方式为：每个元素收缩的权重为其 flex-shrink 乘以其宽度。**所以总权重为 1 * 150 + 2 * 200 + 3 * 300 = 1450

三个元素分别收缩：
- 150 * 1(flex-shrink) * 150(width) / 1450 = -15.5
- 150 * 2(flex-shrink) * 200(width) / 1450 = -41.4
- 150 * 3(flex-shrink) * 300(width) / 1450 = -93.1
三个元素的最终宽度分别为：
- 150 - 15.5 = 134.5
- 200 - 41.4 = 158.6
- 300 - 93.1 = 206.9

同样，当所有元素的 flex-shrink 之和小于 1 时，计算方式也会有所不同：例如把收缩比例改为0.1 0.2 0.3，权重则为145。三个元素收缩总和并不是150px，而是只会收缩150px 的(0.1 + 0.2 + 0.3) / 1即60%的空间：90px。

每个元素收缩的空间为：
- 90 * 0.1(flex-shrink) * 150(width) / 145 = 9.31
- 90 * 0.2(flex-shrink) * 200(width) / 145 = 24.83
- 90 * 0.3(flex-shrink) * 300(width) / 145 = 55.86
三个元素的最终宽度分别为：
- 150 - 9.31 = 140.69
- 200 - 24.83 = 175.17
- 300 - 55.86 = 244.14
flex-grow计算方式：

grid布局 display:grid指定容器采用网格布局，默认情况容器都是块级元素，也可以设置为行内元素display: inline-grid

容器设置的属性：
- grid-template-columns 定义每一列的列宽（可以使用repeat()函数，fr关键字，minmax()函数，auto关键字）
1. repeat(3,33.33%)。第一个参数为重复的次数，第二个参数为重复的值。
2. repeat(2, 100px 20px 80px)。重复某种模式
3. repeat(auto-fill, 100px) 自动填充。
- grid-template-rows定义每一列的行高（可以使用repeat()函数，fr关键字，minmax()函数，auto关键字）
- grid-gap：grid-column-gap和grid-row-gap简写合并，表示列，行间距
- grid-auto-flow属性决定，默认值为row，即先行后列。也可以设为column先列后行。
- justify-items设置单元格内容的水平位置。（start end center stretch)
- align-items则设置单元格内容垂直位置。（start end center stretch)
- place-items 前面两个属性的简写：align-items justify-items(省略第二个值，浏览器认为与第一个值相等)

# 网页中使用偶数字体

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了1 px，但点阵没变），于是略显稀疏。

# 行高

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。

# `li`之间空白间隔

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

解决方案：
- 将li标签写在一排
- 浮动
- 在ul中使用font-size: 0; letter-space: -3px;

# `link`和`@import`引入css区别：

link引用时在页面载入时同时加载；@import需要页面完全载入以后再加载，所以可能出现无样式页面。
前者可以加载其他，后者只能css
兼容性
前者支持通过js控制DOM改变样式。

# `style`标签写在`body`前或者后，有什么区别？

一般情况下，页面加载时自上而下的。将style标签至于body之前，为的是先加载样式。
若是写在body标签之后，由于浏览器以逐行方式对html文档进行解析，当解析到写在写在文档尾部的样式表时，会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后会重新渲染，在windows的IE下可能会出现FOUC现象（页面闪烁）。

TIP

何为FOUC？又如何避免？

当使用@import导入CSS时，会导致某些页面在IE出现奇怪的现象：没有样式的页面内容显示瞬间闪烁，这种现象被称为“文档样式暂时失效”，简称FOUC。 **产生原因：**当样式表晚于结构性html加载时，加载到此样式表时，页面将会停止之前的渲染。等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。 **解决办法：**只要在之间加上元素即可

# 伪类和伪元素根本区别：

从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。
伪元素在一个选择器里只能出现一次，并且只能出现在末尾。
伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上。
伪类用一个冒号表示 :first-child，伪元素则使用两个冒号表示 ::first-line(为了向下兼容，现在的浏览器中伪元素选择器用单冒号和双冒号都可以)。

常用伪元素和伪类：

TIP

:focus-within 伪类选择器，它表示一个元素获得焦点，或该元素的后代元素获得焦点。划重点，它或它的后代获得焦点。
nth-child和nth-of-type的区别：

ele:nth-of-type(n)是指父元素下第n个ele元素。而ele:nth-child(n)是指父元素下第n个元素并且这个元素为ele，若不是，则选择失效。如果:nth-child(n)不指定父元素标签类型（用类选择器代替）则依旧选中第n个元素；如果:nth-type-of(2)选中所有类型标签的第n个。
n可以是数字，关键词或者公式。关键词：Odd/even。用于匹配下标是奇数还是偶数的子元素的关键词。第一个子元素下标为1。公式则为an+b（表示周期的长度，n是计数器从0开始，b是偏移值。

# `border:none`和`border: 0`的区别？

{border：0;}: 把border设置为0像素，虽然在页面上看不到，但是按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用内存值；
{border：none；}被理解为border-style:none。boder:0;比border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高；

# `px|em|rem`单位

px: px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em: em的值并不是固定的， em会继承父级元素的字体大小。（浏览器body中1em=16px）
- body选择器中声明Font-size=62.5%；
- 将你的原来的px数值除以10，然后换上em作为单位；
- 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
- 对于font-size来说,em是相对于父元素字体大小；在line-height是相对于自身字体大小。

rem: 使用rem相对的只是HTML根元素。集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

var fontSize = document.documentElement.clientWidth / num // num为某个便于计算的比例，根据设计稿来。如果设计稿为375，num为3.75。则根元素字体大小就为100px。便于rem单位转换。

或者可以根据媒体查询和calc()枚举不同的设备下不同的html的font-size值进行响应式处理。

# 图片格式

png便携式网络图片（Portable Network Graphics）,是一种无损数据压缩位图文件格式。优点是：压缩比高，色彩好。大多数地方都可以用。
jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果。
bmp的优点：高质量图片；缺点：体积太大；适用场景：windows桌面壁纸；
webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

# 实现左边竖条的方法

border
伪元素
内/外box-shadow

/*内*/
div{
    box-shadow:inset 5px 0px 0 0 deeppink;
}

/*外*/
div{
    box-shadow:-5px 0px 0 0 deeppink;
}

1
2
3
4
5
6
7
8
9

滤镜drop-shadow

div{
    filter:drop-shadow(-5px 0 0 deeppink);
}

1
2
3

渐变

div{
    background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
}

1
2
3

轮廓outline

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

div{
    height:50px;
    outline:5px solid deeppink;
}
div{
    position:absolute;
    content:"";
    top:-5px;
    bottom:-5px;
    right:-5px;
    left:0;
    background:#ddd;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 超出部分省略号

单行

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

1
2
3

.text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

1
2
3
4
5
6
7

TIP

-webkit-line-clamp: 2（用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。为了实现该效果，它需要组合其他的WebKit属性）
display: -webkit-box（和 1 结合使用，将对象作为弹性伸缩盒子模型显示）
-webkit-box-orient: vertical（和 1 结合使用，设置或检索伸缩盒对象的子元素的排列方式）
overflow: hidden（文本溢出限定的宽度就隐藏内容）
text-overflow: ellipsis（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)

# zoom/scale的区别

控制缩放的值不一样。zoom更全面，但是不能是负数，只能等比例控制；而scale虽然只能是数值，但是能负数，可以只控制1个维度。
zoom的缩放是相对于左上角的；而scale默认是居中缩放(transfrom-origin可以改变）；
zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。
在文档流中zoom加在任意一个元素上都会引起一整个页面的重新渲染，而scale只是在当前的元素上重绘。

# 表格自动换行

word-break:noraml使用浏览器默认的换行规则；break-all：允许单词内换行；keep-all：只能在半角空格或连字符处换行； word-wrap：normal是用浏览器默认的换行规则；break-word：在长单词或url地址内部换行；

# `width: auto`和`width:100%`区别

一般而言width:100%会使元素box的宽度等于父元素的content box的宽度。width:auto会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。

# `font-style`属性中的`italic/oblique`区别

italic和oblique这两个关键字都表示“斜体”的意思。它们的区别在于，italic是使用当前字体的斜体字体，而oblique只是单纯地让文字倾斜。如果当前字体没有对应的斜体字体，则退而求其次，解析为oblique，也就是单纯形状倾斜。

# 分析比较`opacity:0/visibility:hidden/display:none`优劣及适用场景

TIP

display: none;

DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；
事件监听：无法进行 DOM 事件监听；
性能：动态改变此属性时会引起重排，性能较差；
继承：不会被子元素继承，毕竟子类也不会被渲染；
transition：transition 不支持 display

visibility: hidden;

DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；
事件监听：无法进行 DOM 事件监听；
性能：动态改变此属性时会引起重绘，性能较高；
继承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；
transition：transition 支持 visibility

opacity: 0;

DOM 结构：透明度为 100%，元素隐藏，占据空间；
事件监听：可以进行 DOM 事件监听；
性能：提升为合成层，不会触发重绘，性能较高；
继承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；
transition：transition 支持 opacity

← 前端面试HTML问什么 js面试问题列表 →

# CSS常问面试题

# CSS优先级算法

# CSS3新特性

# 常见兼容性问题

# CSS里的visibility属性有个collapse属性值

# position和display,overflow,float叠加使用

# 浮动

# 使用百分比设定单位

# 布局

# 网页中使用偶数字体

# 行高

# li之间空白间隔

# link和@import引入css区别：

# style标签写在body前或者后，有什么区别？

# 伪类和伪元素根本区别：

# border:none和border: 0的区别？

# px|em|rem单位

# 图片格式

# 实现左边竖条的方法

# 超出部分省略号

# zoom/scale的区别

# 表格自动换行

# width: auto和width:100%区别

# font-style属性中的italic/oblique区别

# 分析比较opacity:0/visibility:hidden/display:none优劣及适用场景

# CSS里的`visibility`属性有个`collapse`属性值

# `position`和`display`,`overflow`,`float`叠加使用

# `li`之间空白间隔

# `link`和`@import`引入css区别：

# `style`标签写在`body`前或者后，有什么区别？

# `border:none`和`border: 0`的区别？

# `px|em|rem`单位

# `width: auto`和`width:100%`区别

# `font-style`属性中的`italic/oblique`区别

# 分析比较`opacity:0/visibility:hidden/display:none`优劣及适用场景