CSS面试题汇总

持续更新...

一、CSS基础知识

1、介绍一下CSS的盒子模型

• CSS的盒子模型描述了Web页面中的元素布局方式，把元素看成一个盒子，由元素内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。

• CSS的盒模型：标准盒模型、怪异盒模型

  • 标准盒模型：width和height只包含了content

  • 怪异盒模型：width和height包含了border、padding和content

• box-sizing：用来更改元素的盒模型

  • box-sizing: content-box 设为标准盒模型（默认值）
  • box-sizing: border-box 设为怪异盒模型

2、CSS选择器及其优先级

选择器	标签	选择器	权重
id选择器	<div id="id"></div>	#id	100
类选择器	<div class="className">box</div>	.className	10
属性选择器	<input type="text" />	input[type='text']	10
伪类选择器	用于指定元素的特殊状态	:hover :link :first-child 伪类传送门	10
标签选择器	HTML的标签	div	1
伪元素选择器	用于元素的特定部分样式的修改	::first-line ::before ::after 伪元素传送门	1
后代选择器	使用空格分隔: 所有后代	div p	0
直接子元素选择器	>：所有直接子元素	div > p	0
相邻兄弟选择器	+：只有相邻的一个兄弟才会生效	div + p	0
通配符选择器	所有的选择器	*	0

元素优先级：

!important > 行内样式 > id 选择器 > 类选择器 > 标签选择器

3、元素中可继承属性与不可继承属性

（1）元素的可继承属性

• 字体系列的属性

  • font-family、font-weight、font-size、font-style

• 文本系列的属性

  • color、text-align、text-indent、word-spacing、letter-spacing、text-transform（文本大小写）

• 元素的可见性

  • visibility

• 表格属性

  • border-collapse（折叠边框）、border-spacing（相邻单元格边框之间的距离）、caption-side（标题位置）

• 列表属性

  • list-style，包含list-style-type、list-style-position、list-style-image

• 其他属性

  • cursor

（2）元素的不可继承属性

• display

• 文本属性

  • vertical-align、text-decoration、text-shadow、white-space、unicode-bidi（设置文本方向）

• 盒子模型的属性

  • width、height、padding、border、margin

• 背景属性

  • background、background-color、background-image、background-repeat、background-position、background-attachment

• 定位属性

  • float、clear（清除元素浮动的影响）、position、max-width、max-height、min-width、min-height、overflow、z-index

• 生成内容属性

  • content、counter-reset、counter-increment（计数器相关）

• 轮廓样式属性

  • outline-style、outline-width、outline、outline-color

3、元素的隐藏

• 完全隐藏：元素从渲染树中消失，不占据空间
• 视觉上的隐藏：屏幕中不可见
• 语义上的隐藏：读屏软件不可读，但正常占据空间aria-hidden

隐藏	原理	占据页面空间	响应绑定的监听事件
dispaly: none	直接在dom中删除元素，相当于<div hidden></div>	否	否
visibility: hidden	没有删除dom，样式层面的隐藏	是	否
opacity: 0	设置元素的透明度为0	是	是
position: absolute	通过绝对定位将元素移除可视区	-	-
z-index: -9999	将元素叠在其他元素的最低层	-	-
clip-path	裁剪元素创建可显示区域，区域之外的隐藏	是	否
transform: scale(0, 0)	将元素缩放为0	是	否

4、display: none和visibility: hidden区别

• 结构

  • display让元素从渲染树中消失，不占据空间，不可点击
  • visible不会让元素从渲染树中消失，占据空间，不可点击
  • opacity不会让元素从渲染树中消失，占据空间，可以点击

• 继承

  • display: none和opacity: 0 非继承属性
  • visibility: hidden 继承属性。可以设置子元素visibility: visible重新显示子元素

• 重排和重绘

  • display: none 重排
  • visibility: hidden 重绘
  • opacity: 0 重绘

• 屏幕阅读器

  • display: none 不会被读取
  • visibility: hidden 会被读取

5、transition和animation区别

• transition是过渡属性，强调过渡，需要触发一个事件之后才会执行，需要设置两个关键帧（过度的开始和结束帧）

• animation是动画属性，设置元素的动画，可以包含多个关键帧

