Web前端进阶高薪必会的54个CSS重难点知识梳理(1)
myzbx 2025-01-08 15:46 36 浏览
本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。
因为涉及的内容较多，我分5篇内容发出来，好逐一进行让大家消化这些内容，本次我把前1-12个CSS重难点整理出来，具体内容如下：
- CSS选择器与优先级
- CSS中可继承与不可继承属性有哪些
- display的block 、inline、inline-block的区别？
- line-height 继承问题 ？
- min-width、max-width、width的包含(优先级)关系
- display属性值及作用
- 如何消除inline-block元素或图片之间的空白间隙？
- display:none与visibility:hidden的区别？
- 伪元素与伪类的区别和作用？对盒子模型的理解？
- 单行、多行文本溢出隐藏？
- 替换元素的概念与计算规则？
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）内联替换元素和块级替换元素使用上面同一套尺寸计算规则。
为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通
- PC端项目开发（1个）
- 移动WebApp开发（2个）
- 多端响应式开发（1个）
共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。
从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范
从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发
- 真机调试，云服务部署上线；
- Linux环境下 的 Nginx 部署，Nginx 性能优化；
- Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
- 企业项目域名跳转的终极解决方案，多网站、多系统部署；
- 使用 使用 Git 在线项目部署；
这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！
过程中【不涉及】任何费用和利益，非诚勿扰 。
如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自头条号！老师会邀请你进入学习，并给你发放相关资料
相关推荐
- 如何设计一个优秀的电子商务产品详情页
-
加入人人都是产品经理【起点学院】产品经理实战训练营，BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...
- 怎么在JS中使用Ajax进行异步请求?
-
大家好，今天我来分享一项JavaScript的实战技巧，即如何在JS中使用Ajax进行异步请求，让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术，可以实现异步加...
- 中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革
-
前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...
- 前端监控 SDK 开发分享_前端监控系统 开源
-
一、前言随着前端的发展和被重视，慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说，可以直接使用三方的监控，比如自己搭建一套免费的...
- Ajax 会被 fetch 取代吗?Axios 怎么办?
-
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！今天给大家带来的主题是ajax、fetch...
- 前端面试题《AJAX》_前端面试ajax考点汇总
-
1.什么是ajax？ajax作用是什么？AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...
- Ajax 详细介绍_ajax
-
1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术，其本质是利用浏览器内置的一个特殊的...
- 6款可替代dreamweaver的工具_替代powerdesigner的工具
-
dreamweaver对一个web前端工作者来说，再熟悉不过了，像我07年接触web前端开发就是用的dreamweaver，一直用到现在，身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...
- 我敢保证，全网没有再比这更详细的Java知识点总结了，送你啊
-
接下来你看到的将是全网最详细的Java知识点总结，全文分为三大部分：Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点，别眨眼，从小白到大佬、零基础到精通，你绝...
- 福斯《死侍》发布新剧照 "小贱贱"韦德被改造前造型曝光
-
时光网讯福斯出品的科幻片《死侍》今天发布新剧照，其中一张是较为罕见的死侍在被改造之前的剧照，其余两张剧照都是死侍在执行任务中的状态。据外媒推测，片方此时发布剧照，预计是为了给不久之后影片发布首款正式预...
- 2021年超详细的java学习路线总结—纯干货分享
-
本文整理了java开发的学习路线和相关的学习资源，非常适合零基础入门java的同学，希望大家在学习的时候，能够节省时间。纯干货，良心推荐！第一阶段：Java基础重点知识点：数据类型、核心语法、面向对象...
- 不用海淘，真黑五来到你身边:亚马逊15件热卖爆款推荐!
-
Fujifilm富士instaxMini8小黄人拍立得相机（黄色/蓝色）扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机，此款是mini8的小黄人特别版，除了颜色涂装成小黄人...
- 2025 年 Python 爬虫四大前沿技术:从异步到 AI
-
作为互联网大厂的后端Python爬虫开发，你是否也曾遇到过这些痛点：面对海量目标URL，单线程爬虫爬取一周还没完成任务；动态渲染的SPA页面，requests库返回的全是空白代码；好不容易...
- 最贱超级英雄《死侍》来了!_死侍超燃
-
死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...
- 停止javascript的ajax请求，取消axios请求，取消reactfetch请求
-
一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求，只能停止当前ajax请求。停止javascript的ajax请求...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)