Web前端进阶高薪必会的54个CSS重难点知识梳理(1)

CSS/设计
443
0
0
2023-01-05

本次我把CSS中的重难点整理出来,总共54个核心知识点,供大家复习,希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点,同时也是面试必问的内容

img

因为涉及的内容较多,我分5篇内容发出来,好逐一进行让大家消化这些内容,本次我把前1-12个CSS重难点整理出来,具体内容如下:

  1. CSS选择器与优先级
  2. CSS中可继承与不可继承属性有哪些
  3. display的block 、inline、inline-block的区别?
  4. line-height 继承问题 ?
  5. min-width、max-width、width的包含(优先级)关系
  6. display属性值及作用
  7. 如何消除inline-block元素或图片之间的空白间隙?
  8. display:none与visibility:hidden的区别?
  9. 伪元素与伪类的区别和作用?对盒子模型的理解?
  10. 单行、多行文本溢出隐藏?
  11. 替换元素的概念与计算规则?

1、CSS选择器与优先级

选择器

优先级权重

等级

实例

!important

10000

一等

a{color:red !important;}

内联样式

1000

二等

<p style='color:blue'><p>

id选择器

100

三等

#box{color:red;}

class类选择器、属性选择器、伪类选择器

10

四等

.box{color:red;}

标签选择器、伪元素选择器

1

五等

div{color:red;}

相邻兄弟选择器、子选择器、后代选择器、通配符选择器

0

六等

h2+p{color:red;}ul>li{color:red;}

继承的样式没有权值




CSS选择器的优先级比较规则

上面我们把选择器分为了 6 个等级,那么选择器在比较时,也是按等级逐个来比较的。
第一层比较:找第一等级选择器 ,如果有以这个样式为主 ,如果没有,则看第二等级选择器
第二层比较:找第二等级选择器 ,个数多的权重最高,如果都没有,则看第三等级选择器。
第三层比较:找第三等级选择器 ,个数多的权重最高,如果都没有,则看第四等级选择器。
第四层比较:找第四等级选择器 ,个数多的权重最高,如果都没有,则看第五等级选择器。
第五层比较:找五等级选择器 ,个数多的权重最高,如果都没有,则看第六等级选择器
第六层比较:找六等级选择器 ,个数多的权重最高,如果都没有,看是否继承父元素样式。
如果在比较时,选择器权重优先级相同,那写在后面的样式会覆盖掉前面的样式

特别注意,易错点

选择器最终都是要选择到元素本身才可以,否则元素的样式则以默认或继承过来的样式为主,默认和继承的样式权重最低
!important 的作用是提升优先级。换句话说,加了这句的样式的优先级是最高的(比行间样式的优先级还高),不过这种方式基本不用,因为不利于 css 样式的重写和 js 对样式的操作。

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

可继承属性
字体系列的属性:font-family、font-weight、font-size、font-style
文本系列属性:text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、color
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image
其它:visibility、cursor
不可继承
盒模型相关:margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、定位与浮动:position、left、right、top、bottom、z-index、float、clear其它:display、overflow、able-layout、vertical-align、page-break-after、page-bread-before、unicode-bidi。

3、display的block 、inline、inline-block的区别?

block: 会独占一行,可以设置 width、height、margin 和 padding 属性;
inline: 元素不会独占一行,设置 width、height 属性无效。但可以设置水平方向的 margin 和 padding 属性,设置垂直方向的 padding 和 margin无效;
inline-block: 元素可以设置width、height、margin和padding属性,并且不会独占一行,之后的内联对象会被排列在同一行内。

4、line-height 继承问题 ?

line-height 值的三种单位,在继承时的差异点。


父元素 line-height 值

继承规则

子元素 line-height 值

50px

直接继承该 值

50px

2

直接继承该比例

2

200%

继承%百分比计算后的值 如果父元素font-size: 20px; 则计算得到父元素 line-height 的值是 40px;

40px