• transition属性

  • transition-property：指定过渡的CSS属性
  • transition-duration：指定过渡所需的完成时间
  • transition-timing-function：指定过渡函数
  • transition-delay：指定过渡的延迟时间

• animation属性

  • animation-name：指定要绑定到选择器的关键帧名字
  • animation-duration：动画完成需要的时间
  • animation-timing-function：动画将如何完成一个周期
  • animation-delay：动画在启动前的延时间隔
  • animation-iteration-count：动画的播放次数
  • animation-direction：设置动画正向播放、反向播放还是正反轮流
  • animation-fill-mode：动画不播放时（动画完成时、动画有延迟未开始播放时），要应用到元素的样式
  • animation-play-state：指定动画是否正在运行或已暂停

6、requestAnimationFrame

（1）实现动画的效果有很多

• JavaScript的setTimeout和setInterval
• CSS3的transition和animation
• HTML5的canvas
• HTML5的API：requestAnimationFrame

（2）requestAnimationFrame

• 用法window.requestAnimationFrame(callback)
• 使用cancelAnimationFrame()来取消执行动画，该方法接收一个参数——requestAnimationFrame默认返回的id，只需要传入这个id就可以取消动画了。
• 在浏览器的下一次重绘之前调用该回调函数callback

（3）requestAnimationFrame优势

• CPU节能：当页面被隐藏或最小化的时候，setInterval仍然在后台执行动画任务，浪费CPU资源，而requestAnimationFrame会停止渲染，当页面被激活时，继续执行。
• 函数节流：requestAnimationFrame可以保证在一次屏幕刷新的时候只执行一次，和屏幕的刷新率保持一致，既不会造成动画卡顿保证页面的流畅性，也不会过多的执行函数
• 减少DOM操作：会把一帧的DOM集中起来，在一次重绘/回流中完成

（4）setTimeout缺点

• 通过设定时间间隔来改变图像位置，达成动画效果，容易出现卡顿的效果。
  • setTimeout的任务被放在异步队列中，只有当主线程执行完毕之后才会执行，因此实际执行任务的时间是不可控的
  • settimeout的固定时间间隔不一定与屏幕刷新间隔时间相同，会导致丢帧

7、使用translate改变位置而不是定位

translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint）。

8、重排和重绘

简单介绍一下浏览器渲染流程：CSSOM+DOM --> 渲染树 --> Layout --> Painting

（1）重排和重绘

• 重排：影响了元素的几何信息（元素在视口内的位置和尺寸大小），浏览器需要重新计算元素在视口内的几何属性
• 重绘：当元素的可见样式发生改变，但不影响其布局的情况下，浏览器会重新绘制（重绘）该元素

（2）什么时候会引发重排和重绘

• 重排
  • 页面首次渲染
  • 元素位置发生改变：浏览器窗口大小发生改变、定位
  • 元素尺寸发生变化（修改宽高边距、元素字体大小、文字数量、图片大小）
  • 添加或删除可见的DOM元素（渲染树只包含可见的DOM）
  • 激活CSS伪类
  • 设置元素的style属性值
  • 查询某些属性或调用某些计算方法（实时获取元素位置scrollTop之类）
• 重绘
  • 元素的样式（color、background、border-style、outline、box-shadow）
  • visibility

（3）如何减少重排

• 减少重排范围
  • 在尽可能低的DOM节点上修改样式，不要通过修改父级样式影响子节点
  • 不要使用table布局
• 减少重排次数

  • 样式集中改变，将多次修改样式的行为集中在一次操作中完成，如果要修改多个属性，可以直接修改class名，这样只会引起一次回流

  • 分离DOM的读写操作

    • 浏览器针对页面的回流与重绘，进行了优化 - 渲染队列
    • 浏览器在遇到连续的修改 DOM 样式的操作时，会将所有的回流、重绘操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。这样就会让多次回流、重绘变成一次回流重绘。
    • 将多个读操作（或者写操作）放在一起，就会等所有的读操作进入队列之后执行，这样只会触发一次回流重绘。

  • 减少DOM的增删行为（可以将DOM离线）

    • 设置display: none，在DOM树上移除节点，变更完成之后再添加到DOM树上
    • 使用documentFragment创建DOM碎片，操作完成之后添加到文档中，只会触发一次重排
    • 复制节点，在副本上工作，然后替换原节点

  • 元素位置的变化：如果在做元素移动的动画，可以避免改动margin，使用position脱离文档流，再改变位置会更好

  • 获取元素的偏移量属性：scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的准确性会通过回流获取最新的值，避免多次获取属性值，可以将值存在缓存中offsetTop、clientTop、scrollTop、offsetTop、clientTop、scrollTop

