offer收割之CSS篇

一、CSS 基础

1. CSS 选择器及其优先级

选择器	格式	优先级权重
内联样式	<span style='color:red'>	1000
id 选择器	#id	100
类选择器	#classname	10
属性选择器	a[ref=“eee”]	10
伪类选择器	li:last-child	10
标签选择器	div	1
伪元素选择器	li::after	1
相邻兄弟选择器	h1+p	0
子选择器	ul>li	0
后代选择器	li a	0
通配符选择器	*	0

权重计算规则

• 第一优先级：!important会覆盖页面内任何位置的元素样式
• 1.内联样式，如style="color: green"，权值为1000
• 2.ID选择器，如#app，权值为0100
• 3.类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0010
• 4.标签、伪元素选择器，如div::first-line，权值为0001
• 5.通配符、子类选择器、兄弟选择器，如*, >, +，权值为0000
• 6.继承的样式没有权值

比较规则

• 1.1000 > 0100，从左向右逐个比较，前一级相等才能往后比较
• 2.无论是行内样式、内部样式还是外部样式，都是按照以上提到的权重方式进行比较，面试的时候遇到优先级比较，答案往往是：行内>id>class>元素(标签)，我们以为给了能令面试官满意的答案，其实不然，比如对同一个元素操作，在权重相等的情况下，后面的样式会覆盖前面的，这样我们给出来的答案就不成立了
• 3.权重相同的情况下，位于后面的样式会覆盖前面的样式
• 4.通配符、子选择器、兄弟选择器，虽然权重为0000，但是优先于继承的样式

注意： 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式（通过link或者@import引入的） > 浏览器用户自定义样式 > 浏览器默认样式。

具体比较：

找到所有作用于p标签的同一color属性 计算，最后决定哪个color生效。

p {color: yellowgreen} /* 0,0,0,1 */
p {color: red} // 0001
.aa p {color: blue} 0011
.aa .bb p {color: black} 0021

具体浏览器调试面板中下面的类选择器优先级默认递减（上面的优先级高，因为上面的类定义在文件行数在后面---同样权重后面的覆盖前面）

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

一、无继承性的属性

1. display：规定元素应该生成的框的类型
2. 文本属性：

• vertical-align：垂直文本对齐
• text-decoration：规定添加到文本的装饰
• text-shadow：文本阴影效果
• white-space：空白符的处理
• unicode-bidi：设置文本的方向

1. 盒子模型的属性：width、height、margin、border、padding
2. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
3. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
4. 生成内容属性：content、counter-reset、counter-increment
5. 轮廓样式属性：outline-style、outline-width、outline-color、outline
6. 页面样式属性：size、page-break-before、page-break-after
7. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1. 字体系列属性

• font-family：字体系列
• font-weight：字体的粗细
• font-size：字体的大小
• font-style：字体的风格

2. 文本系列属性

• text-indent：文本缩进
• text-align：文本水平对齐
• line-height：行高
• word-spacing：单词之间的间距
• letter-spacing：中文或者字母之间的间距
• text-transform：控制文本大小写（就是 uppercase、lowercase、capitalize 这三个）
• color：文本颜色

3. 元素可见性

• visibility：控制元素显示隐藏

所以父元素visibility：hidden 子元素会继承，子孙节点消失是由于继承了hidden，通过设置子元素的visibility:visible可以让子孙节点显示

4. 列表布局属性

• list-style：列表风格，包括 list-style-type、list-style-image 等

5. 光标属性

• cursor：光标显示为何种形态

3. display 的属性值及其作用

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

4. 隐藏元素的方法有哪些

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

6. link 和@import 的区别

两者都是外部引用 CSS 的方式，它们的区别如下：

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

7.css3 transition 和 animation 的区别

• transition 是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于 flash 的补间动画，设置一个开始关键帧，一个结束关键帧。
• animation 是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于 flash 的补间动画，但是它可以设置多个关键帧（用@keyframe 定义）完成动画。

p {
    transition: margin-right 2s ease-in-out;
}
p {
    animation: 3s ease-in 1s infinite reverse both running slidein;
}

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

1. 伪类表示被选择元素的某种状态，例如:hover

2. 伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"（并不会在文档中生成），只存在于css中，所以叫"伪"的元素，例如:before和:after

核心区别在于，是否创造了“新的元素”

// 常见的伪元素
p::before {content:"第一章：";}   //::before 和 :before是一样的
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

• 伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