<style>
 .box {width: 350px;height: 100px;background-color: pink;font-size: 30px;
   line-height: 50px; /*情况一:子元素直接继承父元素值*/ 
   /*line-height:2; 情况二:子元素直接继承父元素值*/ 
   /*line-height:200%; 情况三:子元素继承%百分比换算后的值 200%*30=60px */
}
 .item1 {font-size: 20px;
   /*情况一:从父元素直接继承过来 line-height:50px; */ 
   /*情况二:从父元素直接继承过来 line-height:2; 最终2*20px 子元素行高为40px*/ 
   /*情况三:子元素继承父元素%百分比换算后的值60px ,所以子元素line-height:60px*/
}
</style>
<body> 
 <div class="box"> 
   <div class="item1">直接继承父元素的line-height:50px;</div> 
 </div>
</body>

5、min-width、max-width、width的包含(优先级)关系

属性的含义:
min-width 限制元素的最小宽度
max-width 限制元素的最大宽度
width 元素的宽度
三者之间的优先级:
min-width > max-width > width 即使width后面出现!important
当浏览器缩小导致元素宽度小于 min-width 时,元素的 width 就会被 min-width 的值取代,浏览器出现滚动条来容纳元素。
当浏览器放大导致元素的宽度大于 max-width 时,元素的 width 就会被 max-width 值取代。
当 min-width 值大于 max-width 时,则以 min-width 值为准。
<style>
 .box {
   min-width: 600px;
   max-width: 1000px;
   /*当浏览器缩放过程中,计算得到width值<min-width时,则宽度为600px*/ 
   /*当浏览器放大程中,计算得到width值>max-width时,则宽度为1000px*/ 
   width: 100%;
   height: 100px;
   background-color: red;
}
</style>
<body> 
 <div class="box"></div> 
 <div class="item"></div>
</body>

6、display属性值及作用

display的属性值非常多,以下列出目前常见的


属性值

作用

none

元素不显示,并且会从文档流中移除。

block

设置元素为块级元素,块级元素可以独占⼀⾏,可设宽⾼,默认宽为父元素宽。

inline

行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。

inline-block

默认宽度为内容宽度,可以设置宽高,同行显示。

flex

弹性布局,采用flex布局元素称为flex容器。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。项目(子项)默认沿主轴排列

grid

网格布局,网格是一组相交的水平线和垂直线,它定义了网格的列和行。这个元素的所有直系子元素将成为网格元素

list-item

像块类型元素一样显示,并添加样式列表标记。

table

此元素会作为块级表格来显示。

inline-table

inline-table得到的是,外⾯是“内联盒⼦”,⾥⾯是“table盒⼦”。

table-cell

元素会作为⼀个表格单元格显⽰,类似 td和 th。

table-row-group

此元素会作为一个或多个行的分组来显示(类似 <tbody>)。

table-header-group

此元素会作为一个或多个行的分组来显示(类似 <thead>)。规定应该从父元素继承 display 属性的值

table-footer-group

此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。

table-row

此元素会作为一个表格行显示(类似 <tr>)。

table-column-group

此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。

table-column

此元素会作为一个单元格列显示(类似 <col>)

table-caption

此元素会作为一个表格标题显示(类似 <caption>)

inherit

规定应该从父元素继承 display 属性的值。

8、如何消除inline-block元素或图片之间的空白间隙?

给图片或元素设置float:left; 不足:有些容器不能设置浮动,会影响到后面元素等
将所有元素写在同一行,不要换行。不足:代码不美观
将元素的父元素设置font-size:0; 。同时需要单独给元素自身加上font-size样式
将元素的父元素设置 letter-spacing:-8px; 同时需要将元素自身加上letter-spacing:normal;
对于单张图片产生的空隙,可以加上display:block;

9、display:none与visibility:hidden的区别?

display: none; 加在元素自身,元素自身隐藏,元素占据的位置也不存在了
visibility: hidden; 加在元素自身,元素自身隐藏,元素占据的位置依然存

关于 display: none 与 visibility 的对比


区别

display: none

visibility: hidden

空间占据性

