高频前端面试题汇总之CSS+场景题篇

一、CSS基础

1. CSS选择器及其优先级

选择器	格式	优先级权重
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声明的样式的优先级最高
• 如果优先级相同，则最后出现的样式生效
• 继承得到的样式的优先级最低
• 选择器从右往左解析
• 内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

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

一、无继承性的属性

display、width、height、margin、border、padding、background、float、position、overflow、z-index

二、有继承性的属性

font-weight、font-size、text-align、line-height、color、visibility

3. display的属性值及其作用

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

4. block、inline和inline-block的区别

（1）block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性

（2）inline： 元素不会独占一行，设置width、height属性无效。可以设置水平方向的margin和padding属性，但是不能设置垂直方向的

（3）inline-block： 行内块元素，具有块级元素、行内元素的特性

（4）行内元素

• 设置宽高无效
• 可以设置水平方向的margin和padding属性，但是不能设置垂直方向的
• 不会自动换行

（5）块级元素

• 可以设置宽高
• 设置margin和padding都有效
• 可以自动换行

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

display: none 渲染树不会包含该渲染对象，元素不会在页面中占据位置

visibility: hidden 元素在页面中仍占据空间

opacity: 0 将元素的透明度设置为 0，以此来实现元素的隐藏

position: absolute 通过使用绝对定位将元素移除可视区域内

z-index: 设置负值使其他元素遮盖住该元素

transform: scale(0,0) 将元素缩放为 0，来实现元素的隐藏

6. link和@import的区别

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

1. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
2. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持
3. link可以使用 js 动态引入，@import不行

7. transition和animation的区别

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

8. display:none与visibility:hidden的区别

相同点： 隐藏元素，不可见

区别：

1. display:none是非继承属性，visibility:hidden是继承属性

2. display:none 会触发回流重绘，而 visibility:hidden 只会触发重绘

3.  display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间
visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间

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

伪元素： 也称为伪对象，是一个虚拟的元素，他会在元素的前后插入额外的元素，但是这些元素实际上并不在文档中生成。

p::before {content:"第一章：";}
p::after {content:"Hot!";}

伪类： 将特殊的效果添加到元素中，可以用来设置鼠标悬停样式、元素获取焦点样式，不会产生新的元素。

