前言
持续总结输出中，今天分享的是Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性
1、块级元素
特点:
独占一行(一行只能显示一个)宽度默认是父元素的宽度，高度默认由内容撑开可以设置宽高
代表标签:
• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…
代码参考：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 块: 独占一行; 宽度默认是父级100%; 添加宽高都生效 */div {width: 300px;height: 100px;background-color: pink;}</style></head><body><div>治愈理财迷茫，创造复利人生</div><div>富有的习惯，决定你一生的财富！</div></body></html>
2、行内元素
特点:
一行可以显示多个宽度和高度默认由内容撑开不可以设置宽高（替换元素除外）
代表标签:
• a、span 、b、u、i、s、strong、ins、em、del…
代码参考：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 行内: 不换行; 设置宽高不生效; 尺寸和内容的大小相同 */span {width: 200px;height: 200px;background-color: pink;}</style></head><body><span>富有的习惯，决定你一生的财富！</span><span>治愈理财迷茫，创造复利人生</span></body></html>
3、行内块元素
特点:
一行可以显示多个宽度和高度默认由内容撑开不可以设置宽高（替换元素除外）
代表标签:
• a、span 、b、u、i、s、strong、ins、em、del…
代码参考：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 行内块: 一行显示多个; 加宽高生效 */img {width: 100px;height: 100px;}input{width:100px;height:24px;}div{margin-bottom: 10px;}</style></head><body><img src="./images/2.jpg" alt=""><img src="./images/2.jpg" alt=""><div><input type="text"><input type="text"></div><div><textarea name="" id="" cols="30" rows="10"></textarea><textarea name="" id="" cols="30" rows="10"></textarea></div><div><button>提交</button><button>重置</button></div> </body></html>
4、元素显示模式转换
改变元素默认的显示特点，让元素符合布局要求
代码参考：
转换成为块级元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 行内: 不换行; 设置宽高不生效; 尺寸和内容的大小相同 */span {width: 200px;height: 200px;background-color: pink;/* 块 */display: block;}</style></head><body><span>富有的习惯，决定你一生的财富！</span><span>治愈理财迷茫，创造复利人生</span></body></html>
转换成为行内块元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 块: 独占一行; 宽度默认是父级100%; 添加宽高都生效 */div {width: 300px;height: 100px;background-color: pink;/* 行内块 */display: inline-block;}</style></head><body><div>治愈理财迷茫，创造复利人生</div><div>富有的习惯，决定你一生的财富！</div></body></html>
转换成为行内元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 块: 独占一行; 宽度默认是父级100%; 添加宽高都生效 */div {width: 300px;height: 100px;background-color: pink;/* 行内 */display: inline;}</style></head><body><div>治愈理财迷茫，创造复利人生</div><div>富有的习惯，决定你一生的财富！</div></body></html>
4、HTML嵌套规范注意点
块级元素一般作为大容器，可以嵌套:文本、块级元素、行内元素、行内块元素等等…
但是: p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
但是:a标签不能嵌套a标签
参考代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- p 和 h标题不能相互嵌套 --><p><h1>理财就是理生活</h1></p><!-- p里面不能包含div --><p><div>治愈理财迷茫，创造复利人生！</div></p><!-- a标签里面不能嵌套a标签 --><a>理财<a>理生活</a></a></body></html>
5、居中方法总结
6、CSS 特性
1. 继承性
子元素有默认继承父元素样式的特点(子承父业)
以继承的常见属性(文字控制属性都可以继承)
colorfont-style、font-weight、font-size、font-family 3. text-indent、text-alignline-height…
注意点:
• 可以通过调试工具判断样式是否可以继承
继承失效的特殊情况
如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
1. a标签的color会继承失效
• 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
2. h系列标签的font-size会继承失效
• 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
2. 层叠性
特点
给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
注意点:
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
6、综合案例
普通导航-效果图<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* a 显示模式是行内, 加宽高默认不生效, 转显示模式: 行内块 */a {text-decoration: none;width: 100px;height: 50px;border-radius: 4px;background-color: orange;display: inline-block;color: #fff;text-align: center;line-height: 50px;}a:hover {background-color: red;}</style></head><body><!-- a*5 --><!-- 选多行加内容删除 alt + shift + 鼠标左键单击 --><a href="#">首页</a><a href="#">前端</a><a href="#">后端</a><a href="#">移动开发</a><a href="#">人工智能</a></body></html>
五彩导航-效果图
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {text-decoration: none;width: 120px;height: 58px;background-color: pink;display: inline-block;text-align: center;line-height: 50px;color: #fff;}/* 每个a的背景图不同, 单独找到每个a, 设置不同的背景图片 */.one {background-image: url(./images/bg1.png);}.two {background-image: url(./images/bg2.png);}.three {background-image: url(./images/bg3.png);}.four {background-image: url(./images/bg4.png);}.one:hover {background-image: url(./images/bg5.png);}.two:hover {background-image: url(./images/bg6.png);}.three:hover {background-image: url(./images/bg7.png);}.four:hover {background-image: url(./images/bg8.png);}</style></head><body><a href="#" class="one">首页</a><a href="#" class="two">前端</a><a href="#" class="three">后端</a><a href="#" class="four">人工智能</a></body></html>
6、总结
最后分享一句金句：
不要只注重形式上的修辞而放弃了实质上的思考。《沉思录》
——马可.奥勒留
本次的分享就到这里了！！！如果觉得还不错，请不要忘记点赞✌，收藏✌，加关注✌哦 ❤️ ❤️ ❤️
Web前端 CSS中关于块级元素 行内元素 行内块元素 元素显示模式转换 CSS特性继承性和层叠性 普通导航和五彩导航的制作
