CSS ​

1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ ​

• 是什么：当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，将所有元素表示为一个个矩形的盒子。一个盒子由四个部分组成：content、padding、border、margin

• 标准盒子模型: width/height 只是内容高度，不包含 padding 和 border 值

  • 盒子总宽度 = width + padding + border + margin;
  • 盒子总高度 = height + padding + border + margin

• IE 怪异盒子模型: width/height 包含了 padding 和 border 值

  • 盒子总宽度 = width + margin;
  • 盒子总高度 = height + margin;

2.CSS 选择符有哪些？ ​

1. id 选择器（#myid）
2. 类选择器（.myclassname）
3. 标签选择器（div,h1,p）
4. 后代选择器（h1 p）
5. 相邻后代选择器（子）选择器（ul>li）
6. 兄弟选择器（li~a）
7. 相邻兄弟选择器（li+a）
8. 属性选择器（a[rel="external"]）
9. 伪类选择器（a:hover,li:nth-child）
10. 伪元素选择器（::before、::after）
11. 通配符选择器（*）

3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用 ​

• 单冒号（:）用于 CSS3 伪类，伪类一般匹配的是元素的一些特殊状态，如 hover、link 等
• 双冒号（::）用于 CSS3 伪元素，伪元素一般匹配的特殊的位置，比如 after、before 等

4.伪类与伪元素的区别 ​

• https://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/

5.CSS 中哪些属性可以继承？ ​

6.CSS 优先级算法如何计算？ ​

7.关于伪类 LVHA 的解释? ​

• a 标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪 类:link、:visited、:hover、:active；
• （1）当鼠标滑过 a 链接时，满足:link 和:hover 两种状态，要改变 a 标签的颜色，就必须将:hover 伪类在:link 伪类后面声明；
• （2）当鼠标点击激活 a 链接时，同时满足:link、:hover、:active 三种状态，要显示 a 标签激活时的样式（:active），必须将:active 声明放到:link 和:hover 之后
• 因此得出 LVHA 这个顺序

8.CSS3 新增伪类有那些？ ​

9.如何居中 div？ ​

• 对于宽高固定的元素
  1. 我们可以利用 margin:0auto 来实现元素的水平居中。
  2. 利用绝对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。
  3. 利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 margin 负值来调整元素的中心点到页面的中心。
• 宽高不定的元素
  1. 利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 translate 来调整元素的中心点到页面的中心。
  2. 使用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中

10.display 有哪些值？说明他们的作用。 ​

11.position 的值 relative 和 absolute 定位原点是？ ​

12.CSS3 有哪些新特性？ ​

13.请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景？ ​

14.用纯 CSS 创建一个三角形的原理是什么？ ​

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

16.CSS 多列等高如何实现？ ​

1. 利用 负 margin-bottom 和正 padding-bottom 对冲实现，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow:hidden），这样父容器的高度就还是它里面的列没有设定 padding-bottom 时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的 padding-bottom 补偿这部分高度差。
2. 利用 table-cell 所有单元格高度都相等的特性，来实现多列等高。
3. 利用 flex 布局中项目 align-items 属性默认为 stretch，如果项目未设置高度或设为 auto，将占满整个容器的高度的特性，来实现多列等高。

17.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？ ​

18.li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？ ​

19.为什么要初始化 CSS 样式？ ​

• 往往会出现浏览器之间的页面显示差异。
• 当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况 下初始化。最简单的初始化方法：\*{padding:0;margin:0;}

20.什么是包含块，对于包含块的理解? ​

21.CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的？在不同浏览器下以后什么区别？ ​

22.width:auto 和 width:100%的区别 ​

• width:100%会使元素 box 的宽度等于父元素的 contentbox 的宽度。

• width:auto 会使元素撑满整个父元素，margin、border、padding、content 区域会自动分配水平空间

• https://juejin.cn/post/6894068581854478349

23.绝对定位元素与非绝对定位元素的百分比计算的区别 ​

24.简单介绍使用图片 base64 编码的优点和缺点。 ​

• base64 编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的 url 属性

• 使用 base64 的优点是：

  1. 减少一个图片的 HTTP 请求

• 使用 base64 的缺点是：

  1. 根据 base64 的编码原理，编码后的大小会比原文件大小大 1/3，如果把大图片编码到 html/css 中，不仅会造成文件体积的增加，影响文件的加载速度，还会增加浏览器对 html 或 css 文件解析渲染的时间。
  2. 使用 base64 无法直接缓存，要缓存只能缓存包含 base64 的文件
  3. 兼容性的问题，ie8 以前的浏览器不支持