a:hover {color: #FF00FF}

区别： 1. 可以同时使用多个伪类，但只能同时使用一个伪元素； 2. 伪类单冒号，伪元素双冒号； 3.是否创造了新的元素

10. 对盒模型的理解

CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

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

标准盒模型：width = content
IE盒模型：  width = border+padding+content

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

box-sizeing: content-box  标准盒模型（默认值）
box-sizeing: border-box   IE盒模型（怪异盒模型）

11. 为什么有时候⽤translate来改变位置而不是定位

translate 是 transform 属性的⼀个值，改变transform或opacity不会触发回流或重绘；⽽改变绝对定位会触发回流和重绘。

直接使用left、top改变位置, 主线程需要频繁计算元素位置, 确认绘制顺序, 合成渲染帧； 而transform在合成器线程中执行, 不涉及主线程, 不需要重新计算样式

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

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

解决办法：

1. 为<li>设置float:left。不足：有些容器是不能设置浮动

2. 将所有<li>写在同一行。不足：代码不美观

3. 将<ul>内的字符尺寸直接设为0，即font-size:0。
不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸

4. 消除<ul>的字符间隔letter-spacing:-8px。
不足：需要将<li>内的字符间隔设为默认letter-spacing:normal

13. 对 CSSSprites 的理解

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

优点：

1. 减少网页的http请求，从而大大提高了页面的性能
2. 能减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和

缺点：

1. 在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片
2. 开发麻烦，需要借助photoshop来对每个背景单元测量其准确的位置

14. margin 和 padding 的使用场景

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

15. line-height 继承问题

下面有一段代码，请问div的行高是多少？

答案是40px 关于line-height 继承问题主要有以下三种情况：

1. 当line-height的值是百分比的时候，继承的是计算之后的结果（ 20 * 200%=40）
2. 当line-height的是多少px时，直接继承
3. 当line-height的值是比例的时候，比如line-height:1.5,那么它的行高就是14*1.5 = 21px

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

1. 将写好的css进行打包压缩，可以减小文件体积
3. 减少使用@import，建议使用link
4. 避免使用通配规则，如*{}计算次数惊人
5. 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则
6. 慎重使用高性能属性：浮动、定位
7. 尽量减少页面重排、重绘
8. 属性值为0时，不加单位
9. 选择器优化嵌套，尽量避免层级过深
10. 使用css雪碧图

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

冒号(:)用于伪类，双冒号(::)用于伪元素。 :before和::before写法是等效的; :after和::after写法是等效的。:before/:after是CSS2的写法，::before/::after是CSS3的写法

18. display:inline-block 什么时候会显示间隙？如何解决？

同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”，解决方法如下：

1. 删除空格
2. margin使用负值
3. 设置font-size: 0
4. 设置letter-spacing: 0
5. 设置word-spacing: 0

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

单行文本溢出

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

多行文本溢出

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

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

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index属性在下列情况下会失效：

1. 父元素position为relative时，子元素的z-index失效
解决：父元素position改为absolute或static

2. 元素没有设置position属性为非static属性
解决：设置该元素的position属性为relative，absolute或是fixed中的一种

3. 元素在设置z-index的同时还设置了float浮动
解决：float去除，改为display：inline-block

21.常见的布局方法有哪些？优缺点是什么？

页面布局常用的方法有浮动、定位、flex、grid网格布局

浮动：

• 优点：兼容性好
• 缺点：浮动会脱离标准文档流，因此要清除浮动

绝对定位：

• 优点：快捷
• 缺点：导致子元素也脱离了标准文档流，可实用性差

flex 布局：

• 优点：解决上面两个方法的不足，flex布局比较完美。移动端基本用 flex布局
• 缺点：兼容性差

网格布局（grid）：

• 优点：代码量简化了很多

22. less和sass里的深度选择器是什么，怎么用？

在项目开发时，对于使用的一些组件库，例如element-ui，在有些时候会不符合 ui 的设计图，这时候我们就要修改一下组件的样式。

当 style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。去除后则没有这种效果，不过这种方法可能会导致全局污染，不推荐。这个时候就需要用深度选择器了。

less: /deep/ 新版本语法：:deep(类名)

sass：::deep

23. 介绍下粘性定位（sticky）

粘性定位：属于相对定位和固定定位的结合体，在滑动过程中，元素距离其父元素的距离达到粘性定位的要求时(比如top：100px)；此时会变成固定定位，固定到适当位置。设置了粘性定位的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

24. space-between、space-evenly 和 space-around 的区别？

这个是 flex 布局的内容，其实就是一个边距的区别。

space-between：两端对齐，左右两个子项目贴住边缘
space-around：每个子项目左右方向的 margin 相等，所以两个item中间的间距会比较大
space-evenly：任何两个项目之间的间距相等

25. 浏览器是怎样解析CSS选择器的？

CSS选择器是从右向左解析的： 若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，在第一步就筛选掉了大量的不符合条件的最右节点。

26. CSS3有哪些新特性

圆角效果 border-radius
边框阴影 box-shadow
线性渐变 liner-gradient
翻转 transform
过渡效果 transition
媒体查询 @media
盒子模型 box-sizing
弹性盒布局 Flexbox
动画 animation
文本阴影 text-shadow

27. 元素竖向的百分比设定是相对于容器的高度吗

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的。但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom ，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

28. 为什么要清除浮动

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，后面的元素会往上跑，从而被浮动元素覆盖，为了解决这些问题，此时就需要在该元素中清除浮动。

29. 清除浮动的几种方式

• 父元素添加overflow:hidden
• 父元素设置height
• 在父元素中最后设置一个块级元素, 设置clear:both

.clearfix::after{
  display:block;
  content:"";
  clear:both;
}  
/ *IE6清除浮动的方式 只有IE6-IE7执行，其他浏览器不执行*/
.clearfix{
    zoom: 1;
}

30. 如何解决a标点击后hover事件失效的问题?

改变a标签css属性的排列顺序就可以了：

link → visited → hover → active

比如下面错误的代码顺序：

a:hover{
  color: green;
  text-decoration: none;
}
a:visited{ /* visited在hover后面，这样的话hover事件就失效了 */
  color: red;
  text-decoration: none;
}

正确的做法是将两个事件的位置调整一下。

注意⚠️各个阶段的含义：

a:link：未访问时的样式，一般省略成a 
a:visited：已经访问后的样式 
a:hover：鼠标移上去时的样式 
a:active：鼠标按下时的样式

31. margin 负值问题

margin-right为负值时，自身不会移动，右侧元素会向左移动相应局距离

margin-left为负值时,元素自身向左移动相应距离

margin-bottom为负值时，自身不会移动，底部侧元素会向上移动相应局距离

margin-top为负值时,元素自身向上移动相应距离

32. inline 元素水平处置居中

水平居中：text-align:center
垂直居中：line-height = height

33. nth-child和nth-of-type 有什么区别

• nth-child 选择的是父元素下的所有子元素，无论其类型是什么
• nth-of-type 选择的是父元素下指定类型的子元素

/* 选择第二个子元素，无论其类型是什么 */
.parent :nth-child(2) {
  color: red;
}

/* 选择第二个 span 子元素 */
.parent span:nth-of-type(2) {
  color: blue;
}

34. 为什么要初始化CSS样式?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化

往往会出现浏览器之间的⻚⾯显示差异。

35. 行内元素float:left后是否变为块级元素？

⾏内元素设置成浮动之后变得更加像是 inline-block（⾏内块元素，设置成这个属性的元素会同时拥有⾏内和块级的特性）

36. 在网页中的应该使用奇数还是偶数的字体？

偶数字号相对更容易和 web 设计的其他部分构成⽐例关系

37. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最⼩间隔为 1/60*1000ms ＝ 16.7ms

38. 列出你所知道可以改变页面布局的属性

position 、 display 、 float 、 width 、 height 、 margin 、 padding

39. 什么是外边距重叠？重叠的结果是什么？

垂直方向相邻的两个盒⼦（兄弟关系/祖先关系）的外边距可以结合成⼀个单独的外边距，这种合并外边距的⽅式被称为折叠。折叠结果遵循下列计算规则：

1.两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

2.两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

3.两个外边距⼀正⼀负时，折叠结果是两者的相加的和。

40. rgba()和opacity有什么区别？

rgba() 和 opacity 都能实现透明效果，区别如下：

1.opacity 作⽤于元素，以及元素内的所有内容（子元素）的透明度，设置的透明度会被子元素继承

2.rgba() 只对该元素的背景色有影响，设置的透明度不会被子元素继承

41. CSS的content属性有什么作用？

CSS 的 content 属性专门应用在 before/after 伪元素上，⽤于来插⼊⽣成内容，最常⻅的应⽤是利⽤伪类清除浮动。

/**⼀种常⻅利⽤伪类清除浮动的代码**/
.clearfix:after {
    content:"."; //这⾥利⽤到了content属性
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}
.clearfix {
    *zoom:1;
}

42. 如何使用CSS实现硬件加速？

硬件加速是指通过创建独⽴的复合图层，让GPU来渲染这个图层，从⽽提⾼性能。⼀般触发硬件加速的 CSS 属性有 transform 、 opacity 、 filter 。

43. 说⼀说CSS3的animation

animation 是 CSS3新增的动画属性，这个css3动画的每⼀帧是通过 @keyframes来声明的

keyframes 声明了动画的名称，通过 from 、 to 或者是百分⽐来定义

每⼀帧动画元素的状态，通过 animation-name 来引⽤这个动画，
    
同时也可以定义动画运⾏的时⻓、动画开始时间、动画播放⽅向、动画循环次数、动画播放的⽅式，

这些相关的动画⼦属性有： 
    
    animation-name 定义动画名
    animation-duration 定义动画播放的时⻓
    animation-delay 定义动画延迟播放的时间 
    animation-direction 定义动画的播放⽅向 
    animation-iteration-count 定义播放次数
    animation-fill-mode 定义动画播放之后的状态
    animation-play-state 定义播放状态，如暂停运⾏等

44. 前端实现动画的方式？

1.CSS3的transition属性
2.CSS3的animation属性
3.原生JS动画（setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式）
4.使用canvas绘制动画
5.SVG动画
6.Jquery的animate函数
7.使用gif图片
    
区别：
1.简单动画：CSS优于JS   复杂动画：JS优于CSS
2.JS比较灵活，而且没有兼容性问题   CSS有浏览器兼容性问题
3.性能方面：CSS优于JS，CSS动画通过GUI解析，JS动画需要经过JS引擎解析，然后再进行GUI解析渲染

45. flex:1 是什么，什么时候会用到?

flex: 1 --> flex: 1 1 0% 有剩余空间就放大，空间不够就缩小，项目长度为0

flex: auto --> flex: 1 1 auto 有剩余空间就放大，不够就缩小，项目长度为原本的长度

flex：1 是 flex-grow、flex-shrink、flex-basis 三个属性的缩写

（1）flex-grow：定义项目的放大比例

默认为0：即使存在剩余空间也不会放大
所有项目的flex-grow为1：等分剩余空间
flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍

（2）flex-shrink：定义项目的缩小比例

默认为1：如果空间不足，该项目将缩小
所有项目的flex-shrink为1：当空间不足时，缩小的比例相同
flex-shrink为0：空间不足时，该项目不会缩小
flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍

（3）flex-basis：定义在分配多余空间之前，项目在主轴方向的初始大小

默认值为auto：项目原本大小
设置后项目将占据固定空间

使用场景：当希望元素充分利用剩余空间，同时不会侵占其他元素应有的宽度时

• 想要让某个盒子把剩余的空间占满时，单独对某个盒子添加
• 想要小盒子等分大盒子的时候，对每一个小盒都添加fex:1;
• 如果一个大盒子里面有很多个小盒子，其中有不止一个盒子设置了flex:1;其他盒子先使用空间，使用了fex:1的盒子再平分剩余空间

注意：flex:1 的优先级比 width 高，可能会覆盖 width

46. 说说px、em、 rem、vh、vw 的区别

1、px：相对于显示器屏幕分辨率而言的

2、em：基准点为父节点字体的大小

3、rem：相对于根元素 html 的字体大小

4、vh and vw：即 view width （可视窗口宽度） 和 view height （可视窗口高度）。1vw 就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一，其中 100vw 100vh 占满屏幕。

47. margin: 0 auto什么时候会失效

结论：浮动、绝对定位、固定定位的盒子失效。相对定位有效，但是如果left值不为0，在水平方向上不会居中，因为偏差了一个left值。

对于带有宽度的块级元素，margin: 0 auto是不会失效的。

对于浮动的盒子，margin auto会失效。

对于没有偏移的相对定位的盒子，margin: 0 auto是有效的。

对于有上下边偏移的相对定位的盒子，margin: 0 auto是有效的。

对于有左右边偏移的相对定位的盒子，margin: 0 auto也是有效的，只是在居中的基础上会偏差一个left或right值。当left或right为0时，水平居中。

对于绝对定位（无论有没有边偏移）的盒子，margin: 0 auto失效。

固定定位是特殊的绝对定位，所以对于有固定定位的盒子，margin: 0 auto也是失效的，解决方法同上。 解决办法是：left：50%；margin-left:负的盒子宽度的一半.

48. 谈谈你对line-height 的理解

line-height 用于设置行间的距离（行高），行高指的是字母的大小(font-size)和字母的上下边缘(字母大小 + 上下空白)。 

所以，文本单行占据的高度不是font-size来决定的，而是由line-height来决定的。

line-height的写法

（1）关键词

line-height: normal

取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2。

（2）长度px、em

<p>udemy</p>

p{
     font-size:20px;
     line-height:30px;
}

字母的大小(font-size)是20 px，line- height 是30 px，上下留白为 5px。

（3）数字

<p>udemy</p>

p{
     font-size:20px;
     line-height:2;
}

line- height 为 font-size: 20 px 的2倍（20 × 2= 40 px），字母的大小(font-size)是 20 px，上下留白为 10px。

（4）百分比

<p>udemy</p>

p{
     font-size:20px;
     line-height:200%;
}

line- height 为 font-size: 20 px 的200% ，为40 px，同样上下留白为 10px。。

注意：line-height可继承，给元素设置 line-height 会对其内部所有的孩子都生效

49. 说说对媒体查询的理解？（响应式适配）

根据不同的屏幕尺寸, 显示不同的效果 (设置盒子的样式)。

媒体查询由两部分组成：

• 一个可选的媒体类型（如 screen、print 等）
• 零个或多个媒体功能限定表达式（如 max-width: 500px、orientation: landscape 等）

使用示例：

/* 在css样式表的定义中直接使用媒体查询 */ 
.container {
  width: 600px;
  height: 200px;
  background-color: pink;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .container {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .container {
    width: 750px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .container {
    width: 980px;
  }
}

50. Sass、Scss的关系

首先我们在 package.json 中安装的依赖都是关于 Sass 的，但是在 style 标签中使用的时候一般是用<style lang="scss>，这是为什么呢？

• Sass和Scss其实是一样的CSS预处理语言，Scss是Sass3 引入的新语法，所以Scss隶属于Sass，Scss语法完全兼容了Sass3, 并且继承了Sass的强大功能。
• Sass 是有严格缩进风格的，不使用花括号和分号看，所以用起来很不方便。Scss使用缩进，就方便了很多，所以在实践中一般都是使用lang="scss"。
• 但是在说使用哪种语言写CSS的时候说的都是Sass

51. preload 与 prefetch

• preload：预加载，用于 link 标签，可以指明哪些资源是在页面加载完成后即刻需要的，浏览器会在主渲染机制介入前预先加载这些资源，并不阻塞页面的初步渲染。
• prefetch：预提取，告诉浏览器加载下一页面可能会用到的资源，浏览器会利用空闲状态进行下载并将资源存储到缓存中

异同：

• preload 告诉浏览器立即加载资源（一定）
• prefetch 告诉浏览器在空闲时才开始加载资源（不一定）
• preload、prefetch 仅仅是加载资源，并不会“执行”
• preload、prefetch 均能设置、命中缓存
• 正确使用 preload、prefetch 不会导致重复请求

52. CSS 样式各种写法

行内样式： 直接在 HTML 标签中使用 style 属性设置 CSS 样式。

<p style="font-size: 18px;">行内样式</p>

内联样式： 直接在元素上通过 :style 的形式书写样式对象。

<!-- 内联样式书写为对象形式  其中font-size 必须加引号  
        注意：凡是有横线的都必须加引号 -->

<h1 :style="{color: 'red', 'font-size': '40px'}">内联样式</h1>

外部样式表

<head>
    <link rel="stylesheet" href="./index.css">
</head>

内部样式表

<head>  
   <style>
       p {
           color: red;
           font-size: 20px;
       }
   </style>
 </head>

53. CSS 中的 :root

:root是一个伪类，表示文档根元素。在 :root 中声明相当于全局属性，只要当前页面引用了 :root 所在文件，都可以使用 var() 来引用。

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
}

body {
  background-color: var(--blue);
}

54. CSS 自定义属性（CSS变量）

1.原生 CSS 以 -- 开头的属性，定义后经过 var() 使用变量，在 :root 选择器中定义， 能够做用于全局文档中的全部元素

// style/variable.css
/* 默认dark主题 */
:root {
  --bg-color: #0d1117;
  --text-color: #f0f6fc;
}

/* light主题 */
:root[theme='light'] {
  --bg-color: #fff;
  --text-color: #2c3e50;
}

#app {
  /* 字体颜色 */
  color: var(--text-color);
  /* 背景颜色 */
  background-color: var(--bg-color);
}

2. SCSS 是以 $ 开头， LESS 是以 @ 开头

// sass 
$blue: blue;
 
.box{
    color: $blue;
}
 
// less
@blue: blue;
 
.box{
    color: @blue;
}
 
// 原生css
:root{
    --blue: blue;
} 
 
.box{
    color: var(--blue);
}
// 若想使用默认值,第二个参数默认值
.box{
    color: var(--blue,blue);
}

55. 修改placeholder的样式

项目用经常遇到修改input的placeholder的颜色的需求，设置 color 属性只能改变输入值的颜色，而 placeholder 的颜色没有任何变化，需要使用伪元素 ::placeholder 进行处理。但并不是所有的 dom 元素都支持，部分伪元素只有指定的 dom 元素才支持，比如 ::placeholder 只有 input 和 textarea 才支持。同时要考虑::placeholder的兼容性。

56. 说说对 CSS 工程化的理解

CSS 工程化是为了解决以下问题：CSS 代码如何组织、如何拆分、怎样设计结构？怎样写出更好的 CSS 代码？如何处理CSS 代码才能让打包结果最优？如何降低后续维护成本？目前比较流行的、普适性非常好的 CSS 工程化实践：预处理器：Less、 Sass，Webpack 打包构建工具。

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

他们是 CSS 预处理器，是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 、嵌套、混合、导入等高级功能，这些拓展令 CSS 更加强大。

CSS有具体以下几个缺点：
-->语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
-->没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。

58. 层叠上下文

层叠上下文是 HTML 中一个三维的概念，每个盒模型的位置是三维的，当多个 HTML 元素在浏览器视窗中发生重叠时，会按照一定的优先级顺序进行排列在Z轴上。

59. div嵌套引起的margin-top不起作用

此时嵌套 div 中 margin-top 出现转移，margin-bottom 值会转移到父元素也就是外层 div 身上。

原因： 父元素的第一个子元素的上边距 margin-top，如果碰不到有效的 border 或者 padding，就会不断一层一层的找父元素、祖先元素。只要给父元素设置个有效的 border 或者 padding 就可以有效的防止越级。

解决方法： 1. 给父元素div1设置一个 padding 值 2. 给父元素设置一个overflow：hidden 3. 让父元素生成一个块级格式化范围

60. p标签和div标签的区别

首先两者的共同点，都是块级元素，独占一行，可以设置宽高、margin、padding等

区别：p标签实际上是有默认的 margin-top、margin-bottom属性值，而div标签没有

61. 响应式布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。

优点：

• 面对不同分辨率设备灵活性强
• 能够快捷解决多设备显示适应问题

缺点：

• 仅适用布局、信息、框架并不复杂的部门类型网站
• 兼容各种设备工作量大，效率低下
• 代码累赘，会出现隐藏无用的元素，加载时间加长
• 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
• 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

自适应布局与响应式布局的区别：

• 自适应布局是指通过JS及CSS的控制，借助rem、百分比等相对度量单位，在不同大小的设备上呈现相同的网页。
• 响应式布局是指据屏幕的大小自动的调整页面的展现方式，可以实现用一个网页自动适应不同大小的屏幕。

实现响应式布局的方法：

• 媒体查询（@media）：针对不同的媒体定义不同的样式（缺点：定义多套样式很繁琐）
• rem：相对于根元素的字体大小，如果 html元素的font-size为16px，此时1rem = 16px
• 百分比%：当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果，不建议使用（计算困难）
• vw/vh：vw 表示相对于视图窗口的宽度，vh 表示相对于视图窗口高度
• flex弹性布局：只需要依赖于CSS样式的实现响应式布局的方式（用得最多）

62. padding margin百分比写法是相对于谁的

元素的 margin（水平和垂直margin）和 padding（水平和垂直padding）百分比都是相对于父元素的宽度。

<div class="outer">
       <div class="inner"></div>
</div>


 <style>
        .outer{
            width: 200px;
            height: 100px;
        }
        .inner{
            width: 60px;
            height: 60px;
            padding-top: 10%; // 相对于父元素的宽度10%：20px
            padding-left: 20%; // 相对于父元素的宽度20%：40px
            margin-top: 30%; // 相对于父元素的宽度30%：60px
            margin-left: 40%; // 相对于父元素的宽度40%：80px
        }
</style>

63. 介绍下 BFC、IFC、GFC 和 FFC

BFC（块级格式上下文）：juejin.cn/post/720890…

GFC（网格布局格式化上下文）：当为一个元素设置 display 值为 grid 的时候，此元素将会获得一个独立的渲染区域

FFC（自适应格式上下文）：display 值为 flex / inline-flex 的元素将会生成自适应容器

IFC（内联格式上下文）

64. 分析比较 opacity: 0、visibility: hidden、display: none 优劣

65. W3C标准与规范

1. DOCTYPE声明必须放在每一个XHTML文档最顶部
2. 定义语言编码
3. 所有标签的元素和属性的名字都必须使用小写
4. 所有的属性必须用引号””括起来
5. 把所有的<和&符号用编码表示
6. 所有的标记都必须要有一个相应的结束标记
7. 所有的标记都必须合理嵌套
8. 图片添加有意义的alt属性
9. 在form表单中增加label，以增加用户友好度

66. 浏览器分层

浏览器分层（Layering）是一种优化手段，主要目标是使得浏览器可以更高效地合成和渲染页面，减少页面的重绘和回流，提高页面的交互响应性。以下是一些情况，会导致浏览器进行图层分层：

1.3D变换：transform: translateZ(0)，可以触发硬件加速，将图层分离出来，使得浏览器可以在独立的图层上进行合成和渲染。

2.视频元素和 Canvas：这些元素通常会被浏览器分层，以便更好地处理它们的渲染和合成。

3.设置了透明度opacity

4.will-change：告诉浏览器该元素将要发生变化，从而优化图层分配

5.Fixed 和 Sticky 定位元素

6.含有 CSS 动画和过渡的元素

67. will-change属性

will-change 是一个用于提前告知浏览器，某个元素将要发生哪些改变，以便浏览器在渲染时可以进行优化的 CSS 属性。常见场景是在元素即将进行复杂变化（例如动画或滚动）时，以告知浏览器对该元素进行图层分层和其他优化，这样浏览器可以在元素发生变化之前就开始做好准备，提高渲染效率。

68. 说一下css模块化解决方案

CSS模块化是一种通过组织和管理CSS代码，以便更容易维护、复用和扩展的方法。以下是一些流行的CSS模块化解决方案：

BEM (Block Element Modifier):

• BEM是一种命名约定，用于为CSS类命名，以提高代码的可读性和维护性。

• 按照 BEM 的命名规则，类名由块（block）、元素（element）和修饰符（modifier）组成，使用双下划线__和双短横线--来区分块、元素和修饰符。

  .block {}
  .block__element {}
  .block__element--modifier {}
  

CSS-in-JS:

• CSS-in-JS是一种将CSS样式直接嵌入到JavaScript文件中的方法。这种方法通常与React等JavaScript框架一起使用。

• 使用CSS-in-JS，你可以在组件级别管理样式，确保样式与组件相关联，并避免全局作用域的问题。

  const styles = {
    button: {
      backgroundColor: 'blue',
      color: 'white',
    },
  };
  ​
  // 在React组件中使用
  function MyButton() {
    return <button style={styles.button}>Click me</button>;
  }
  

PostCSS:

• PostCSS是一个用JavaScript编写的工具，可以处理CSS。它允许你使用插件来转换、优化和模块化CSS代码。
• 一些PostCSS插件，如autoprefixer和cssnano，可以自动添加前缀、压缩和优化CSS代码。

69. 如何放大图片并保证宽高比不变

1.定宽不定高

2.object-fit: cover、object-fit: contain

3.transfrom: scale(2)

70. 有很多div ，尽可能使用多的方法实现他们成为一排

float、flex、display: inline-block、gird

71. 使用inlineblock有什么要注意的吗

inline-block 元素之间的空白字符会导致它们之间产生间距

inline-block 元素默认是基线对齐，这可能导致在垂直方向上的对齐问题，特别是当它们的高度不同时。

72. inherit、initial、unset 三者的区别

initial：取浏览器默认的值

inherit：继承

unset：关键字 initial 和 inherit 的组合

• 如果该属性是默认继承属性，该值等同于inherit
• 如果该属性是非继承属性，该值等同于initial
• 换句话说这个unset关键字会优先用inherit的样式，其次会应该用initial的样式

二、场景应用

1. 实现一个三角形

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

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

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

三角1

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

三角2

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

三角3

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

三角4

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;
    heigt: 0;
    border-radius: 100px;
    border-top-color: red;
}

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

