06_CSS继承-层叠-类型

stray375
64 阅读6分钟

06_CSS继承-层叠-类型

# 继承 
​
# 层叠
​
# 类型

01_CSS 属性继承

# 属性继承性(inherited)
1. CSS 某些属性具有继承性
​
# 继承性概述 
1. 如果一个元素具备继承性，那么在该元素上设置之后，它的后代元素都可以继承这个属性
2. 如果后代元素自己有设置该属性，那么就优先使用后代元素自己设置的属性值(不管继承过来的属性值的权重有多高)
​
# 如何知道一个属性是否具有继承性呢？
1. 常见的 :
    1.1. font-size
    1.2. font-family
    1.3. font-weight
    1.4. line-weight
    1.5. color
    1.6. text-align 
2. 不用可以去记住这些，用的多了，自然就记住了
​
# 文档中也会说明，某个属性是否有继承性
​
# 扩展(了解)
1. 继承过来的是计算值，而不是设置值

1.1.图示——文档中继承性的说明

image-20241022194812999

1.2. 常用的继承属性有哪些(不用记)

image-20241022194938682

02_CSS 属性的层叠

# CSS 的翻译是 : 层叠样式表，那么 `层叠` 的含义到底什么呢？
1. 对于一个元素来说，相同的一个属性，我们可以通过不同的选择器来给它进行多次设置
2. 这样属性就会被一层一层的覆盖上去
3. 最终只会有一个生效
​
# 那么多样式属性覆盖上去，最终哪一个会生效呢？
1. 判断一 : 选择器的权重，权重大的生效，根据权重可以判断出优先级
2. 判断二 : 先后顺序，如果权重相同，那么后面设置的会生效
​
# 元素的权重如何计算
1. 根据选择器的权重来计算

2.1. 选择器的权重

# 选择器的权重 
1. 为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）
​
# 各个选择器的权重如下：
1. !important  :  10000
2. 内联样式 : 1000
3. id 选择器 : 100
4. 类选择器，属性选择器，伪类选择器 : 10
5. 元素，伪元素选择器 : 1
6. 通配符选择器 : 0

image-20241023113217533

03_HTML 元素的类型

# 概述
1. 我们常说 div 是块级元素会独占一行，span 是行内级元素会在同一行显示
​
# 什么是块级元素？什么是行内级元素？
1.
​
# HTML定义元素类型的思路 
1. HTML 元素有很多，比如: `<p>`,`<div>`,`<span>`,`<img>`,`<a>`,`<h1>`
Q : 当我们将元素放到页面上的时候，这个元素到底占据页面中一行多大的空间呢？
A : 为什么我们这里只说一行呢，因为垂直方向的高度通常是由内容决定的
​
# 早期的 HTML 是为了替代报纸
1. h1 元素的标题，我们必然希望它独占一行，其它内容不应该和我的标题放在一起
2. p 元素表示一个段落，必然也应该独占一行, 其他的内容不应该和我的段落放在一起
3. 而类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行
​
# 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类
1. 块级元素(block-level elements) : 独占父元素的一行
2. 行内级元素(inline-level elements) : 多个行内级元素可以在父元素的同一行显示

04_通过 CSS 修改元素的类型

# 我们应该有这样的一个概念，事实上元素没有本质的区别 
​
1. div 是块级元素，span 是行内级元素
2. div 之所以是块级元素仅仅是因为浏览器默认设置了 display : block; 属性而已 
​
# 我们是否可以通过display 来改变元素的特征呢？
1. 当然可以

05_CSS 属性 —— display

# display 属性概述 
1. display 属性可以用来修改元素的显示效果
​
# display 四个常用的属性值 
1. block : 让元素显示为块级元素
2. inline : 让元素显示为行内元素
3. inline-block : 让元素同时具备行内级、块级元素的特征
4. none : 隐藏元素 
​
# 扩展
1. 实际上 display 还有别的值，比如 flex ，这个在 flex 布局的时候深入了解
​

5.1. display 属性 block 值

# 概述
1. 独占父元素的一行
2. 可以随意的设置宽高
3. 高度默认由内容决定

5.2. display 属性 inline-block 值

# 概述
1. 跟其它元素在同一行显示
2. 可以随意设置宽高
3. 可以这样理解：
    3.1. 对外来说，它是一个行内级元素
    3.2. 对内来说，它是一个块级元素

5.3. display 属性 inline 值

# 概述
1. 跟其它行内及元素在同一行显示
2. 不可以随意设置宽高
3. 宽高都由内容决定

06_编写 HTML 时的注意事项

# 注意事项 
1. 块级元素,inline-block 元素 
    1.1. 一般情况，可以包含其它任何元素(块级元素，行内级元素，inline-block元素)
    1.2. 特殊情况，p 元素不能包含其它块级元素
    
2. 行内元素(比如: a span strong等)
    2.1. 一般情况下，智能包含行内级元素

07_元素的隐藏方法

# 元素的隐藏
1. 让元素在页面不显示
​
# 方式一 ： display 设置为 none 
1. 元素不显示出来，并且也不占据元素位置，不占据任何空间(和不存在一样)
​
# 方式二 : visibility 设置为 hidden 
1. 默认为 visiable , 元素是可见的
2. 设置为 hidden，虽然元素是不可见的，但是会占据元素应该占据的空间
​
# 方式三 : rgba 设置颜色，将 a 的值设置为 0
1. rgba 的 a 设置的 alpha 的值，可以设置透明度，不影响子元素 
​
# 方式四 : opacity 设置透明度，设置为 0 
1. 设置整个元素的透明度，会影响所有的子元素

08_CSS 属性之 overflow

# overflow 概述 
1. 用于控制内容益处的时候的行为
​
# 常用属性值 
1. visiable : 溢出的内容照样可见
2. hidden : 溢出的内容直接被裁剪
3. scroll : 溢出的内容被裁剪，但可以通过滚动机制查看
    3.1. 会一直显示滚动条区域，滚动条区域占用的空间属于 width,height
4. auto : 自动根据内容是否一处来决定是否提供滚动机制

09_CSS 样式不生效技巧

# CSS 样式不生效可能原因 
1. 选择器的优先级太低
2. 选择器没有选中对应的元素 
3. CSS 属性使用的形式不对
    3.1. 元素不支持此 CSS 属性，比如 span 默认是不支持 width/height 的 
    3.2. 浏览器不支持此 CSS 属性，比如旧版的浏览器不支持一些 CSS module3 的属性
    3.3. 被同类型的 CSS 属性给覆盖了，比如 font 覆盖 font-size 
​
# 建议 
1. 充分利用浏览器的开发者工具进行调试(增加，修改样式)，查看报错信息等
avatar
文章
阅读
粉丝