CSS基础(3)-元素显示模式+三大特性

元素显示模式

目标：能够认识三种常见的 元素显示模式，并通过代码实现不同 元素显示模式 的转换

学习路径：
1. 块级元素
2. 行内元素
3. 行内块元素
4. 元素显示模式转换

1.1 块级元素

➢ 显示特点：
1. 独占一行（一行只能显示一个）
2. 宽度默认是父元素的宽度，高度默认由内容撑开
3. 可以设置宽高
➢ 代表标签：
• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

2.1 行内元素

➢ 显示特点：
1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 不可以设置宽高
➢ 代表标签：
• a、span 、b、u、i、s、strong、ins、em、del…

3.1 行内块元素

➢ 显示特点：
1. 一行可以显示多个
2. 可以设置宽高
➢ 代表标签：
• img, input、textarea、button、select……
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4.1 元素显示模式转换

➢ 目的：改变元素默认的显示特点，让元素符合布局要求

➢ 语法：

转行内元素，用display:inline;

转块级元素用display：block；

转行内块级元素用display：inline-block；

拓展1：HTML嵌套规范注意点

1. 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……

➢ 但是：p标签中不要嵌套div、p、h等块级元素

2. a标签内部可以嵌套任意元素

➢ 但是：a标签不能嵌套a标签

拓展2：居中方法总结

CSS 特性

1.继承性的介绍

➢ 特性：子元素有默认继承父元素样式的特点（子承父业）
➢ 可以继承的常见属性(文字控制属性都可以继承)
1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height
5. ……
➢ 注意点：
• 可以通过调试工具判断样式是否可以继承

控制文字的属性都能继承，

标签自己有属性就会显示自己的属性，不会继承

（拓展）继承的应用

➢ 好处：可以在一定程度上减少代码
➢ 常见应用场景：
1. 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大

（拓展）继承失效的特殊情况

➢ 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
1. a标签的color会继承失效
• 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
2. h系列标签的font-size会继承失效
• 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

2.1 层叠性的介绍

➢ 特性：
1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
➢ 注意点：
1. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

2.2 小结

➢ 如果给同一个标签设置了相同的属性，此时样式会？
• 会层叠覆盖，写在最后的会生效
➢ 如果给同一个标签设置了不同的样式，此时样式会？
• 会层叠叠加，共同作用在标签上