// 常见的伪类
a:hover {color: #FF00FF}
p:first-child {color: red}

获取第二个p标签子元素

使用伪类选择器

• :first-child，选取当前选择器下第一个元素。
• :last-child，和 first-child 相反，选取当前选择器下最后一个元素。
• :nth-child(n) 选择第n个子元素

:nth-child(2) 选择第二个子元素

11. 对盒模型的理解

CSS3 中的盒模型有以下两种：标准盒子模型、IE 盒子模型 盒模型都是由四个部分组成的，分别是 margin、border、padding 和 content。

标准盒模型和 IE 盒模型的区别在于设置 width 和 height 时，所对应的范围不同：

• 标准盒模型的 width 和 height 属性的范围只包含了 content，
• IE 盒模型的 width 和 height 属性的范围包含了 border、padding 和 content。

可以通过修改元素的 box-sizing 属性来改变元素的盒模型：

• box-sizing: content-box表示标准盒模型（默认值）
• box-sizing: border-box表示 IE 盒模型（怪异盒模型）

12. 为什么有时候⽤transform: translate(x,x)来改变位置⽽不是定位(position)？

CSS**transform**属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型（只是视觉图层，布局图层没动）的坐标空间来实现的。

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

注意：transform 既不属于重排也不属于重绘，而是属于合成。

合成 是修改一个既不要布局也不要绘制的属性之后，渲染引擎直接跳过布局和图层绘制的阶段，只执行后续的 合成操作 的过程

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

为了美观，通常是一个<li></li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度，并被浏览器渲染。

解决办法：

（1）将所有<li>写在同一行。不足：代码不美观。

（2）将<ul>内的字符尺寸直接设为 0，即 font-size:0。不足：<ul>中的其他字符尺寸也被设为 0（因为字体属性会继承），需要额外重新设定其他字符尺寸，且在 Safari 浏览器依然会出现空白间隔。

空白符也是字符，只要是字符就会联想字体，字体大小之类的。所以去除空白符的存在就设置字体大小为零（font-size: 0;）

14. CSS3 中有哪些新特性

• 新增各种 CSS 选择器 （: not(.input)：所有 class 不是“input”的节点）
• 圆角 （border-radius:8px）
• 多列布局 （multi-column layout）
• 阴影和反射 （Shadoweflect）
• 文字特效 （text-shadow）
• 文字渲染 （Text-decoration）
• 线性渐变 （gradient）
• 旋转 （transform）
• 增加了旋转,缩放,定位,倾斜,动画,多背景

16. 常见的图片格式及使用场景

（1）BMP，是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩，所以 BMP 格式的图片通常是较大的文件。

（2）GIF是无损的、采用索引色的点阵图。采用 LZW 压缩算法进行编码。文件小，是 GIF 格式的优点，同时，GIF 格式还具有支持动画以及透明的优点。但是 GIF 格式仅支持 8bit 的索引色，所以 GIF 格式适用于对色彩要求不高同时需要文件体积较小的场景。

（3）JPEG是有损的、采用直接色的点阵图。JPEG 的图片的优点是采用了直接色，得益于更丰富的色彩，JPEG 非常适合用来存储照片，与 GIF 相比，JPEG 不适合用来存储企业 Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较 GIF 更大。

（4）PNG-8是无损的、使用索引色的点阵图。PNG 是一种比较新的图片格式，PNG-8 是非常好的 GIF 格式替代者，在可能的情况下，应该尽可能的使用 PNG-8 而不是 GIF，因为在相同的图片效果下，PNG-8 具有更小的文件体积。除此之外，PNG-8 还支持透明度的调节，而 GIF 并不支持。除非需要动画的支持，否则没有理由使用 GIF 而不是 PNG-8。

（5）PNG-24是无损的、使用直接色的点阵图。PNG-24 的优点在于它压缩了图片的数据，使得同样效果的图片，PNG-24 格式的文件大小要比 BMP 小得多。当然，PNG24 的图片还是要比 JPEG、GIF、PNG-8 大得多。

（6）SVG是无损的矢量图。SVG 是矢量图意味着 SVG 图片由直线和曲线以及绘制它们的方法组成。当放大 SVG 图片时，看到的还是线和曲线，而不会出现像素点。SVG 图片在放大时，不会失真，所以它适合用来绘制 Logo、Icon 等。

（7）WebP是谷歌开发的一种新图片格式，WebP 是同时支持有损和无损压缩的、使用直接色的点阵图。从名字就可以看出来它是为 Web 而生的，什么叫为 Web 而生呢？就是说相同质量的图片，WebP 具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。目前只有 Chrome 浏览器和 Opera 浏览器支持 WebP 格式，兼容性不太好。

• 在无损压缩的情况下，相同质量的 WebP 图片，文件大小要比 PNG 小 26%；
• 在有损压缩的情况下，具有相同图片精度的 WebP 图片，文件大小要比 JPEG 小 25%~34%；
• WebP 图片格式支持图片透明度，一个无损压缩的 WebP 图片，如果要支持透明度只需要 22%的格外文件大小。

17. 对 CSSSprites 的理解---了解即可

CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用 CSS 的 background-image，background-repeat，background-position 属性的组合进行背景定位。

优点：

• 利用CSS Sprites能很好地减少网页的 http 请求，从而大大提高了页面的性能，这是CSS Sprites最大的优点；
• CSS Sprites能减少图片的字节，把 3 张图片合并成 1 张图片的字节总是小于这 3 张图片的字节总和。

缺点：

• 在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
• CSSSprites在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
• 维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

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

（1）line-height 的概念：

• line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
• 如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；
• 一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
• 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；
• line-height 和 height 都能撑开一个高度；

（2）line-height 的赋值方式：（行高最终的计算和font-size有关）

• 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
• 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
• 百分比：将计算后的值传递给后代

21. CSS 优化和提高性能的方法有哪些？

加载性能：

（1）css 压缩：将写好的 css 进行打包压缩，可以减小文件体积。

（2）css 单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但 margin-bottom:bottom;margin-left:left;执行效率会更高。

（3）减少使用@import，建议使用 link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

选择器性能：

（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS 选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

（2）如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。

（3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。

（4）尽量少的去对标签进行选择，而是用 class。

（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。

（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能：

（1）慎重使用高性能属性：浮动、定位。

（2）尽量减少页面重排、重绘。

（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少 css 文档体积。

（4）属性值为 0 时，不加单位。

（5）属性值为浮动小数 0.**，可以省略小数点之前的 0。

（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。

（7）不使用@import 前缀，它会影响 css 的加载速度。

（8）选择器优化嵌套，尽量避免层级过深。

（9）css 雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。

（10）正确使用 display 的属性，由于 display 的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。

（11）不滥用 web 字体。对于中文网站来说 WebFonts 可能很陌生，国外却很流行。web fonts 通常体积庞大，而且一些浏览器在下载 web fonts 时会阻塞页面渲染损伤性能。

可维护性、健壮性：

（1）将具有相同属性的样式抽离出来，整合并通过 class 在页面中进行使用，提高 css 的可维护性。

（2）样式与内容分离：将 css 代码定义到外部 css 中。

22. CSS 预处理器/后处理器是什么？为什么要使用它们？ CSS 本身不属于可编程语言，当前端项目逐渐庞大之后 CSS 的维护也愈加困难。CSS 预处理器所做的本质上是为 CSS 增加一些可编程的特性，通过变量、嵌套、简单的程序逻辑、计算、函数等特性，通过工程化的手段让 CSS 更易维护，提升开发效率。

其它css预处理器语言：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。

使用原因：

• 结构清晰， 便于扩展
• 可以很方便的屏蔽浏览器私有语法的差异
• 可以轻松实现多重继承
• 完美的兼容了CSS代码，可以应用到老项目中

sass和less区别？

1.变量符不一样

SASS 变量符是 $,LESS 变量符是 @

扩展阅读

1. CSS Modules[5]

CSS Modules 和前文介绍的预处理器不同，不是可编程化的 CSS，而仅是给 CSS 文件加入了作用域和模块依赖，主要是为了解决 CSS 全局污染的痛点以及为了解决全局污染而嵌套过深的问题。使用示例如下：

/* style.css */
.hzfeTitle {
  color: #666;
  font-size: 20px;
}
复制代码

import style from "./style.css";

document.body.innerHTML = `<h1 class="${style.hzfeTitle}">HZFEStudio</h1>`;

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

以下是常用的 CSS 伪元素：

• ::after
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::selection

（1）冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

（2）::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

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

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

• 有空格时会有间隙，可以删除空格解决；
• margin正值时，可以让margin使用负值解决；
• 使用font-size时，可通过设置font-size:0、letter-spacing、word-spacing解决；

25. 单行、多行文本溢出隐藏

• 单行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

• 多行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

注意：由于上面的三个属性都是 CSS3 的属性，不是所有浏览器都可以兼容，所以要在前面加一个-webkit- 来兼容一部分浏览器。

26. Sass、Less 是什么？为什么要使用他们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

为什么要使用它们？

• 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。
• 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。
• 嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系 ；
• 支持定义 css 变量；
• 提供计算函数；
• 允许对代码片段进行 extend 和 mixin；
• 支持循环语句的使用；
• 支持将 CSS 文件模块化，实现复用。

27. 对媒体查询的理解？

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

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

29. 如何判断元素是否到达可视区域

以图片显示为例：

• window.innerHeight 是浏览器可视区的高度；
• document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；
• imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；
• 内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

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

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index 值越大就越是在上层。z-index 元素的 position 属性需要是 relative，absolute 或是 fixed且父元素不能为position: relative,且自身不能设置为浮动。

z-index 属性在下列情况下会失效：

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

31. CSS3 中的 transform 有哪些属性

• translate 位移
• rotate 旋转
• scale 缩放
• skew 斜切

更多细节补充：

参考 MDN文档 菜鸟教程

CSS**transform**属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。transform属性可以指定为关键字值none 或一个或多个<transform-function>值。

<transform-function>  CSS数据类型用于对元素的显示做变换。通常，这种变换可以由矩阵表示，并且可以使用每个点上的矩阵乘法来确定所得到的图像。下面简单展示下<transform-function>值都有哪些（来自菜鸟教程，如果想要了解细则请点击这里进入MDN官方文档）

二、页面布局

1. 常见的 CSS 布局单位

常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。

（1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS 像素和物理像素：

• CSS 像素：为 web 开发者提供，在 CSS 中使用的一个抽象单位；
• 物理像素：实际屏幕设备的像素，只与设备的硬件密度有关，任何设备的物理像素都是固定的。1css像素等于1物理像素或者多物理像素由具体设备定，分辨率 1024 * 725 指的就是像素点一共有1024 * 725 同一屏幕 像素点越多越高清。

（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

（3）em 和 rem相对于 px 更具灵活性，它们都是相对长度单位，它们之间的区别：em 相对于父元素，rem 相对于根元素。

• em：  文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认 16px)。(相对父元素的字体大小倍数)。 1em = 16px
• rem：  rem 是 CSS3 新增的一个相对单位，相对于根元素（html 元素）的 font-size 的倍数。作用：利用 rem 可以实现简单的响应式布局，可以利用 html 元素中字体的大小与屏幕间的比值来设置 font-size 的值，以此实现当屏幕分辨率变化时让元素也随之变化。