9、li和li之间会存在空白间隔

浏览器会把内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。一般情况下一个li占据一行，此时li和li之间存在换行符，将li转换成行内元素一排展示时，换行符被转换成空格。

解决办法：

• 将li设置为float
• 所有的li在一行展示
• ul的font-size设置为0，ul的子元素可以重新设置字符大小
• ul的字符间隔设置为letter-spacing:-8px，子元素可以重设字符间隔

10、CSS3有哪些新特性

• 新增各种CSS选择器（:not）
• 盒子模型属性：border-radius、box-shadow、border-image
• 背景：background-size、background-origin、background-clip
• 文本效果：text-shadow、word-wrap
• 颜色：新增 RGBA，HSLA 模式
• 渐变：线性渐变、径向渐变
• 字体： @font-face
• 2D/3D转换：transform、transform-origin
• 过渡与动画：transition、@keyframes、animation
• 多列布局
• 媒体查询

11、常见的图片格式以及使用场景

格式	体积	特性	兼容性
jpg	一般	最常见、应用最为广泛	几乎所有浏览器都支持
png	较大	背景透明	几乎所有浏览器都支持
gif	较大	动图	几乎所有的浏览器都支持
svg	视内容而定	矢量图，任意缩放不影响清晰度	chrome 4（2010）
webp	较小	支持动图、专注于web平台的表现	chrome 32（2014）
avif	较小	动图	chrome 85 （2020）

12、物理像素、逻辑像素、像素密度

• 物理像素（设备像素）：物理像素是屏幕上的一个点，是屏幕的最小单位，设备像素的数量决定了屏幕的分辨率
• 逻辑像素：一种虚拟像素单位，web开发中使用的抽象单位。一般情况下，一逻辑像素 = 1CSS像素
• 设备像素比（DPR）：设备像素和逻辑像素之间的比值

13、对于line-height的理解

（1）line-height相关概念

• line-height是指一行文本的高度，实际上是下一行基线到上一行基线之间的距离
• 如果一个标签没有定义height属性，那么最终表现的高度由line-height决定
• 一个容器没有设置高度，那么撑开容器高度的是line-height，而不是容器内的文本
• line-height和height都能撑开一个高度

（2）line-height的赋值与继承

格式	当前元素的line-height	子元素继承的line-height
20px	20px	20px
20em	20 * 当前元素的font-size	将计算后的值传递给后代
1.5	1.5 * 当前元素的font-size	继承1.5，1.5 * 子元素的font-size
20%	20% * 当前元素的font-size	将计算后的值传递给后代

em：是一个相对单位，2em = 2 * fontSize的值

• font-size: 2em，2 * 父元素的字体大小
• 对于其他属性，2 * 当前元素的字体大小

14、BFC（块级格式上下文）

（1）BFC：

• Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域
• 通俗来讲，BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定的规则进行元素布局，不会影响其他环境。
• 如果一个元素符合触发BFC条件，则BFC中的元素布局不会受外部影响

（2）创建BFC

• 根元素body
• float除了none以外的值
• position为absolute、fixed
• display的值为inline-block、table-cell、table-caption、flex等
• overflow的值为hidden、auto、scroll

（3）BFC的特点

• 垂直方向上，自上而下排列，和文档流的排列方式一致
• 计算BFC的高度时，需要计算浮动元素的高度
• BFC区域不会与浮动的容器发生重叠
• BFC是独立的容器，容器内部的元素不会影响外部元素

（4）BFC解决的问题

• margin垂直方向重叠问题：将两个元素分别设置为BFC
• 高度塌陷问题：将父元素设置为BFC，一般将父元素设置为overflow: hidden
• 非浮动元素被浮动元素覆盖问题：创建自适应两栏布局，左侧浮动时，右侧设置overflow可以避免浮动影响