利用vw来实现：

.square {
  width: 10vw;
  height: 10vh;
  background: red;
}

利用元素的margin/padding百分比是相对父元素width的性质来实现：

.square {
  width: 10%;
  height: 0;
  padding-top: 10%;
  background: red;
}

4. 画一条0.5px的线

（1）采用transform: scale()的方式

transform: scale(0.5,0.5)

（2）采用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只针对于移动端，只在移动端上才能看到效果。

（3）box-shadow

    div {
            box-sizing: border-box;
            background-color: blueviolet;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* border: 1px solid red; */
            box-shadow: 0px 0px 0px 0.5px green;
     }

（4）::after定位伪类

 <style>
        div {
            position: relative;
            box-sizing: border-box;
            background-color: blueviolet;
            width: 200px;
            height: 200px;
            margin-top: 10px;
            /* box-shadow: 0px 0px 0px 0.5px green; */
        }
 
        div::after {
            position: absolute;
            content: "";
            background-color: red;
            width: 100%;
            height: 0.5px;
            bottom: 0px;
        }
    </style>
</head>
 
<body>
    <div></div>
</body>

（5）linear-gradient

   <style>
        div {
            position: relative;
            box-sizing: border-box;
            background-color: blueviolet;
            width: 200px;
            height: 200px;
            margin-top: 10px;
            /* box-shadow: 0px 0px 0px 0.5px green; */
        }
 
        div::after {
            display: block;
            position: absolute;
            content: "";
            width: 100%;
            height: 1px;
            bottom: 0px;
            background-color: red;
            background: linear-gradient(to bottom, transparent 50%, red 50%);
 
 
        }
    </style>