（4）vw/vh是与视图窗口有关的单位，vw 表示相对于视图窗口的宽度，vh 表示相对于视图窗口高度，除了 vw 和 vh 外，还有 vmin 和 vmax 两个相关的单位。

• vw：相对于视窗的宽度，视窗宽度是 100vw；
• vh：相对于视窗的高度，视窗高度是 100vh；
• vmin：视口高度 vw 和宽度 vh 两者之间的最小值；
• vmax：视口高度 vw 和宽度 vh 两者之间的最大值；

vw/vh 和百分比很类似，两者的区别：

• 百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate 等)
• vw/vm：相对于视窗的尺寸

在可视区域内画一个最大的正方形？

使用vmin

{
   width:  100vmin;
   height: 100vmin;
}

2. px、em、rem 的区别及使用场景

三者的区别：

• px 是固定的像素，一旦设置了就无法因为适应页面大小而改变。
• em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
• em 是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而 rem 是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。

使用场景：

• 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用 px 即可 。
• 对于需要适配各种移动设备，使用 rem，例如需要适配 iPhone 和 iPad 等分辨率差别比较挺大的设备。（可以使用@media 媒体查询 对应设置具体媒体设备样式）

3. 两栏布局的实现

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：

• 利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
}

• 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置 overflow: hidden; 这样右边就触发了 BFC，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }

