CSS三大特性 元素显示模式

目录

一、元素显示模式

1. 块级元素

2. 行内元素

3. 行内块元素

4. 元素显示模式转换

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

拓展2：居中方法总结

二、CSS三大特性

1. 继承性

1.4. 继承的应用

1.5继承失效的特殊情况

2. 层叠性

3. 优先性

---

一、元素显示模式

1. 块级元素

属性：display：block

显示特点：

• 独占一行（一行只能显示一个）
• 宽度默认是父元素的宽度，高度默认由内容撑开
• 可以设置宽高

代表标签：

• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

2. 行内元素

属性：display：inline 

显示特点：

• 一行可以显示多个
• 宽度和高度默认由内容撑开
• 不可以设置宽高

代表标签：

• a、span 、b、u、i、s、strong、ins、em、del……

3. 行内块元素

属性：display：inline-block

显示特点：

• 一行可以显示多个
• 可以设置宽高

代表标签：

• input、textarea、button、select……
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4. 元素显示模式转换

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

语法：

 

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

1. 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等…… 但是：p标签中不要嵌套div、p、h等块级元素
2. a标签内部可以嵌套任意元素 但是：a标签不能嵌套a标签

拓展2：居中方法总结

二、CSS三大特性

1. 继承性

1.1. 特性：

          子元素有默认继承父元素样式的特点（子承父业）

1.2. 可以继承的常见属性：

• color
• font-style、font-weight、font-size、font-family
• text-indent、text-align
• line-height
• ……

1.3. 注意点：

• 可以通过调试工具判断样式是否可以继承

1.4. 继承的应用

好处：可以在一定程度上减少代码

  常见应用场景：

•  可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
•  直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

1.5继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

• a标签的color会继承失效
• 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
• h系列标签的font-size会继承失效
• 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
• div的高度不能继承，但是宽度有类似于继承的效果
• 宽度属性不能基继承，但是div有独占一行的特性 

2. 层叠性

特性：

• 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
• 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

 注意：

• 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

3. 优先性

 特性：

        不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

  优先级公式：

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意：

• !important写在属性值的后面，分号的前面！
• !important不能提升继承的优先级，只要是继承优先级最低！
• 实际开发中不建议使用 !important 。