15、居中的方式有哪些

• 绝对定位

position: absolute; 
left: 50%;
top: 50%; 
// 如果盒子宽高已知的话，可以使用margin移动盒子的一半宽高
transform: translate(-50%, -50%);

position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0;
margin: auto;

• flex

display: flex; 
justify-content:center; 
align-items:center; 

居中为什么要使用 transform（为什么不使用 marginLeft/Top）

• margin是布局属性，改变元素的边距，会引起页面的重排与重绘
  • 所谓重排就是说，对这些节点以及受这些节点影响的其他节点，进行CSS计算，布局，重绘的过程
  • 浏览器需要为整个层进行重绘并重新上传到GPU，性能开销较大
• transform是合成属性，浏览器会将被动画元素放在一个独立的层中进行动画，只重绘不重排

16、两栏布局

两栏布局一般指的是：左侧固定，右侧自适应

• 浮动 + margin-left
  • 左侧：float: left + 固定宽度，右侧：marginLeft = 左侧宽度
• 浮动 + BFC
  • 左侧：float: left + 固定宽度，右侧：overflow: hidden
  • 右边触发了BFC，BFC的区域不会与浮动元素重叠
• flex
  • 左侧：固定宽度，右侧：flex：1
• absolute + margin-left
  • 左侧：绝对定位 + 固定宽度，右侧marginLeft = 左侧宽度
  • 也可以右侧设置绝对定位，left的值为左侧的宽度

17、三栏布局

三栏布局一般指的是：左右固定，中间自适应

• 浮动 + margin
  • 左右两侧设置浮动，中间设置margin
  • 中间一栏的标签要放在最后
• 浮动 + BFC
  • 左右两侧设置浮动，中间设置BFC
  • 中间一栏的标签要放在最后
• 圣杯布局：浮动 + marginTop
  • 父元素设置padding，左右padding等于左右宽度
  • 三栏均设置浮动，中间一栏标签在最前面，宽度等于父元素
  • 左右两栏通过marginTop移到顶部
• 双飞翼布局
  • 圣杯布局的父元素padding，改为子元素的margin
• 绝对定位：左右两侧设置absolute，中间设置左右margin
• flex：左右两侧固定，中间一栏设置为flex：1

18、flex

（1）display: flex

• 弹性盒子布局模型，通过设置容器和子元素的属性来实现灵活的布局
• 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

（2）容器属性

• flex-direction：决定主轴的方向（横向/纵向，默认是横向）
• flex-wrap：如果一条轴线排不下，是否换行
• flex-flow：是flex-direction和flex-wrap的简写形式，默认值为row nowrap
• justify-content：项目在主轴上如何对齐
  • flex-start
  • flex-end
  • center
  • space-between：左右贴合边框，item之间的间距相等
  • space-around：每个item的左右间距都是相等的
• align-items：项目在交叉轴上如何对齐
  • flex-start
  • flex-end
  • center
  • stretch：如果项目未设置高度或设为auto，将占满整个容器的高度
  • baseline
• align-content：定义多根轴线的对齐方式
  • 如果项目只有一根轴线，该属性不起作用
  • 将一行子项作为一个整体，在交叉轴上进行对齐
  • flex-start | flex-end | center | space-between | space-around | stretch

（3）子元素属性

• order： 排列顺序，值越小，排列越靠前，默认为0
• flex-grow：放大比例，默认为0，即如果存在剩余空间，也不放大
  • 值越大，放的越大
  • 如果值分别为 1 1 2，那么2占据的剩余空间是1的2倍
• flex-shrink：缩小比例，默认为1，即如果空间不足，项目将缩小
  • 值越大，缩的越小
  • 负值无效
• flex-basis
  • 定义了在分配多余的空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余的空间
  • 默认值auto，即项目本身的大小
  • content -> width -> flex-basis（受min-width、max-width影响）
    • 如果设置了width、flex-basis，以flex-basis的宽度为准，其次是width，再然后是元素本身的宽度
    • 如果设置了min-width、max-width，flex-basis也会不生效，以min-width、max-width为准