• 利用 flex 布局，将左边元素设置为固定宽度 200px，将右边的元素设置为 flex:1。（推荐使用）

.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}

• 利用绝对定位，将父级元素设置为相对定位。左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。

.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: tomato;
}
.right {
  margin-left: 200px;
  background: gold;
}

• 利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0。

.outer {
  position: relative;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;
  background: gold;
}

4. 三栏布局的实现

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现：

• 利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的 margin 的值。

.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

• 利用 flex 布局，左右两栏设置固定大小，中间一栏设置为 flex:1。

.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}

• 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的 margin 值，注意这种方式**，中间一栏必须放到最后：**

.outer {
  height: 100px;
}

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}

• 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面(为了优先渲染，因为浏览器是从上往下)，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行（本来都设置为浮动他们是处在一行的但是中间宽度100%就把另外两个挤到下面了，然后margin负值的作用margin-left和margin-top的负值是让元素往左和上移动，margin-right和margin-bottom的负值是让自身在布局中所占位置减少，使下面或者右边的元素向自己移动，所以margin-left:100% 这里百分比都是相对于父级的，所以是向左移动父级的宽度，所以就又移动到上面了，而右边的盒子margin-right: -200px,相当于自身宽度消失这里只是相对其他元素而言，只是自身不占据宽度了，所以移动最右边了），再利用相对定位，分别向左向右移动宽度，消除父盒子设置的padding，定位到两边。