25.'display'、'position'和'float'的相互关系？ ​

26.margin 重叠问题的理解。 ​

• 块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin 合并”

27.对 BFC 规范（块级格式化上下文：blockformattingcontext）的理解？ ​

• https://segmentfault.com/a/1190000013647777

28.IFC 是什么？ ​

29.请解释一下为什么需要清除浮动？清除浮动的方式 ​

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

• 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使 我们页面后面的布局不能正常显示

• 清除浮动的方式

  • 使用 clear 属性清除浮动。
  • 使用 BFC 块级格式化上下文来清除浮动。

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

31.zoom:1 的清除浮动原理? ​

32.移动端的布局用过媒体查询吗？ ​

33.使用 CSS 预处理器吗？喜欢哪个？ ​

34.CSS 优化、提高性能的方法有哪些？ ​

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

36.在网页中应该使用奇数还是偶数的字体？为什么呢？ ​

37.margin 和 padding 分别适合什么场景使用？ ​

38.抽离样式模块怎么写，说出思路，有无实践经验？ ​

39.简单说一下 css3 的 all 属性。 ​

• all 属性实际上是所有 CSS 属性的缩写，表示，所有的 CSS 属性都怎样怎样，但是，不包括 unicode-bidi 和 direction 这两个 CSS 属性。支持三个 CSS 通用属性值，initial,inherit,unset。

• initial 是初始值的意思，也就是该元素元素都除了 unicode-bidi 和 direction 以外的 CSS 属性都使用属性的默认初始值。

• inherit 是继承的意思，也就是该元素除了 unicode-bidi 和 direction 以外的 CSS 属性都继承父元素的属性值。

• unset 是取消设置的意思，也就是当前元素浏览器或用户设置的 CSS 忽略，然后如果是具有继承特性的 CSS，如 color，则使用继承值；如果是没有继承特性的 CSS 属性，如 background-color，则使用初始值。

  https://www.zhangxinxu.com/wordpress/2016/03/know-about-css3-all/

40.为什么不建议使用统配符初始化 css 样式。 ​

41.absolute 的 containingblock（包含块）计算方式跟正常流有什么不同？ ​

42.对于 hasLayout 的理解？ ​

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

44.全屏滚动的原理是什么？用到了 CSS 的哪些属性？（待深入实践） ​

45.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？ ​

46.视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？） ​

47.如何修改 chrome 记住密码后自动填充表单的黄色背景？ ​

• https://blog.csdn.net/zsl_955200/article/details/78276209

48.怎么让 Chrome 支持小于 12px 的文字？ ​

49.让页面里的字体变清晰，变细用 CSS 怎么做？ ​

50.font-style 属性中 italic 和 oblique 的区别？ ​

51.设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？ ​

• 设备像素指的是物理像素，一般手机的分辨率指的就是设备像素，一个设备的设备像素是不 可变的。
• css 像素和设备独立像素是等价的，不管在何种分辨率的设备上，css 像素的大小应该是一致的，css 像素是一个相对单位，它是相对于设备像素的，一个 css 像素的大小取决于页面缩放程度和 dpr 的大小。
• dpr 指的是设备像素和设备独立像素的比值，一般的 pc 屏幕，dpr=1。在 iphone4 时，苹果推出了 retina 屏幕，它的 dpr 为 2。屏幕的缩放会改变 dpr 的值。
• ppi 指的是每英寸的物理像素的密度，ppi 越大，屏幕的分辨率越大。

52.layoutviewport、visualviewport 和 idealviewport 的区别？ ​

53.position:fixed;在 android 下无效怎么处理？ ​

54.如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里） ​

55.如何让去除 inline-block 元素间间距？ ​

56.overflow:scroll 时不能平滑滚动的问题怎么处理？ ​

57.有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度 ​

58.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？ ​

59.浏览器如何判断是否支持 webp 格式图片 ​

60.什么是 Cookie 隔离？（或者说：请求资源的时候不要让它带 cookie 怎么做） ​

• 网站向服务器请求的时候，会自动带上 cookie 这样增加表头信息量，使请求变慢。 如果静态文件都放在主域名下，那静态文件请求的时候都带有的 cookie 的数据提交给 server，非常浪费流量，所以不如隔离开，静态资源放 CDN。
• 因为 cookie 有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就 不会带有 cookie 数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。同时这种方式不会将 cookie 传入 WebServer，也减少了 WebServer 对 cookie 的处理分析环节，提高了 webserver 的 http 请求的解析速度。