• flex：flex-grow、flex-shrink、flex-basis的缩写
  • flex：initial - > 0 1 auto
  • flex：auto - > 1 1 auto
  • flex：none - > 0 0 auto
  • flex：2 - > 2 1 0%
    • 数值指的是flex-grow的值
    • flex-basis为百分数，参考值为父元素对象
  • flex：0% 或 20px - > 1 1 0%或20px
  • flex：2 3 -> 2 3 0%
• align-self：允许单个项目有与其他项目不一样的对齐方式
  • 可以覆盖align-items属性，默认为auto，表示继承父元素的align-items，如果没有父元素，则等同于stretch

19、响应式布局

（1）图片自适应

• 图片大小自适应

如果是背景图片，使用background-size

img { 
    display: inline-block;
    // 图片会占满整个容器
    max-width: 100%; 
    // 等比缩放不失真
    height: auto; 
}

• 图片分辨率自适应
  • srcset
  • background-image + 媒体查询
  • picture

// Mac上的Chrome它会同时加载2x和src图片，picture不会
<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">


.banner{
  background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
  background-image: url(/static/small.jpg);
}


<picture>
    <source srcset="banner_w1000.jpg" media="(min-width: 801px)">
    <source srcset="banner_w800.jpg" media="(max-width: 800px)">
    <img src="banner_w800.jpg" alt="">
</picture>

<!-- picturefill.min.js 解决IE等浏览器不支持 <picture> 的问题 -->
<script type="text/javascript" src="js/vendor/picturefill.min.js"></script>

参考文章：传送门

（2）屏幕自适应

• 使用rem为单位
  • 用px还原设计稿，通过postcss插件将px转化为rem
  • 根据屏幕宽度自定义font-size的值
  • 缺点：
    • js和css耦合，必须通过js控制font-size大小，且js代码放在css样式之前
    • 可以rem搭配vm，将font-size用vw表示

20、视差滚动效果

21、CSS的单位

• 像素（px）
• 百分比（%）
  • width、height相对于父元素width、height
  • 子元素的padding margin无论是水平还是垂直，都是相对于父元素width
  • border-radius、translate、background-size相对于自身宽度
• em
  • 如果是font-size设置em单位，相对于父元素的font-size的倍数
  • 如果是其他元素设置em单位，相对于当前字体元素的font-size
• rem：相对于根元素font-size的倍数
• vw：相对于视图窗口的宽度
• vh：相对于视图窗口的高度
• vmin：vw和vh中较小值
• vmax：vw和vh中较大值

px是固定的值，一旦设置了不会改变

em和rem更有灵活性，长度不固定，可以进行响应式的布局

em的相对性也是灵活的，rem只需要相对根元素，因此响应式布局一般选择rem作为单位

22、文本溢出效果

（1）单行文本溢出

overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 用省略号展示溢出的文本
white-space: nowrap; // 文本不会换行

（2）多行文本溢出

overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 用省略号展示溢出的文本
display: -webkit-box; // 作为弹性伸缩盒子模式展示
-webkit-box-orient: vertical; // 子元素垂直排列
-webkit-line-clamp: 3; // 显示的行数

23、position

值	说明
static	默认值，正常的文档流，块级元素从上到下排列，行内元素从左到右排列
inherit	继承自父元素的position值
relative	相对定位，相对于原来的位置进行定位
absolute	绝对定位，相对于非static的父级元素定位
fixed	固定定位，相当于屏幕视口定位

• relative、absolute、fixed的元素的位置通过top、right、bottom、left决定
• relative 不脱离文档流，原来的位置仍会占据空间
• absolute、fixed 脱离文档流，原来的位置不会占据空间

粘性布局sticky（CSS3新增）

• 是relative和fixed的结合
• 没有超过指定阈值之前表现为relative，元素会跟随页面进行滚动（占据位置），超过阈值之后表现为fixed，固定在屏幕上
• 通过top、right、bottom、left设置阈值

24、清除浮动

1、为什么要清除浮动

• 浮动：非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面影响布局。
• 浮动的工作原理：
  • 浮动元素脱离文档流，不占据页面空间（引起高度塌陷现象）
  • 向左或向右浮动，直到它的外边缘碰到包含框或者另外一个浮动框位置