.outer {
  height: 100px;
  padding-left: 100px; 
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;

  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

<div class='outer'>
    <div class='center'></div>
    <div class='left'></div>
    <div class='right'></div>
</div>

• 双飞翼布局，双飞翼布局相对于圣杯布局来说，同样都是三个盒子都设置为float:left 然后左右盒子分别利用margin-left:-100%和margin-right:-200px来移动到两端，只是父盒子并没有设置padding，而是中间的盒子里面又有一个子盒子设置margin-left和margin-right，这样也就不需要左盒子和右盒子通过relative定位移动了

.outer {
  height: 100px;
}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center-child {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}

<div class='outer'>
    <div class='center'>
        <div class='center-child'></div>
    </div>
    <div class='left'></div>
    <div class='right'></div>
</div>

总结： 最后我们来总结一下，双飞翼布局其实和圣杯布局的精髓是一样的，都是通过设置负margin来实现元素的排布，

• 不同的就是html结构，双飞翼是在middle元素内部又设置了一个milddle-inner并设置它的左右margin，而非圣杯布局的最外面的父盒子设置padding，来排除两边元素的覆盖。
• 双飞翼布局可以多了一个html结构，但是可以不用设置left,right元素的定位。

圣杯布局和双飞翼布局参考文章：juejin.cn/post/695548…

5.水平垂直居中的实现

• 利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 translate 来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

.parent {
    position: relative;
}

.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

• 利用绝对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

• 利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 margin 负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}

• 使用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

另外，如果父元素设置了flex布局，只需要给子元素加上margin:auto;就可以实现垂直居中布局

.parent{
    display:flex;
}
.child{
    margin: auto;
}

这里蛮有意思的 如果不在弹性布局中 margin:auto;只能做到水平居中

这其中的道理可以看这篇文章了解一下（具体就是与auto的定义有关）

6. 如何根据设计稿进行移动端适配？

移动端适配主要有两个维度：

• **适配不同像素密度，**针对不同的像素密度，使用 CSS 媒体查询，选择不同精度的图片，以保证图片不会失真；
• **适配不同屏幕大小，**由于不同的屏幕有着不同的逻辑像素大小，所以如果直接使用 px 作为开发单位，会使得开发的页面在某一款手机上可以准确显示，但是在另一款手机上就会失真。为了适配不同屏幕的大小，应按照比例来还原设计稿的内容。

为了能让页面的尺寸自适应，可以使用 rem，em，vw，vh 等相对单位。

7. 对 Flex 布局的理解及其使用场景

Flex 是 FlexibleBox 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列。

以下 6 个属性设置在容器上：

• justify-content 属性定义了项目在主轴上的对齐方式。
• align-items 属性定义项目在交叉轴上如何对齐。
• align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下 6 个属性设置在项目上：

• flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
• flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
• flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
• flex 属性是 flex-grow，flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。

flex: 1 item {flex: 1} flex取一个非负数字，则该值为flex-grow flex-shrink默认为1 flex-basis默认为0%

flex：1 2； 就分别表示 flex-grow 和 flex-shrink

flex 和 grid 有什么区别

Grid 布局即网格布局，是一种新的 CSS 布局模型，antd里面的栅格布局，是一种二维布局，Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上

flex布局是一维布局，flex 布局一次只能处理一个维度上的元素布局

8. 响应式设计的概念及基本原理

响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

关于原理： 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。

关于兼容： 页面头部必须有 meta 声明的viewport。

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

多种方式实现上面 100px 下面自适应的布局

• 定位 + calc 上面元素100px 下面元素利用定位top:100px 然后height: calc(100% - 100px)

• margin-top + calc(100% - 100px)

三、定位与浮动

1. 为什么需要清除浮动？清除浮动的方式

浮动的定义：  非 IE 浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

浮动的工作原理：

• 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
• 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

浮动元素引起的问题？

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素会跟随其后
• 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除浮动的方式如下：

