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 小结

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

 

版权声明:
作者:zhuim521
链接:https://zhuimwl.com/46.html
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
CSS基础(3)-元素显示模式+三大特性
元素显示模式 目标:能够认识三种常见的 元素显示模式,并通过代码实现不同 元素显示模式 的转换 学习路径: 1. 块级元素 2. 行内元素 3. 行内块元素 4. 元素……
<<上一篇
下一篇>>