• 浮动元素引起的问题
  • 父元素的高度无法被撑开，影响与父元素同级的元素
  • 与浮动元素同级的浮动元素会紧随其后
  • 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

2、清除浮动的方式

• 给父级元素定义height
• 最后一个浮动元素之后添加一个空的div，并添加clear:both样式
• 给父级元素添加overflow: hidden或overflow: auto
• 使用:after伪元素，由于IE6-7不支持:after，使用zoom: 1触发hasLayout

.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }

// clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置display属性值的原因。

25、渐进增强和优雅降级

渐进增强（向前看）：针对低版本浏览器进行页面构建，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级（往回看）：一开始构建完整的功能，然后再针对低版本浏览器进行兼容

区别：优雅降级是从复杂的现状开始，并试图减少用户体验以向后兼容。渐进增强是从最基础的版本开始，并不断扩充以向前兼容。

26、CSS优化和提升性能

（1）加载性能

• 尽量减少CSS文件的大小，去除不必要的样式和注释
• 使用CSS压缩工具来压缩CSS文件
• 将多个CSS文件合并成一个文件，减少CSS文件的请求次数
• 减少使用@import，建议使用link

（2）选择器性能

• 关键选择器：CSS选择符是从右到左进行匹配的，选择器最右面的部分是最先匹配的关键选择器
• 如果拥有ID选择器，将ID选择器作为关键选择器，不要添加额外的规则
• 避免使用通配符选择器，计算次数惊人
• 尽量少的使用标签选择器，而是用class选择器
• 尽量少的使用后代选择器
• 继承属性不要重复指定规则
• 嵌套层数不要太多，最好不超过3层

（3）渲染性能

• 慎重使用高性能属性：浮动、定位
• 尽量减少页面的重排与重绘
• 属性值为0时不要加单位
• 属性值为浮动小数0.**，可以省略小数点之前的0
• 标准化各种浏览器前缀，带浏览器前缀的在前，标准属性在后

（4）可维护性

• 相同样式抽离
• 内容与样式分离

27、CSS的预处理器和后处理器

CSS本身是不可编程语言，当前端项目逐渐庞大之后，CSS的维护也愈发困难，使用预处理器可以为CSS增加一些可编程属性，通过变量、嵌套、函数等特性，通过工程化的手段让CSS更容易维护，提升开发效率。

后处理器：postCss，根据CSS规范处理CSS，可以用来给CSS添加浏览器私有前缀，实现响应式

28、伪元素的双冒号和单冒号有什么区别

伪类使用单冒号，用于为元素的特殊状态添加样式

伪元素使用双冒号，用于为元素特定部分添加一些样式

起初，伪元素也是使用冒号，但是与伪类的单冒号语法有冲突，CSS3规定了伪元素使用双冒号

29、媒体查询

查询用户所使用的媒体或者媒介，通过媒体查询让一个页面适应不同的终端设备

使用：Media Type（设备类型）+ 关键字（and|not|only) + 媒体特性

（1）媒体类型

设备类型	说明
ALL	所有设备
Screen	电脑显示器
Print	打印用纸或打印预览视图
Speech	语音或音频合成器

（2）媒体特性

样式	说明
aspect-ratio	页面可见区域宽高比
device-width、device-height	屏幕可见宽度、高度
width、height	页面可见宽度、高度
min-width、min-height	页面最小宽度、高度
max-width、max-height	页面最大宽度、高度
orientation	height 是否大于等于 width，portrait（是），landscape（否）

portrait：一般表示竖屏，landscape：一般表示横屏

（3）媒体类型的引用方法 link、xml、@import、@media

@media screen and (max-width:600px) and (min-width:200px) {}

<link rel="stylesheet" href="index.css" media="screen">

<? xml-stylesheet rel="stylesheet" media="screen" href="style.css" ?>

@import url('./index.css') screen

30、CSS工程化

（1）CSS工程化是为了解决以下问题

• 宏观设计：CSS代码如何组织、如何拆分、模块结构怎么设计？
• 编码优化：怎样写出更好的CSS？
• 构建：如何处理CSS，才能让打包结果最优
• 可维护性：更好的维护代码

（2）较为流行、普适性好的CSS工程化实践