• 给父级 div 定义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;
  }

2. 使用 clear 属性清除浮动的原理？

使用 clear 属性清除浮动，其语法如下：

clear:none|left|right|both

如果单看字面意思，clear:left 是“清除左浮动”，clear:right 是“清除右浮动”，实际上，这种解释是有问题的，因为浮动一直还在，并没有清除。

官方对 clear 属性解释：“元素盒子的边不能和前面的浮动元素相邻”，对元素设置 clear 属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。

还需要注意 clear 属性指的是元素盒子的边不能和前面的浮动元素相邻，注意这里“前面的”3 个字，也就是 clear 属性对“后面的”浮动元素是不闻不问的。考虑到 float 属性要么是 left，要么是 right，不可能同时存在，同时由于 clear 属性对“后面的”浮动元素不闻不问，因此，当 clear:left 有效的时候，clear:right 必定无效，也就是此时 clear:left 等同于设置 clear:both；同样地，clear:right 如果有效也是等同于设置 clear:both。由此可见，clear:left 和 clear:right 这两个声明就没有任何使用的价值，至少在 CSS 世界中是如此，直接使用 clear:both 吧。

一般使用伪元素的方式清除浮动：

.clear::after{
  content:'';
  display: block;
  clear:both;
}

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

3. 对 BFC 的理解，如何创建 BFC

先来看两个相关的概念：

• Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个 Box 就是我们所说的盒模型。
• Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。

块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲：BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。

创建 BFC 的条件：

• 根元素：body；
• 元素设置浮动：float 除 none 以外的值；
• 元素设置绝对定位：position (absolute、fixed)；
• display 值为：inline-block、table-cell、table-caption、flex 等；
• overflow 值为：hidden、auto、scroll；

BFC 的特点：

• 垂直方向上，自上而下排列，和文档流的排列方式一致。
• 在 BFC 中上下相邻的两个容器的 margin 会重叠
• 计算 BFC 的高度时，需要计算浮动元素的高度
• BFC 区域不会与浮动的容器发生重叠
• BFC 是独立的容器，容器内部元素不会影响外部元素
• 每个元素的左 margin 值和容器的左 border 相接触

BFC 的作用：

• 解决 margin 的重叠问题：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。
• 解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为 0。解决这个问题，只需要把父元素变成一个 BFC。常用的办法是给父元素设置overflow:hidden。
• 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }

<div class="left"></div>
<div class="right"></div>

左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了 BFC，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。

4. 什么是 margin 重叠问题？如何解决？

问题描述：

两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。

计算原则：

折叠合并后外边距的计算原则如下：

• 如果两者都是正数，那么就去最大者
• 如果是一正一负，就会正值减去负值的绝对值
• 两个都是负值时，用 0 减去两个中绝对值大的那个

解决办法：

对于折叠的情况，主要有两种：兄弟之间重叠和父子之间重叠

（1）兄弟之间重叠

• 底部元素变为行内盒子：display: inline-block
• 底部元素设置浮动：float
• 底部元素的 position 的值为absolute/fixed

（2）父子之间重叠

• 父元素加入：overflow: hidden
• 父元素添加透明边框：border:1px solid transparent
• 子元素变为行内盒子：display: inline-block
• 子元素加入浮动属性或定位

5. 元素的层叠顺序

层叠顺序，英文称作 stacking order，表示元素发生层叠时有着特定的垂直显示顺序。下面是盒模型的层叠规则：

对于上图，由上到下分别是：

（1）背景和边框：建立当前层叠上下文元素的背景和边框。

（2）负的 z-index：当前层叠上下文中，z-index 属性值为负的元素。

（3）块级盒：文档流内非行内级非定位后代元素。

（4）浮动盒：非定位浮动元素。

（5）行内盒：文档流内行内级非定位后代元素。

（6）z-index:0：层叠级数为 0 的定位元素。

（7）正 z-index：z-index 属性值为正的定位元素。

注意:  当定位元素 z-index:auto，生成盒在当前层叠上下文中的层级为 0，不会建立新的层叠上下文，除非是根元素。

6. position 的属性有哪些，区别是什么

position 有以下属性值：

