草庐IT

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

艾编程教育 2023-03-28 原文

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

 

因为涉及的内容较多，我分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）内联替换元素和块级替换元素使用上面同一套尺寸计算规则。

 

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《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天挑战学习计划，来自博客园！老师会邀请你进入学习，并给你发放相关资料

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程

进阶重难点data-trackclasstrackHtml/Css

有关Web前端进阶高薪必会的54个CSS重难点知识梳理（1）的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. ruby - 如何配置 Ruby Mechanize 代理以通过 Charles Web 代理工作？ - 2

    我正在使用Ruby/Mechanize编写一个“自动填写表格”应用程序。它几乎可以工作。我可以使用精彩CharlesWeb代理以查看服务器和我的Firefox浏览器之间的交换。现在我想使用Charles查看服务器和我的应用程序之间的交换。Charles在端口8888上代理。假设服务器位于https://my.host.com。.一件不起作用的事情是:@agent||=Mechanize.newdo|agent|agent.set_proxy("my.host.com",8888)end这会导致Net::HTTP::Persistent::Error:...lib/net/http/pe

  4. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  5. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  6. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  7. ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？

  8. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  9. css - Jekyll 和自定义 CSS - 2

    有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？ 最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

  10. 适用于Web开发的Python还是Ruby？ - 2

    Asitcurrentlystands,thisquestionisnotagoodfitforourQ&Aformat.Weexpectanswerstobesupportedbyfacts,references,orexpertise,butthisquestionwilllikelysolicitdebate,arguments,polling,orextendeddiscussion.Ifyoufeelthatthisquestioncanbeimprovedandpossiblyreopened,visitthehelpcenter提供指导。11年前关闭。我是一位精通HTML

随机推荐