</head>
 
<body>
    <div></div>
</body>

5. 设置小于12px的字体

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

解决办法：

1. -webkit-text-size-adjust:none; 高版本chrome浏览器不支持
2. -webkit-transform:scale(0.5); 收缩的是整个元素的大小 如果是内联元素，必须要将内联元素转换成块元素（display：block/inline-block）

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 已经被处理成物理像素大小，这样的大小在手机上显示边框很合适。但是，一些原本不需要被缩小的内容，比如文字、图片等，也被无差别缩小掉了。

7. 实现一个品字布局

<!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>Demo</title>
  <style>
	.box {
		width: 200px;
  		height: 200px;
	}
	.div1 {
		background-color: red;
		margin: 100px auto 0;
	}
	.div2 {
		float: left;
		background-color: green;
		margin-left: 50%;
		transform: translateX(-100%);
	}
	.div3 {
		float: left;
		background-color: pink;
		transform: translateX(-100%);
	}
  </style>
</head>
<body>
	<div class="box div1">1</div>
	<div class="box div2">2</div>
	<div class="box div3">3</div>


	<script>
		
	</script>
</body>
</html>

8. 一个满屏品字布局如何设计?

<!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>Demo</title>
  <style>
	.box {
		width: 100%;
		height: 50%;
	}
	.div1 {
		margin: 100px auto 0;
		background-color: red;
	}
	.div2 {
		float: left;
		width: 50%;
		background-color: green;
	}
	.div3 {
		float: left;
		width: 50%;
		background-color: pink;
	}
  </style>