属性值	概述
absolute	生成绝对定位的元素，相对于 static 定位以外的一个父元素进行定位。元素的位置通过 left、top、right、bottom 属性进行规定。
relative	生成相对定位的元素，相对于其原来的位置进行定位。元素的位置通过 left、top、right、bottom 属性进行规定。
fixed	生成绝对定位的元素，指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮⼀般都是⽤此定位⽅式。 当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先
static	默认值，没有定位，元素出现在正常的文档流中，会忽略 top, bottom, left, right 或者 z-index 声明，块级元素从上往下纵向排布，⾏级元素从左向右排列。
inherit	规定从父元素继承 position 属性的值
sticky	不会脱离文档流，然后相对它的最近滚动祖先（比如overflow：hidden scroll auto等）进行top left等偏移

前面三者的定位方式如下：

• **relative：**元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。

**fixed：**元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。

**absolute：**元素的定位相对于前两者要复杂许多。如果为 absolute 设置了 top、left，浏览器会根据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。如下两个图所示：

7. display、float、position 的关系

（1）首先判断 display 属性是否为 none，如果为 none，则 position 和 float 属性的值不影响元素最后的表现。

（2）然后判断 position 的值是否为 absolute 或者 fixed，如果是，则 float 属性失效，并且 display 的值应该被设置为 table 或者 block，具体转换需要看初始转换值。

（3）如果 position 的值不为 absolute 或者 fixed，则判断 float 属性的值是否为 none，如果不是，则 display 的值则按上面的规则转换。注意，如果 position 的值为 relative 并且 float 属性的值存在，则 relative 相对于浮动后的最终位置定位。

（4）如果 float 的值为 none，则判断元素是否为根元素，如果是根元素则 display 属性按照上面的规则转换，如果不是，则保持指定的 display 属性值不变。

总的来说，可以把它看作是一个类似优先级的机制，"position:absolute"和"position:fixed"优先级最高，有它存在的时候，浮动不起作用，'display'的值也需要调整；其次，元素的'float'特性的值不是"none"的时候或者它是根元素的时候，调整'display'的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display'特性值同设置值。

8. absolute 与 fixed 共同点与不同点

共同点：

• 改变行内元素的呈现方式，将 display 置为 inline-block
• 使元素脱离普通文档流，不再占据文档物理空间
• 覆盖非定位文档元素

不同点：

• absolute 与 fixed 的根元素不同，absolute 的根元素可以设置，fixed 根元素是浏览器。
• 在有滚动条的页面中，absolute 会跟着父元素进行移动，fixed 固定在页面的具体位置。

9. 对 sticky 定位的理解---了解即可

sticky 英文字面意思是粘贴，所以可以把它称之为粘性定位。语法：position: sticky;  基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative;  而当页面滚动超出目标区域时，它的表现就像 position:fixed; ，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

四、场景应用

1. 实现一个三角形

CSS 绘制三角形主要用到的是 border 属性，也就是边框。

平时在给盒子设置边框时，往往都设置很窄，就可能误以为边框是由矩形组成的。实际上，border 属性是右三角形组成的，下面看一个例子：

div {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orange blue red green;
}

将元素的长宽都设置为 0，显示出来的效果是这样的：

所以可以根据 border 这个特性来绘制三角形：

（1）三角 1

div {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent; // transparent表示完全透明的颜色
    border-left: 50px solid transparent;
}

（2）三角 2

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

（3）三角 3

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

（4）三角 4

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

（5）三角 5

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

还有很多，就不一一实现了，总体的原则就是通过上下左右边框来控制三角形的方向，用边框的宽度比来控制三角形的角度。

2. 实现一个扇形

用 CSS 实现扇形的思路和三角形基本一致，就是多了一个圆角的样式，实现一个 90° 的扇形：

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

3. 实现一个宽高自适应的正方形

• 利用 vw 来实现：

