10_CSS的继承-层叠-类型.pdfVIP

CSS继承-层叠-元素类型

王红元coderwhy

目录

1CSS属性的继承

content

2CSS属性的层叠

3CSS属性的类型

4display属性

5元素的隐藏

6overflow属性

coderwhyCSS的属性继承

◼CSS的某些属性具有继承性(Inherited):

如果一个属性具备继承性,那么在该元素上设置后,它的后代元素都可以继承这个属性;

当然,如果后代元素自己有设置该属性,那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);

◼如何知道一个属性是否具有继承性呢?

常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;

这些不用刻意去记,用的多自然就记住了;

◼另外要多学会查阅文档,文档中每个属性都有标明其继承性的:

注意(了解):

继承过来的是计算值,而不是设置值

coderwhy常见的继承属性有哪些呢?(不用记)

coderwhyCSS属性的层叠

◼CSS的翻译是层叠样式表,什么是层叠呢?

对于一个元素来说,相同一个属性我们可以通过不同的选择器给它进行多次设置;

那么属性会被一层层覆盖上去;

但是最终只有一个会生效;

◼那么多个样式属性覆盖上去,哪一个会生效呢?

判断一:选择器的权重,权重大的生效,根据权重可以判断出优先级;

判断二:先后顺序,权重相同时,后面设置的生效;

◼那么如何知道元素的权重呢?

coderwhy选择器的权重

◼按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）

!important：10000

内联样式：1000

id选择器：100

类选择器、属性选择器、伪类：10

元素选择器、伪元素：1

通配符：0

coderwhyHTML元素的类型

◼在前面我们会经常提到div是块级元素会独占一行,span是行内级元素会在同一行显示.

到底什么是块级元素,什么是行内级元素呢?

◼HTML定义元素类型的思路:

HTML元素有很多,比如h元素/p元素/div元素/span元素/img元素/a元素等等;

当我们把这个元素放到页面上时,这个元素到底占据页面中一行多大的空间呢?

✓为什么我们这里只说一行呢?因为垂直方向的高度通常是内容决定的;

比如一个h1元素的标题,我们必然是希望它独占一行的,其他的内容不应该和我的标题放在一起;

比如一个p元素的段落,必然也应该独占一行,其他的内容不应该和我的段落放在一起;

而类似于img/span/a元素,通常是对内容的某一个细节的特殊描述,没有必要独占一行;

◼所以,为了区分哪些元素需要独占一行,哪些元素不需要独占一行,HTML将元素区分(本质是通过CSS的)成了两类:

块级元素（block-levelelements）:独占父元素的一行

行内级元素（inline-levelelements）:多个行内级元素可以在父元素的同一行中显示

coderwhy通过CSS修改元素类型

◼前面我们说过,事实上元素没有本质