当前位置：首页 > news >正文

css知识点梳理2

news 2025/7/7 7:31:01

1. 选择器拓展

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

1.1 后代选择器

定义：

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

# 以下语法表示选择元素 1 里面的所有元素 2 (后代元素)元素1 元素2 {样式声明
}# 举例: 选择 ul 里面所有的 li 标签元素
ul li {样式声明
}

语法说明：

元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 可以是任意基础选择器

1.2 子选择器

定义：

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。（简单理解就是选亲儿子元素）

语法：

# 下面语法表示选择元素1 里面的所有直接后代(子元素) 元素2
元素1 > 元素2 {样式声明
}# 举例: 选择div里面最近一级 p 标签元素
div > p {样式声明
}

语法说明：

元素1 和元素2 中间用大于号隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

1.3 并集选择器

定义：

并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

# 下面语法表示选择 元素1 和 元素2
元素1, 元素2 {样式声明
}

# 举例：选择 ul 和 div 标签元素
ul, div {样式声明
}

语法说明：

元素1 和元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

1.4 伪类选择器

anchor伪类：专用于控制链接的显示效果

:link	a:link	选择所有未被访问的链接。
:visited	a:visited	选择所有已被访问的链接。
:active	a:active	选择活动链接。
:hover	a:hover	选择鼠标指针位于其上的链接。

<style>a:link{color: red;}a:visited{color: coral;}a:hover{color: blue;}a:active{color: rebeccapurple;}</style>

:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况 <input> 类表单元素才能获取<style>input: focus {background-color: yellow;}
</style>

before after伪类

before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。并且在下节课的浮动清除部分也有非常重要的应用

:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。
:before	p:before	在每个 <p> 元素的内容之前插入内容。
:after	p:after	在每个 <p> 元素的内容之后插入内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1 p:first-child{color: red;}/* 设置div中最后一个div元素字体颜色为蓝色如果最后一个元素不是div则设置失效*/.c1 div:last-child{color: blue;}p#i1:after{content:"hello";color: pink;display: block;}/* css3规范建议写法双冒号 */.c1::before{content: "枫Sir";font-size: 18px;color: brown;}</style></head>
<body><div class="c1"><p>item1</p><p>item1</p><div>item1</div><!-- <p>item1</p> -->
</div><p id="i1">p标签</p></body>
</html>

1.5 样式继承

CSS的样式表继承指的是，特定的CSS属性向下传递到子孙元素。总的来说，一个HTML文档就是一个家族，然后html元素有两个子元素，相当于它的儿子，分别是head和body，然后body和head各自还会有自己的儿子，最终形成了一张以下的家族谱。

在上图中，可以看到，body的子元素有三个，h1、p和ul，ul也有几个子元素，p也有1个子元素，那么li和a就都是body的后代元素。有时可能我们在body里面设置了一些属性，结果，body下面所有的后代元素都可能享受到，这就是样式继承。就像一句俗语一样，“龙生龙，凤生凤，老鼠的儿子会打洞”。样式继承，可以给我们的网页布局带来很多的便利，让我们的代码变得更加简洁，但是，如果不了解，或者使用不当，也有可能会给我们带来很多不必要的麻烦。

因此，如果了解了哪些样式是会继承到后代元素的，那么就可以避免这些问题的发生了。

文本相关属性
font-family	font-size	letter-spacing	line-height
font-style	font-variant	text-align	text-indent
font-weight	font	text-transform	word-spacing
color	direction
列表相关属性
list-style-image	list-style-position	list-style-type	list-style
表格和其他相关属性
border-collapse	border-spacing	caption-side	empty-cells
cursor

1.6 选择器优先级

继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

body{color:red;}    <p>helloyuan</p>

这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

p{color:green}

发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。

/*
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性1 内联样式表的权值最高               style=""           1000；2 统计选择符中的ID属性个数。         #id                1003 统计选择符中的CLASS属性个数。      .class             104 统计选择符中的HTML标签名个数。     标签名              1按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
*/

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{color: red;}#i1{color: coral;}div{color: greenyellow;}/*.c2 .c3 .c4 span{*//*    color: orange;*//*}*/.c2 .c4 span{color: blue;}.c2 .c3 .c5{color: rebeccapurple;}.c2 .c4 .c5{color: darkcyan;}</style></head>
<body><div class="c1" id="i1">item1</div><div class="c2"><div class="c3"><div class="c4"><span class="c5">item2</span></div></div>
</div></body>
</html>