.square {
  width: 10%;
  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()的方式，该方法用来定义元素的 2D 缩放转换：

transform: scale(0.5,0.5);

• 采用 meta viewport 的方式

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这样就能缩放到原来的 0.5 倍，如果是 1px 那么就会变成 0.5px。viewport 只针对于移动端，只在移动端上才能看到效果

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 问题指的是：在一些 Retina屏幕 的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。它们之间的比例关系有一个专门的属性来描述：

window.devicePixelRatio = 设备的物理像素 / CSS像素。

打开 Chrome 浏览器，启动移动端调试模式，在控制台去输出这个 devicePixelRatio 的值。这里选中 iPhone6/7/8 这系列的机型，输出的结果就是 2：

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

解决****1px 问题的三种思路：

思路一：直接写 0.5px

如果之前 1px 的样式这样写：

border:1px solid #333

可以先在 JS 中拿到 window.devicePixelRatio 的值，然后把这个值通过 JSX 或者模板语法给到 CSS 的 data 里，达到这样的效果（这里用 JSX 语法做示范）：

<div id="container" data-device={{window.devicePixelRatio}}></div>

然后就可以在 CSS 中用属性选择器来命中 devicePixelRatio 为某一值的情况，比如说这里尝试命中 devicePixelRatio 为 2 的情况：

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

直接把 1px 改成 1/devicePixelRatio 后的值，这是目前为止最简单的一种方法。这种方法的缺陷在于兼容性不行，IOS 系统需要 8 及以上的版本，安卓系统则直接不兼容。

思路二：伪元素先放大后缩小

这个方法的可行性会更高，兼容性也更好。唯一的缺点是代码会变多。

思路是**先放大、后缩小：*在目标元素的后面追加一个 ::after 伪元素，让这个元素布局为 absolute 之后、整个伸展开铺在目标元素上，然后把它的 *宽和高都设置为目标元素的两倍，border 值设为 1px。接着借助 CSS 动画特效中的放缩能力，把整个伪元素缩小为原来的 50%。此时，伪元素的宽高刚好可以和原有的目标元素对齐，而 border 也缩小为了 1px 的二分之一 ，间接地实现了 0.5px 的效果。

代码如下：

#container[data-device="2"] {
    position: relative;
}
#container[data-device="2"]::after{
      position:absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      content:"";
      transform: scale(0.5);
      transform-origin: left top;
      box-sizing: border-box;
      border: 1px solid #333;
    }
}

思路三：viewport 缩放来解决

这个思路就是对 meta 标签里几个关键属性下手：

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

这里针对像素比为 2 的页面，把整个页面缩放为了原来的 1/2 大小。这样，本来占用 2 个物理像素的 1px 样式，现在占用的就是标准的一个物理像素。根据像素比的不同，这个缩放比例可以被计算为不同的值，用 js 代码实现如下：

const scale = 1 / window.devicePixelRatio;
// 这里 metaEl 指的是 meta 标签对应的 Dom
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);

这样解决了，但这样做的副作用也很大，整个页面被缩放了。这时 1px 已经被处理成物理像素大小，这样的大小在手机上显示边框很合适。但是，一些原本不需要被缩小的内容，比如文字、图片等，也被无差别缩小掉了。

css和js两种方式实现div右移1000px动画

css

利用动画属性animation 以及@keyframes（关键帧）然后控制相对定位的盒子的left属性

#box{
        width: 100px;
        height: 100px;
        background-color: brown;
        position: relative;
        animation: mytest 3s linear 1s;
        }
        @keyframes mytest {
        1%{left: 0px;}
        20%{left: 200px;}
        50%{left: 500px;}
        70%{left: 700px;}
        100%{left: 1000px;}
    }

js

实现思想：利用getElementById 获取到div盒子，然后绑定一个点击事件，再定义一个触发函数，

函数体里定义一个setInterval定时器，判断盒子的偏移量offsetLeft 是否等于1000，不等于就设置盒子的css relative 然后设置它的left=5，然后定时时间设为50ms.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    #box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
    }
</style>
<body>
    <div id="box"></div>
</body>
</html>
<script>
    var oBox = document.getElementById("box")
    oBox.onclick = function(){
        moveDiv(1000)
    }
    function moveDiv(data){
        clearInterval(mytimer)
        var mytimer = setInterval(function(){
            let speed = 10;
            if(oBox.offsetLeft != data){
                oBox.style.left = oBox.offsetLeft + speed + 'px'
            }else{
                clearInterval(mytimer)
            }
        },50)
    }
</script>

如何实现主题切换功能

主题切换就比如夜间模式和浅色模式的切换，主要就是通过1.设置全局样式（包括字号，背景颜色等），然后在body上面定义两个不同的类，然后用js来给document.body.classname赋予对应的值达到切换的效果

第一步设置全局样式

全局样式以--开头，因为后续要用到var()方法获取对应属性值

//浅色模式
body.right {
  --primary-color: #ff0064;
  --sun-color: #eec413;
  --link-color: #4299e1;
}
//深色模式
body.dark {
  background: var(--bg);
  --sun-color: #e684af;
  --bg: #282c35;
  --bg-second: #363c48;
  --rgb-bg-second: rgba(54, 60, 72);
}

第二步改变body的class名

const checkTheme = () => {
    if (dark) {
       document.body.className = "dark"
    } else {
        document.body.className = "right"
    }
 }

最后一步:接下来的背景样式，字体样式都要引用全局样式

用var(),引入class样式

body {
  background-color: var(--bg);  // 就是使用--bg的值
}