</head>
<body>
	<div class="box div1">1</div>
	<div class="box div2">2</div>
	<div class="box div3">3</div>


	<script>
		
	</script>
</body>
</html>

9. div垂直水平居中，并且 div 高度永远是宽度的一半（宽度可以不指定）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      .outer {
        width: 400px;
        height: 100%;
        background: blue;
        margin: 0 auto;

        display: flex;
        align-items: center;
      }

      .inner {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        background: red;
      }

      .box {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">
        <div class="box">hello</div>
      </div>
    </div>
  </body>
</html>

这里使用 padding-bottom: 50%; 实现高度永远是宽度的一半，可以参考（一、28.）对该属性的用法进行了解

10. 画一个大小为父元素宽度一半的正方形

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 400px;
        height: 600px;
        background: red;
      }

      .inner {
        width: 50%;
        padding-bottom: 50%;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>

11. flex 怎么实现一部分固定高度，一部分自适应？

下面列举几个常见的例子：

（1）左侧固定，右侧自适应：

// html
  <div class='box'>
    <div class='div1'>1</div>
    <div class='div2'>2</div>
  </div>

// css
*{
 margin:0; 
 padding:0;
}

.box{
  display: flex;
  width: 100%;
  height: 500px;
}
.div1{
    width: 200px;
    height:100%;
    background:red;
}

.div2{
    height:100%;
    flex:1;
    background:green;
}

（2）左右固定，中间自适应：

// html
  <div class='box'>
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
  </div>

// css
*{
 margin:0; 
 padding:0;
}

.box{
  display: flex;
  height: 200px;
  width: 100%;
}

.div1{
    width: 200px;
    height: 100%;
    background:red;
}

.div2{
    height:100%;
    flex:1;
    background:green;
}

.div3{
   width: 200px;
   height: 100%;
   background:blue;
}

（3）顶部固定，底部自适应：

// html
  <div class='box'>
    <div class='div1'>1</div>
    <div class='div2'>2</div>
  </div>

// css
*{
  margin:0;
  padding:0;
}

.box{
  display: flex;
  min-height: 100vh;
  width: 100%;
  flex-direction: column;
}

.div1{
    flex:0 0 100px;
    background:red;
}

.div2{
    height: 100px;
    flex: auto;
    background:green;
}

（3）顶部和底部固定高度，中间自适应

// html
  <div class='box'>
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
  </div>

// css
*{
  margin:0;
  padding:0;
}

.box{
  display: flex;
  min-height: 100vh;
  width: 100%;
  flex-direction: column;
}

.div1{
    flex:0 0 100px;
    background:red;
}

.div2{
    height: 100px;
    flex: auto;
    background:green;
}

.div3{
   flex:0 0 200px;
   background:blue;
}

12. 水平垂直居中

水平垂直居中主要分为两种情况：1. 子元素宽高确定 2. 子元素宽高不确定

统一效果如下：

HTML结构：

<div class='box'>
    <div class='center'></div>
</div>

这里提供了几种方法，可以根据需要选择不同的方式

（1）flex 布局

.box{
  width:500px;
  height: 500px;
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center{
  width:200px;
  height: 200px;
  background-color: blue;
}

（2）定位 + auto（四个方向拉扯）

.box{
  width:500px;
  height: 500px;
  background-color: yellow;
  position: relative;
}
.center{
  width:200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

（3）定位 + calc()

.box{
  width:500px;
  height: 500px;
  background-color: yellow;
  position: relative;
}
.center{
  width:200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
}

（4）定位 + transform

.box{
  width:500px;
  height: 500px;
  background-color: yellow;
  position: relative;
}
.center{
  width:200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

（5）定位 + margin

.box{
  width:500px;
  height: 500px;
  background-color: yellow;
  position: relative;
}
.center{
  width:200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}

（6）flex + auto

.box{
    display: flex;
    width:500px;
    height: 500px;
    background-color: yellow;
}
.center{
    width:200px;
    height: 200px;
    background-color: blue;
    margin: auto
}

（7）table-cell

    .box{
      display: table-cell;
      width:500px;
      height: 500px;
      background-color: yellow;
      text-align: center;
      vertical-align: middle;
    }
    .center{
      display: inline-block;
      width:200px;
      height: 200px;
      background-color: blue;
    }

（8）line-height + text-align（行内元素）

.box{
    width:500px;
    height: 500px;
    background-color: yellow;
    line-height: 500px;
    text-align: center;
}
.center{
    background-color: blue;
}

（9）grid

    .box{
      display: grid;
      width:500px;
      height: 500px;
      background-color: yellow;
    }
    .center{
      width:200px;
      height: 200px;
      background-color: blue;
      justify-self: center;
      align-self: center;
    }

13. 圣杯布局

这种布局是在PC端应用的，主要应用于两侧固定，中间自适应的布局，中间的内容更重要。这两种布局的考察其实就是float和margin负值的应用。

效果如下：

代码实现：

14. 双飞翼布局

这种布局是在PC端应用的，主要应用于两侧固定，中间自适应的布局，中间的内容更重要。这两种布局的考察其实就是float和margin负值的应用。

效果如下：

代码实现：

15. 手写clearfix

16. 用flex实现一个三点骰子

17. 左边定宽与右边自适应布局

我们这里一共有6种方式实现这种布局，其中又分为3种非严格模式和三种严格模式。

非严格模式：当左边宽度改变时，我们还需要调整其它样式已达到右边自适应。

严格模式：直接改变左边宽度就好，右边会自动适应。

下面前三种为非严格模式实现，后三种为严格模式实现。

第一种方式：float+calc

第二种方式：inline-block+calc

第三种方式：绝对定位+padding

第四种方式：flex

第五种方式：table

第六种方式：grid

18. 如何修改才能让图片宽度为 300px ？

已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改

<img src="1.jpg" style="width:480px!important;”>

解决方法：

1. <img src="1.jpg" style="width:480px!important; max-width = 300px">
2. <img src="1.jpg" style="width:480px!important; transform: scale(300/480)">

19. 使用CSS实现一个六边形

两个梯形组合起来：宽度设为0是三角形，不设为0是梯形，再设置border-top-width为0

.shape {
    width: 120px;
    height: 0;
    border: 60px solid transparent;
    border-top-width: 0px;
    border-bottom: 104px solid #36d792;
    position: relative;
}
.shape::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 0;
    border: 60px solid transparent;
    border-bottom-width: 0px;
    border-top: 104px solid #36d792;
    left: -60px;
    top: 104px;
}

20. 一个无限长的列表，实现前两个和后两个元素设置为红色

<!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>一个无限长的列表, 实现前两个和后两个元素设置为红色</title>
    <style>
      .list {
        display: flex;
        flex-direction: column;
      }
​
      .list > div {
        height: 30px;
        margin: 5px;
        background-color: #3498db;
      }
​
      .list > div:nth-child(-n + 2),
      .list > div:nth-last-child(-n + 2) {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="list">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
      <div>Item 5</div>
      <div>Item 6</div>
      <!-- Add more items -->
      <div>Item N-1</div>
      <div>Item N</div>
    </div>
  </body>
</html>

21. 实现一个秒针绕一点转动的效果

<!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>
    <style lang="css">
      .clock {
        width: 200px;
        height: 200px;
        border: 2px solid #000;
        border-radius: 50%;
        position: relative;
      }
​
      .hand {
        width: 1px;
        height: 100px;
        background-color: #000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center top;
        animation: 60s rotate linear infinite;
      }
​
      @keyframes rotate {
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <div class="hand"></div>
    </div>
  </body>
</html>

22. 头部左侧固定，右侧上下滑动

三个固定定位 + overflow-y: auto;

<!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>
    <style>
      body {
        margin: 0;
      }
      .header {
        width: 100%;
        height: 54px;
        position: fixed;
        border-bottom: 1px solid #e4e6e9;
        background: #ccc;
      }
      .sidebar {
        position: fixed;
        top: 54px;
        bottom: 0;
        left: 0;
        width: 300px;
        border-right: 1px solid #e4e6e9;
        background-color: #fff;
      }
      .content {
        position: fixed;
        top: 54px;
        right: 0;
        bottom: 0;
        left: 301px;
        overflow-y: auto;
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>
    <div class="main">
      <div class="sidebar">sidebar</div>
      <div class="content">
        世间有一种相互的情愿、一种情感的眷恋、一种情怀的着落，一种甜情密意的爱............
      </div>
    </div>
  </body>
</html>

23. 使用纯 CSS 制作一个开关按钮

<!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>
    <style>
      .switch-container {
        display: inline-block;
        position: relative;
        height: 30px;
      }
      .switch-ipt {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        opacity: 0;
        margin: 0;
      }
      .switch-label {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 30px;
        background: #e3e3e3;
        border-radius: 20px;
      }
      .switch-label::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        transition: 0.3s;
      }
      .switch-ipt:checked + .switch-label {
        background-color: green;
      }
      .switch-ipt:checked + .switch-label::after {
        left: 57px;
      }
    </style>
  </head>
  <body>
    <div class="switch-container">
      <input class="switch-ipt" checked type="checkbox" id="switch-ipt" />
      <label class="switch-label" for="switch-ipt"></label>
    </div>
  </body>
</html>

24. 页面内容不够时footer固定在底部，页面内容很多时footer在最下面

CSS 实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>footer</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .container {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        justify-content: space-between;
      }
      .main {
        background-color: bisque;
        flex: 1;
      }
      footer {
        background-color: cadetblue;
        padding: 20px 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <section class="main">
        <h1>哈哈哈哈哈</h1>
      </section>
      <footer>footer</footer>
    </div>
  </body>
</html>

JS 实现：

<!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>JS实现----footer沉底效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #container {
        width: 100%;
        height: 100%;
      }
      #content {
        background: blue;
      }
      #footer {
        width: 100%;
        height: 100px;
        background: red;
      }
      .footer-fixed {
        position: fixed;
        left: 0;
        bottom: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="content">
        <h1>哈哈哈哈哈</h1>
      </div>
      <div id="footer">footer</div>
    </div>
​
    <script>
      let height =
        document.getElementById('container').clientHeight -
        document.getElementById('content').clientHeight;
      if (height > 100)
        document.getElementById('footer').classList.add('footer-fixed');
    </script>
  </body>
</html>

25. flex 布局，如何实现把八个元素分两行摆放

<!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>flex 布局，如何实现把八个元素分两行摆放</title>
    <style>
      .father {
        display: flex;
        flex-wrap: wrap;
      }
​
      .child {
        box-sizing: border-box;
        flex: 0 0 25%;
        border: 1px solid #00f;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </body>
</html>

26. 上下固定，中间滚动布局如何实现

27. 三种方式实现：左右固定100px，中间自适应的三列布局

方式一：flex布局 + flex: 1

方式二：左右浮动 + 中间margin

方式三：grid网格布局

方式四：定位

28. 实现一个半圆

.half-circle {
    width: 100px;
    height: 50px;
    background-color: blue;
    border-radius: 100px 100px 0 0;
}

29. 实现多列等高布局，要求元素实际占用的高度以多列中较高的为准

30. ul 内部除最后一个 li 以外设置右边框效果

/* 选取 ul 元素内部的除最后一个 li 以外的每个 li 元素 */
ul li:not(:last-child) {
  border-right: 1px solid #ccc; /* 添加右边框效果 */
}