网站首页 > 技术文章正文

细品100道CSS知识点(下)「干货满满」

hmc789 2024-11-24 16:43:55 技术文章 1 ℃

作者：hh_phoebe

转发链接：https://juejin.im/post/5ee0cf335188254ec9505381

前言

看到小伙伴留言说期待后面整理的CSS和JS篇，工具人小编整理出了本篇有关CSS部分的知识点。本篇文章作为对CSS知识点的统筹，囊括了目前大部分在面试当中常见的内容，包括一些易踩雷的知识点。文章篇幅较长，建议收藏慢慢细品。

文中篇概念性的内容也蛮多，小编一如既往的做了分割线，记忆力好的童鞋请自行忽略。

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

一般情况下，在网页中，应该使用偶数字体。原因：

偶数字号相对更容易和web设计的其他部分构成比例关系；
使用基数字号时文本段落无法对齐；
宋体的中文网页排布中使用最多的的12号和14号。

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

（1）、需要在border外侧添加空白且空白处不需要背景（色），或上下相连的两个盒子之间的空白需要相互抵消时，可以使用margin；

（2）、需要在border内侧添加空白且空白处需要背景（色），或上下相连的两个盒子之间的空白，希望等于两者之和时，可以使用padding。

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

首先，伪类的效果可以通过添加实际的类来实现，而伪元素的效果可以通过添加实际的元素来实现。所以它们的本质区别就是是否抽象创造了新元素。

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

p::first-child {color: red}
复制代码

伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。