61.style 标签写在 body 后与 body 前有什么区别？ ​

62.什么是 CSS 预处理器/后处理器？ ​

63.阐述一下 CSS Sprites ​

64.使用 rem 布局的优缺点？ ​

65.几种常见的 CSS 布局 ​

66.画一条 0.5px 的线 ​

67.transition 和 animation 的区别 ​

68.什么是首选最小宽度？ ​

69.为什么 height:100%会无效？ ​

70.min-width/max-width 和 min-height/max-height 属性间的覆盖规则？ ​

71.内联盒模型基本概念 ​

72.什么是幽灵空白节点？ ​

73.什么是替换元素？ ​

• 通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此，<img>、 <object>、<video>、<iframe>或者表单元素<textarea>和<input>和<select>都是典型的替换元素。
• 替换元素除了内容可替换这一特性以外，还有以下一些特性

1. 内容的外观不受页面上的 CSS 的影响。用专业的话讲就是在样式表现在 CSS 作用域之 外。如何更改替换元素本身的外观需要类似 appearance 属性，或者浏览器自身暴露的一些样式接口
2. 有自己的尺寸。在 Web 中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺 寸（不包括边框）是 300 像素 ×150 像素，如<video>、<iframe>或者<canvas>等
3. 在很多 CSS 属性上有自己的一套表现规则。比较具有代表性的就是 vertical-align 属性，对于替换元素和非替换元素，vertical-align 属性值的解释是不一样的
4. 所有的替换元素都是内联水平元素，也就是替换元素和替换元素、替换元素和文字都 是可以在一行显示的。但是，替换元素默认的 display 值却是不一样的，有的是 inline，有的是 inline-block

74.替换元素的计算规则？ ​

75.content 与替换元素的关系？ ​

76.margin:auto 的填充规则？ ​

77.margin 无效的情形 ​

78.border 的特殊性？ ​

79.什么是基线和 x-height？ ​

80.line-height 的特殊性？ ​

81.vertical-align 的特殊性？ ​

82.overflow 的特殊性？ ​

83.无依赖绝对定位是什么？ ​

84.absolute 与 overflow 的关系？ ​

85.clip 裁剪是什么？ ​

86.relative 的特殊性？ ​

87.什么是层叠上下文？ ​

88.什么是层叠水平？ ​

89.元素的层叠顺序？ ​

90.层叠准则？ ​

91.font-weight 的特殊性？ ​

92.text-indent 的特殊性？ ​

93.letter-spacing 与字符间距？ ​

94.word-spacing 与单词间距？ ​

95.white-space 与换行和空格的控制？ ​

96.隐藏元素的 background-image 到底加不加载？ ​

1. 元素的背景图片

• 元素本身设置 display:none，会请求图片
• 父级元素设置 display:none，不会请求图片 样式没有元素使用，不会请求
• :hover 样式下，触发时请求

2. img 标签图片任何情况下都会请求图片

• https://www.jb51.net/css/469033.html

97.如何实现单行／多行文本溢出的省略（...）？ ​

/*单行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高，比如这里我们显示两行，则为 3*/
  height: 3em;
  overflow: hidden;
}
p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

/*单行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高，比如这里我们显示两行，则为 3*/
  height: 3em;
  overflow: hidden;
}
p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

98.常见的元素隐藏方式？ ​

99.css 实现上下固定中间自适应布局？ ​

100.css 两栏布局的实现？ ​

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

/*1.第一种方式是利用 vw 来实现*/
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}
/*2.第二种方式是利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现*/
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}
/*3.第三种方式是利用子元素的 margin-top 的值来实现的*/
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}
.square::after {
  content: "";
  display: block;
  margin-top: 100%;
}

/*1.第一种方式是利用 vw 来实现*/
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}
/*2.第二种方式是利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现*/
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}
/*3.第三种方式是利用子元素的 margin-top 的值来实现的*/
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}
.square::after {
  content: "";
  display: block;
  margin-top: 100%;
}

103.实现一个三角形 ​

104.一个自适应矩形，水平垂直居中，且宽高比为 2:1F ​

/*实现原理参考自适应正方形和水平居中方式*/
.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 10%;
  height: 0;
  padding-top: 20%;
  background: tomato;
}

/*实现原理参考自适应正方形和水平居中方式*/
.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 10%;
  height: 0;
  padding-top: 20%;
  background: tomato;
}