1、有!important声明的规则高于一切。

2、如果!important声明冲突，则比较优先权。

3、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。

4、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

5、用数字表示只是说明思想，一万个class也不如一个id权值高

2. css的显示模式

定义：

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

作用：

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

2.1 块元素

常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

<div> 标签是最典型的块元素。

块级元素的特点：

比较霸道，自己独占一行。
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素内不能放块级元素

<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div> 
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

2.2 行内元素

常见的行内元素：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意： 链接里面不能再放链接特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

2.3 行内块元素

常见的行内块标签：

<img />、<input />、<td>

它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。
一行可以显示多个（行内元素特点）。
默认宽度就是它本身内容的宽度（行内元素特点）。
高度，行高、外边距以及内边距都可以控制（块级元素特点）。

2.4 显示模式总结

学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。

2.5 显示模式转换

简单理解:

一个模式的元素需要另外一种模式的特性比如想要增加链接 <a> 的触发范围。

转换方式

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

3. 盒子模型

3.1 网页布局

网页布局的核心本质：就是利用 CSS 摆盒子。

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子 Box 。
利用 CSS 设置好盒子样式，然后摆放到相应位置。
往盒子里面装内容

3.2 盒子模型组成

盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容

3.3 盒子边框

border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式边框颜色；

border : border-width || border-style || border-color;

边框样式 border-style 可以设置如下值：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

边框简写：

border: 1px solid red;

边框分开写法：

border-top: 1px solid red; /* 只设定上边框，其余同理 */

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse:collapse;

collapse 单词是合并的意思

border-collapse: collapse; 表示相邻边框合并在一起

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

测量盒子大小的时候,不量边框。
如果测量的时候包含了边框,则需要 width/height 减去边框宽度

3.4 盒子内边距

padding 属性用于设置内边距，即边框与内容之间的距离

合写属性：

分写属性：

1、当我们给盒子指定 padding 值之后，发生了 2 件事情：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。

2、内边距对盒子大小的影响：

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3、解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可

3.5 盒子外边距

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

外边距典型应用：

外边距可以让块级盒子水平居中的两个条件：

盒子必须指定了宽度（width）。
盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

外边距合并：

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况:

1、相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加 margin 值。

2、嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

清除内外边距：

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

 * {padding:0;   /* 清除内边距 */margin:0;    /* 清除外边距 */}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

4. 元素的显示与隐藏

目的（本质）

让一个元素在页面中消失或者显示出来
场景

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

4.1 display显示

display 设置或检索对象是否及如何显示（重点！）

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： display 隐藏元素后，不再占有原来的位置。
后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：

配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛

4.2 visibility可见性

visibility 属性用于指定一个元素应可见还是隐藏（了解即可！）

visibility：visible ; 　元素可视

visibility：hidden; 　元素隐藏

特点：visibility 隐藏元素后，继续占有原来的位置。（停职留薪）
如果隐藏元素想要原来位置，就用 visibility：hidden
如果隐藏元素不想要原来位置，就用 display：none (用处更多重点）

4.3 overflow溢出

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么（重点！）

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

实际开发场景：

清除浮动
隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

4.4 显示与隐藏总结

属性	区别	用途
display 显示（重点）	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility 可见性（了解）	隐藏对象，保留位置	使用较少
overflow 溢出（重点）	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

1. 选择器拓展

1.1 后代选择器

1.2 子选择器

1.3 并集选择器

1.4 伪类选择器

1.5 样式继承

1.6 选择器优先级

2. css的显示模式

2.1 块元素

2.2 行内元素

2.3 行内块元素

2.4 显示模式总结

2.5 显示模式转换

3. 盒子模型

3.1 网页布局

3.2 盒子模型组成

3.3 盒子边框

3.4 盒子内边距

3.5 盒子外边距

4. 元素的显示与隐藏

4.1 display显示

4.2 visibility可见性

4.3 overflow溢出

4.4 显示与隐藏总结

相关文章：