• 预处理器：Less、Sass
• 工程化插件：postcss
• 打包工具：webpack

31、上滑加载

32、下拉刷新

33、z-index什么时候失效

z-index用于控制元素的堆叠顺序，控制哪个元素出现在其他元素之上 传送

（1）非定位元素

• 只对具有定位的元素生效（relative、absolute、fixed）

（2）层叠上下文

• 某些CSS属性或值会创建新的层叠上下文，这可能影响元素的层叠顺序

• opacity、transform、fiter会创建新的层叠上下文，可以根据需要调整元素的层叠顺序

（3）层叠顺序冲突

• 多个盒子设置z-index

（4）浮动元素

• 对于浮动元素，z-index可能会生效，因为浮动元素会创建新的层叠上下文

（5）z-index使用非整数值

34、margin重叠问题

两个垂直排列的块级元素上外边距和下外边距可能会合并为一个外边距，其大小为较大的外边距的值。浮动元素和绝对定位的外边距不会折叠。

（1）兄弟之间的折叠

（2）父子之间的折叠

35、元素的层叠顺序

层叠规则，从最底层向上分别是：

• 背景和边框
• 负值的z-index
• 块级盒子
• 浮动盒子
• 行内盒子
• 非负z-index

36、display、float、position的关系

display、float、position是CSS中常用的布局属性，用于控制元素的位置和排列。

• 如果display的值为none，那么position和float将失效
• position的优先级 > float的优先级
• display为inline时：元素不会被浮动元素包围，display为block时，会被浮动元素包围
• 行内元素设置float之后可以设置宽高

37、元素是否达到可视区域

• 浏览器的可视高度：innerHeight
• 浏览器滚动过的高度：scrollTop
• 元素顶部距离文档顶部的高度：offsetTop
• 判断内容是否到达滚动区：scrollTop + innerHeight > offsetTop

38、div盒子的默认宽高

width和height默认都是auto。

width: auto

• 块级元素：自适应充满父元素的宽度，这里的撑满和width: 100%的固定宽度不同，根据margin值的不同而自适应父元素的宽度
• 行内元素：由子元素宽度决定

height: auto

• 行内元素和块级元素的高度都由子元素高度决定

width: 100%和height: 100%

• 基于包含块（可能不是父元素，比如absolute）

注意父元素height: auto会导致子元素height: 100%百分比失效。

如果想要子元素的height:100%生效，那么父元素需要设定显式高度值；或者子元素使用绝对定位。（绝对定位元素百分比高度根据父元素的padding box计算，非绝对定位元素百分比高度是根据父元素的content box计算）

来源：juejin.cn/post/702857…

二、实践

1、画一个三角形

div {
    width: 0;
    height: 0;
    border-left: 50px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

2、实现一个扇形

div{
    border: 100px solid transparent;
    width: 0;
    height: 0;
    border-radius: 100px;
    border-top-color: red;
}

3、实现一个高度自适应的正方形

// vw
.square {
    width: 10vw;
    height: 10vw;
    background: tomato;
}

// 利用元素的margin/padding百分比是相对父元素width的性质来实现
.square {
    width: 20%;
    height: 0;
    padding-top: 20%;
    background: orange;
}

// 利用子元素的margin-top的值来实现
.square {
    width: 30%;
    overflow: hidden;
    background: yellow;
}
.square::after {
    content: '';
    display: block;
    margin-top: 100%;
}

4、画一条0.5px的线

transform: scale(0.5, 0.5);

// viewport只针对于移动端，只在移动端上才能看到效果
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

5、设置小于12px的字体

在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。

• 使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。

• 使用css3的transform缩放属性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/...；

• 使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

6、如何解决1px问题

1px CSS 像素，在这个设备上实际会用 2 个物理像素单元来进行渲染，所以实际看到的一定会比 1px 粗一些

• 媒体查询设置0.5px的值

// 兼容性不行，IOS 系统需要8及以上的版本，安卓系统则直接不兼容
<div id="container" data-device={{window.devicePixelRatio}}></div>

#container[data-device="2"] {
  border:0.5px solid #333
}

• 伪元素先放大后缩小
• viewport缩放解决

参考文章：juejin.cn/post/690553…