a:hover {color: #FF00FF}
p:first-child {color: red}
复制代码

注意：

伪类只能使用“：”；
而伪元素既可以使用“:”，也可以使用“::”；
因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾。

54. ::before 和 :after 中双冒号和单冒号有什么区别？

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等；
伪元素在CSS1中已存在，当时语法是用 : 表示，如:before 和:after；
后来在CSS3中修订，伪元素用 ::表示，如 ::before 和 ::after，以此区分伪元素和伪类；
由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素；

综上所述：::before 是CSS3中写伪元素的新语法； :after是 CSS1 中存在的、兼容IE的老语法。

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

.shrink {
    -webkit-transform: scale(0.8);
    -o-transform: scale(1);
    display: inilne-block;
}
复制代码

56. 将多个元素设置为同一行?清除浮动有几种方式?

将多个元素设置为同一行的方法：使用float或inline-block；

清除浮动的方式：

添加新的元素，应用clear： both；
父级div定义overflow：hidden;
利用：after和：before来在元素内部插入两个元素块，从而达到清除浮动的效果。

.clear { zoom:1; }
.clear:after { 
  content:" "; 
  clear:both;
  display:block;
  height:0;
  overflow:hidden;
  visibility:hidden;
}
复制代码

57. css hack概念以及简述几个css hack?

概念： CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

（1）、图片间隙

在div中插入图片，图片会将div下方撑大3px：

hack1：将<div>与<img>写在同一行；
hack2：给<img>添加display：block；

dt li 中的图片间隙：

hack1: 给<img>添加display：block；

（2）、默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）：

hack1：给元素添加： font-size： 0；
hack2：声明： overflow： hidden；

表单行高不一致：

hack1：给表单添加声明： float： left; height: ; border: 0;

鼠标指针：

hack：若统一某一元素鼠标指针为手型：cursor： pointer;,当li内的a转化为块元素时，给a设置float，IE里面会出现阶梯状；
hack1：给a添加display： inline-block;
hack2：给li添加float: left;

58. css2.0 和css3.0对比有什么不同？

CSS3加强了CSS2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，在布局方面减少了代码量。以前比较复杂的布局，现在使用一个属性就能解决（例如columns等）。在展示型效果方面还加入了更多的效果（如动画，阴影，圆角等），在盒子模型和列表模块都有了改进。但是CSS3就兼容性而言，还是有些不足之处的，只能支持一些高版本的浏览器。

59. 块级元素、行内元素和空元素定义？

行内元素：和其他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素；
块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；
空元素：在HTML元素中，没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素。

60. 如何解决特定浏览器的样式问题？

建议方案：主张向前兼容，不考虑向后兼容。根据产品的用户群中各大浏览器，来考虑需要兼容的浏览器。

可以把浏览器分为两类：一类是历史遗留浏览器，一类是现代浏览器。根据这个分类开发两个版本的网站，然后自己来定义哪些浏览器是历史遗留版本。

在用户使用历史遗留版本的时候，通过通告栏告知用户使用现代浏览器，获取更多的功能，拥有更好的用户体验等（升级）。当用户的浏览器不能兼容时，提示用户只是使用什么版本的浏览器才能使用网站（下载可以兼容的浏览器）。

注意：项目开始前就需要确认兼容支持的最低版本是多少，以此设计一个对应的兼容方案。

61. 浏览器如何判断元素是否匹配某个CSS选择器？

浏览器先产生一个集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到这个选择器都匹配完，还在集合中的元素就匹配这个选择器了。

62. 描述css reset的作用和用途？

Reset重置浏览器的CSS默认属性，浏览器的品种不同，样式不同时，将它们重置，让它们统一。

63. css sprites是什么？如何使用？

css精灵图，把一堆小的图片整合到一张大的图片（png）上，利用CSS的“background-image”，“background- repeat”``，“background-position”的组合进行背景定位background-position可以用数字能精确的定位出背景图片的位置，减轻服务器对图片的请求数量。

64. css sprites的优缺点？

优点：

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

缺点：

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

拓展： 目前网站开发所用的精灵图（如字体库）一般都是直接用云端，而不是采用这种本地的了，如阿里图标库等。

65. 绝对定位和浮动的区别和应用？

绝对定位：绝对定位脱离标准文档流，它的参考点是文档的左上角或者是右上角。如果有任何父元素有定位属性，此时就可以参考“子绝父相”定律来设置自己的定位参考元素。在网页制作过程中很灵活。制作覆盖效果的时候，会大量使用绝对定位。

浮动：浮动脱离标准文档流，通常用于制作并排显示的元素，通常用于大的布局，或者无序列表比如图片的并排。可以使用clear:both属性让标准流中的其他元素在此之后依次排列。

66. 当float和margin同时使用时，如何解决IE6的双倍边距？

当浮动的方向和margin是同方向的时候，此时IE6会在这个方向的第一个元素身上产生双倍margin。

解决办法：

（1）、改变margin的方向，float:left; margin-right:20px; 浮动向左，margin向右；（2）、给第一个元素单独写一个类叫做.content, 此时.content{_margin-left:一半的margin;}；（3）、用display:inline;不用浮动了（哈哈哈哈）。

67. 简述什么是内容与表现分离？

首先对于html，css以及javascript，可以这样理解：

把网站理解成一个人，html就是构成人体的‘骨架’，css就是人体的‘装饰’，比如衣服，饰品等；而javascript就相当于人做出的‘动作’，这样就通俗易懂了。

对于内容和表现分离，小编的理解是：尽量不要在html中插入行内样式，尽量将css抽成一个独立的模块，实现html‘骨架’和样式的分离，利于搜索引擎的同时，也便于后期维护。

68. CSS怎样判断不同分辨率显示不同宽度布局，从而实现自适应宽度？

使用百分比布局，用百分比来写宽度、marign、padding；
使用rem做单位，适当的写js``让html根元素的字号随着浏览器宽度的变化而等比例变化；
使用媒体查询让不同宽度的浏览器使用不同的样式表。

69.rem为什么可以缩放，以什么为基准？其优缺点有哪些？

rem``以html的字号为基准，比如2rem，而html的字号时16px，此时rem就是32px。可以写一段js让html根元素的字号随着浏览器宽度的变化而等比例变化，此时造成页面等比例缩放的现象。

优点：

相对于em的好处来说，不会发生逐渐增大或者减小字体尺寸的情况，因为始终集成根元素的字体大小；rem单位不仅仅是可应用于字体大小，还可以用于设定高度等其它大小，使页面可以适配不同屏幕尺寸。

注意： rem 一般只用于移动端。

70. 5条常见的Firefox和IE的脚本兼容的问题。

绑定监听： IE是attatchEvent() 、 firefox是addEventListener();
计算样式：IE是computedStyle、 firefox是getComputedSyle();
滚动事件：IE是MouseWheel、 firefox是onmousewheel；
表单元素：IE是 document.forms(”formname”) ， firefox是document.forms["formname"]；
事件对象： IE是window.event属性， firefox必须给事件处理函数注入实参event；

71. css的优先级如何计算？

巩固一下：

分类优先级元素选择符 1 class选择器 10 id选择器 100 元素标签 1000

（1）、!important声明的样式优先级最高，若有冲突会再进行计算；

（2）、优先级相同时，以最后出现的样式为准；

（3）、继承得到的样式的优先级是最低的。

72. 回顾position的值及其作用？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过top, bottom, left, right定位；
absolute（绝对定位）：参考距离最近一个不为static的父级元素通过top, bottom, left, right定位；
fixed（固定定位）：所固定的参照对象是可视窗口。

73.有哪几种高等布局？

假等高列：使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象；
给容器的div使用单独的背景色（固定布局）（流体布局）：用元素中的最大高度撑起其他容器的高度；
创建带边框的两列等高布局：用border-left来做，之后呢使用两列；
使用正padding和负margin对冲实现多列布局方法：在所有列中使用的上，下padding和负的上，下margin，并在所有列外面加上一个容器，设置overflow： hidden，把溢出的背景切掉。
使用边框和定位模拟列等高：但不能使用在多列；
模仿表格布局等高列效果：兼容性不好，在ie6-7中无法正常运行；

74. :link、:visited、:hover、:active的执行顺序是怎么样的？

L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜欢和讨厌两个词来概括。

75. 经常遇到的浏览器兼容性有哪些？如何解决？

浏览器默认的margin和padding不同；
IE6双边距bug；
在IE6-7中元素高度超出自己设置的高度。原因是IE8以前的浏览器中会给元素设置偶人的行高的高度所导致的；
min-height在IE6下不起作用；
透明性IE用filter：Alpha（Opacity=60）,而其它主流浏览器用opacity： 0.6；
input边框问题，去掉input边框一般用border：none；就可以但是由于IE6在解析input样式时bug（优先级问题），在IE6下无效；

76. 为什么要语义化以及对于标签语义化的理解？

原因： 为了在没有css的情况下，页面也能呈现出很好的内筒结构和代码架构（可以理解为为了裸奔时好看哈哈哈）。

理解：

去掉或者丢失样式的时候能够让页面呈现清晰的结构；
有利于SEO，可以和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字的权重）；
方便其他设备解析（如屏幕阅读器，盲人阅读器，移动设备等），以意义的方式来渲染网页；
便于团队的开发和维护，语义化更具有可读性，遵循W3C标准的团队都遵循这个标准，可以减少代码差异化；

77. 常见的CSS布局有几种？

常见的CSS布局有： 固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding。

78. position的absolute与fixed共同点与不同点？

相同点：

改变行内元素的呈现方式，display被设置为block；
让元素脱离普通流，不占据空间；
默认会覆盖到非定位元素上；

不同点：

absolute的“根元素”是可以设置的，而fixed的“根元素”固定为浏览器窗口；
当滚动网页时，fixed元素与浏览器窗口之间的距离是不变的。

79. CSS哪些属性可以继承？哪些属性不可以继承？

可以继承的样式： font-size、font-family、color、list-style、cursor；
不可继承的样式： width、height、 border、 padding、 margin、 background；

80.使用过的 CSS 预处理器？

CSS预处理器的基本思想：为CSS增加了一些变量的特性（变量，判断逻辑和函数等）。

开发者使用这种语言进行web页面上样式设计，再编译成正常的css文件使用。使用CSS预处理器，可以使CSS更加简洁，适应性更强，可读性更佳，无需考虑兼容性。最常用的CSS预处理器语言包括： Sass(Scss)和Less。

81. 设置元素浮动后，该元素的 display 值会如何变化？

设置元素浮动后，该元素的display值自动变成block。

82. 行内元素有哪些?块级元素有哪些? 空(void)元素有哪些?

行内元素： a、b、 span、img、 input、 strong、 select、 label、 em、 button、 textarea；
块级元素： div、 ul、 li、 dl、 dt、 dd、 p、 h1-h6、 blockquote；
空元素：即每月内容的html元素，如：br、meta、hr、 link、 input、 img；

83. box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box。

content-box: W3C的标准盒子模型，设置元素的height/width属性指的是content部分的宽/高；
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽；

84. CSS3动画比基于脚本的动画有哪些优势？

跟脚本动画相比，使用CSS3动画具有以下优势：

易于使用，任何人都可以在不了解javascript的情况下创建它们；
即使在合理的系统负载下也能很好的执行。
由于简单的动画在javascript中的效果比较差，因此渲染引擎使用跳帧技术来使动画流畅进行；
允许浏览器控制动画序列，通过建撒谎哦在当前不可见的选项卡中执行的动画的更新频率来优化性能和效率；

85. 如何优化网页的打印样式？

注意，在打印样式表也应该注意以下几点：

打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景图。如果坚持要显示图片，可以使用html插入到页面中；
最好不要使用像素作为单位，因为打印样式表要打印出来的是实物，建议使用pt/cm;
隐藏掉不必要的内容。（如@print content{display: none}）;
打印样式表中不建议使用浮动属性（建议少用），因为它们会消失。

86. React Native中的样式与css的区别？

React Native 的样式基本上是实现了 CSS 的一个子集，并且属性名不完全一致，所以当你开始在考虑兼容React Native 端之前，可以先简要了解一下 React Native 的样式。
这些样式名基本上是遵循了 web 上的 CSS的命名，只是按照 JS 的语法要求使用了驼峰命名法。
RN使用 JavaScript 来写样式，所有核心组件都接受名为style的属性，相当于css的行内样式。
在 React Native中使用 Flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。因此，如果你要考虑 React Native 端，那你的样式布局就得采用 Flex 布局。

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

一般情况下，页面加载是自上而下的。将style标签至于body之前，为的是先加载样式。

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

88. CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

参数是scroll的时候，一定会出滚动条；
参数是auto的时候，子元素内容大于父元素时出现滚动条；
参数是visible的时候，溢出的内容出现在父元素之外；
参数是hidden的时候，溢出隐藏；

89. BFC、IFC、GFC、FFC是什么？

Block formatting context(BFC)--块级格式化上下文；
Inline formatting context(IFC)--内联格式化上下文；
Crid formatting context(GFC)--网格布局格式化上下文；
Flex formatting context(FFC)--自适应格式化上下文；

90. 对于使用图片，需要注意什么？

优化图片；
尽量避免在html中使用压缩图片；
使用恰当的图片格式；
使用css sprites技巧对图片优化；

91.如何优化图像以及图像格式有什么区别？

优化图像：

不用图片，尽量使用CSS3代替。对于一些要实现的修饰效果，例如阴影，圆角，半透明等，可以用CSS3完成；
尽可能使用矢量图SVG代替位图。对于绝大多数图案和图标等，矢量图更小，而且可以缩放而无需生成多套图。现代的主流浏览器大多数都能稳定的支持SVG。

图像格式区别：

矢量图：图标字体，如font-awesome、svg；
位图： GIF、jpg（JPEG）、png；

矢量图和位图的区别：

PNG：它可以细分为三种格式： PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值；
JPG: 一种大小与质量相对平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适用于色彩简单（色调少）的图片，比如图标啊，logo等；
GIF：一种无损的，8位图片格式。具有支持动画，索引透明，压缩等特性。使用色彩简单的图片。

优点：能保证在最不失真的情况下尽可能压缩图像文件的大小；

缺点：对于需要高保真的较为复杂的图像，PNG虽然能无损压缩，但是图片较大，不适合应用在web页面上；

92. position:fixed;在手机端下无效怎么处理？

fixed的元素实现爱你过对于整个页面固定位置的，当在屏幕上滑动时是在滑动整个viewport。原来的网页还在，fixed也没有变过位置，所以说并不是手机端不支持fixed，只是fixed元素不是相对于手机屏幕固定的，因此我们按照以下方式来设计：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
复制代码

93. css样式引入方式的优缺点对比

内嵌样式：优点：方便书写，权重高；缺点：没有做到结构和样式分离；
内联样式：优点：结构样式相分离；缺点：没有彻底分离；
外联样式：优点：完全实现了结构和样式相分离；缺点：需要引入才能使用；

94. border:none;与border:0;有什么区别？

首先是性能差异：

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

兼容性差异：

{border:none;}当border为“none”时似乎对IE6/7无效边框依然存在当border为“0”时，感觉比“none”更有效，所有浏览器都一直把边框隐藏。

95. position 跟 display、overflow、float 这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；
position属性规定元素的定位类型；
float属性是一种布局方式，定义元素往哪个方向浮动；

叠加结果：有点类似于优先机制。position的值-- absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float或者absolute定位的元素，只鞥是块元素或者表格。

96. 什么是critical CSS？

Critical CSS是一种提取首屏中 CSS 的技术，以便尽快将内容呈现给用户。这是快速加载网页首屏的好方法。

核心思路：

（1）、抽取出首页的CSS；

（2）、用行内css样式，加载这部分的css(critical CSS);

（3）、等到页面加载完之后，再加载整个css，会有一部分css与critical css重叠；

97. 什么是回流（重排）和重绘以及其区别？

回流（重排），reflow:当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变时而需要重新构建；
重绘（repaint）:当render tree中的一些元素需要更新属性，而这些属性只影响元素的外观，风格，而不会影响布局时，称其为重绘，例如颜色改变等。

注意：每个页面至少需要引发一次重排+重绘，而且重排（回流）一定会引发重绘。

触发重排（回流）的条件：

增加或者删除可见的dom元素；
元素的位置发生了改变；
元素的尺寸发生了改变，例如边距，宽高等几何属性改变；
内容改变，例如图片大小，字体大小改变等；
页面渲染初始化；
浏览器窗口尺寸改变，例如resize事件发生时等；

98. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向： line-height；
水平方向： letter-spacing；

注意： letter-spacing还可以用来消除inline-block元素间的换行符空格间隙等问题。

99. 对 WEB 标准以及 W3C 有什么理解与认识？

标签闭合，标签小写，不乱嵌套；
提高搜索机器人的搜索几率；
使用外链CSS和JS脚本；
结构行为标签分离；
文件下载和页面速度更快；
内容能被更多的用户以及更广泛的设备访问；
更少的代码和组件，易于维护，改版方便；
不需要动页面内容，同时提供打印版本也不需要复制内容，提高网站的易用性；

100. Happy Ending

到了这儿，小编希望本文能帮助到有需要的童鞋，扎实基础知识（亦或是温习遗忘的知识点），温故而知新，逐渐提升。

写在最后

本篇文章会持续保持更新。文中若有不足，亦或是有小伙伴知道还有小编没有写入的知识点的，欢迎留言，小编看到后会第一时间加上。

最后，如果觉得文章对自身有所帮助，麻烦支持一下，因为小编最近有点点想升级（一直卡在最后，真是一言难尽），谢谢大家。后继小编会更加努力推出优质的文章回馈给需要的小伙伴。（发完文，感觉生活又开始美好了）

本篇已完结

网站首页 > 技术文章 正文