前言
持续总结输出中,今天分享的是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、元素显示模式转换
改变元素默认的显示特点,让元素符合布局要求
属性 | 效果 | 使用频率 |
---|---|---|
display:block | 转换成为块级元素 | 较多 |
display:inline-block | 转换成为行内块元素 | 较多 |
display: inline | 转换成为行内元素 | 较少 |
代码参考:
转换成为块级元素
<!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. 继承性
子元素有默认继承父元素样式的特点(子承父业)
以继承的常见属性(文字控制属性都可以继承)
- color
- font-style、font-weight、font-size、font-family 3. text-indent、text-align
- line-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、总结
最后分享一句金句:
不要只注重形式上的修辞而放弃了实质上的思考。《沉思录》 ——马可.奥勒留
本次的分享就到这里了!!!