不占据空间

占据原空间

在渲染树中

不渲染元素

渲染元素,只是不可见

重排与重绘

修改此属性,会产生回流与重绘

修改此属性不会产生重排,只会产生重绘

继承性

非继承属性,子孙节点会随着父节点从渲染树消失,通过修改子孙节点的属性也无法显示;

继承属性,可通过设置visibility:visible可以让子孙节点显示

对子元素影响

子孙元素全部隐藏不可见。并且只要父元素隐藏,子孙没有任何办法可见

子孙元素全部不可见,但是给子孙加上 visibility: visible;时,子孙可见。

事件触发

不触发

不触发

9、伪元素与伪类的区别和作用?

伪元素: 在内容元素的前后插入额外的元素或样式,但是这些元素实际上并不在文档中生成。它们只在外部显示可见,但不会在文档的源代码中找到它们,因此,称为“伪”元素。例如:

<style>
   div{color:blue;}
   div::before {content: "第一章:";}/*最前面加上文字 第一章*/
   div::after {content: "Hot!";}/*最后面加上文字 Hot!*/
   div::first-line {background: red;}/*第一行文字添加红色背景色*/
   div::first-letter {font-size: 30px;}/*第一行第一个字体大小为30px*/
</style>
<body> 
   <div>我是用来测试伪元素的作用</div>
</body>

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

a:hover {color: #FF00FF}
p:first-child {color: red}

复制

10、对盒子模型的理解?

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 盒模型(怪异盒模型)

11、单行、多行文本溢出隐藏?

① 单行文本省略代码
div {
white-space: nowrap; /*禁止换行*/
text-overflow: ellipsis; /*超出范围的文本内容用省略号显示*/
overflow: hidden; /*超出部分隐藏,只有设置了这个属性,text-overflow:ellipsis才生效*/
}
鼠标放上去,要显示单行省略的内容,代码如下:
div:hover {
width: auto;
}
② 多行文本省略代码
div {
overflow: hidden; /*超出部分隐藏,只有设置了这个属性,text-overflow:ellipsis才生效*/
text-overflow: ellipsis; /*超出范围的文本内容用省略号显示*/
display: -webkit-box; /*对象作为弹性盒子模型显示*/
-webkit-line-clamp: 2; /*来限制一个块元素显示文本的行数*/
-webkit-box-orient: vertical; /*必须结合的属性,设置伸缩盒子对象的子元素的排列方式*/
}
注意点:这里要注意盒子的高度必需要满足这个条件:height 值大小 = line-height 的值 乘以 -webkit-line-clamp 的值
鼠标放上去,要显示单行省略的内容,代码如下:
div:hover {
text-overflow: inherit;
overflow: visible;
-webkit-line-clamp: inherit;
}

12、替换元素的概念与计算规则?

在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。
简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素
典型的可替换元素有:<img>、<video>、<iframe>、<embed>
替换元素的计算规则
替换元素的尺寸从内而外分为3类:固有尺寸、HTML尺寸和CSS尺寸。
(1)固有尺寸指的是替换内容原本的尺寸。例如,图片、视频作为一个独立文件存在的时候,都是有着自己的宽度和高度的。
(2)HTML尺寸只能通过HTML原生属性改变,这些HTML原生属性包括<img>的width和height属性、<input>的size属性、<textarea>的cols和rows属性等。
(3)CSS尺寸特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置的尺寸,对应盒尺寸中的content box。
这3层结构的计算规则具体如下
(1)如果没有CSS尺寸和HTML尺寸,则使用固有尺寸作为最终的宽高。
(2)如果没有CSS尺寸,则使用HTML尺寸作为最终的宽高。
(3)如果有CSS尺寸,则最终尺寸由CSS属性决定。
(4)如果“固有尺寸”含有固有的宽高比例,同时仅设置了宽度或仅设置了高度,则元素依然按照固有的宽高比例显示。
(6)内联替换元素和块级替换元素使用上面同一套尺寸计算规则。

54个CSS重难点整理,12-24篇