CSS2超全知识点总结，CSS权重！important塌陷inherit 层模型px,em和rem【诗书画唱】

2021-01-22 00:44 作者:诗书画唱 0人读过 | 我要投稿

CTRL+F搜索关键词条：

代码

例子和运行效果

PPT

适合休息时听的学习视频

active激活

属性选择器

内联（行内）元素

子选择器

通用选择器

伪类选择器

分组选择器

伪类与伪元素:

after和:before

CSS权重总结

内联（行内）元素

块级元素特点

块级元素、内联（行内）元素和内联块状元素。

CSS继承

important属性的运用

！important

inherit 的属性

内联块状元素

边框

CSS布局模型

流动模型（Flow）

浮动模型 (Float)

层模型（Layer）

流动模型

浮动模型

层模型有三种形式：

绝对定位(position: absolute)

相对定位(position: relative)

固定定位(position: fixed)

浮动造成的塌陷

CSS中的单位px,em和rem

视频笔记

鼠标在上面就显示角色翅膀，移走就消失翅膀的例子

特别注意：CSS权重的顺序为：important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承。根据 CSS 规范，具体性越明确的样式规则，权重值越高。

解决“塌陷”问题有以下三个方法（个人认为自己写项目时还是常会用以下内容的）:

在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div

在使用float元素的父元素添加overflow:hidden

使用after伪元素清除浮动

PPT START

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

样式选择器指明了{}中的样式的作用对象，也就是样式作用于网页中的哪些元素。

标签选择器

类选择器

ID选择器

子选择器

通用选择器

伪类选择器

分组选择器

伪类与伪元素:

伪元素中用的最多的就是:after和:before，我们可以用这两个伪元素做很多效果！

尝试一下的代码：

a::after { content:"("attr(href) ")"; }

a::before { content: url(logo.png); }

CSS权重的顺序为：important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承。根据 CSS 规范，具体性越明确的样式规则，权重值越高。

CSS权重计算

选择器权重值的计算：

A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 对于内联样式，由于没有选择器，所以 B、C、D 的值都为 0，即 A=1, B=0, C=0, D=0（简写为 1,0,0,0，下同）。

B：计算该选择器中ID的数量。（例如，#header这样的选择器，计算为 0, 1, 0, 0）。

C：计算该选择器中伪类及其它属性的数量（包括类选择器、属性选择器等，不包括伪元素）。（例如， .logo[id='site-logo'] 这样的选择器，计算为 0, 0, 2, 0）。

D：计算该选择器中伪元素及标签的数量。（例如，p:first-letter这样的选择器，计算为0, 0, 0, 2）。

CSS权重比较

权重值的比较：

根据规范，计算权重值时，A, B, C, D 四组值，从左到右，分组比较，如果 A 相同，比较 B, 如果 B 相同，比较 C, 如果 C 相同，比较 D, 如果 D 相同，后定义的优先。

特殊的 !important：

在按照 ABCD 四组计算比较之外，在定义样式的时候，还可以对某一个属性应用 !important。需要特别注意的是这里的 "!" 与其在编程语言中的意义刚好相反，不是代表“不重要”而是代表“很重要”。

CSS2 规范中规定：!important 用于单独指定某条样式中的单个属性。对于被指定的属性，有!important 指定的权重值大于所有未用 !important 指定的规则。

简单样式权重的运用：

important属性的运用：

第一个样式的权重值为 0, 1, 1, 2，第二个样式的权重值仅为 0, 0, 0, 2。所以应用于相同元素时，应该是第一个样式生效。但是对于 color 这个属性，由于在第二个样式中用 !important 做了指定，因此color 将应用第二个样式的规则。而 font-weight 则按照规定用样式一的规则。

CSS权重总结

一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D];

A 表示内联样式，只有 1 或者 0 两个值；

B 表示规则中ID的数量；

C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量；

D 表示规则中标签和伪元素的数量；

比较时从高位到低位（从 A 到 D）分别比较，高位相同才需要比较低位；

有 !important 标记的属性权重值无视没用 !important 指定的一切情况；

多次指定 !important 时，相互抵销。

inherit 而来的属性定义，优先级低于任何直接指定的属性值。

CSS继承

CSS的某些样式是具有继承性的。继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。每个属性值还有一个可能为 inherit的值。表示元素的该样式属性继承自父级元素，与父级元素的定义一致。

对于 inherit 的属性：继承而来的属性值，权重永远低于明确指定到元素的定义。只有当一个元素的某个属性没有被直接指定时，才会继承父级元素的值。

下面的例子中，样式规则并未针对 span 标签指定 color 属性，但是 span中的文字会显示为红色，这就是因为span的color属性默认值为inherit.

在CSS中，html中的标签元素大体被分为三种不同的类型：块级元素、内联（行内）元素和内联块状元素。

常用的块状元素有：

常用的内联元素有：

常用的内联块状元素有：

设置display:block就是将元素显示为块级元素。

块级元素特点：

每个块级元素都从新的一行开始，并且其后的元素也另起一行。（即一个块级元素独占一行）

元素的高度、宽度、行高以及顶和底边距都可设置。

元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联（行内）元素

块状元素也可以通过代码display:inline将元素设置为内联（行内）元素。

内联（行内）元素特点：

和其他元素都在一行上；

元素的高度、宽度、行高及顶部和底部边距不可设置；

元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

内联块状元素特点：

和其他元素都在一行上；

元素的高度、宽度、行高以及顶和底边距都可设置。

边框

盒子模型的边框就是围绕着内容及补白的线，这条线可以设置它的粗细、样式和颜色(边框三个属性)。

注意：

border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的#号不要忘掉。

CSS布局模型

布局模型与盒模型都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。

在网页中，元素有三种布局模型：

流动模型（Flow）

浮动模型 (Float)

层模型（Layer）

流动模型

流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型

如果想让两个块状元素并排显示，可以通过设置元素浮动来实现。任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。

注意：设置浮动的同时一定要先设置块状元素的宽度，且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。

层模型

如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

绝对定位(position: absolute)

相对定位(position: relative)

固定定位(position: fixed)

层模型--绝对定位（相对于父类）

如果想为元素设置层模型中的绝对定位，需要设置属性position为absolute，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如果想为元素设置层模型中的相对定位，需要设置position属性为relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。