CSS世界阅读笔记
# 块级元素
“块级元素”对应的英文是 block-level element,常见的块级元素有<div>、<li>和<table> 等。需要注意是,“块级元素”和“display 为 block 的元素”不是一个概念。例如,<li>元 素默认的 display 值是 list-item,<table>元素默认的 display 值是 table,但是它们 均是“块级元素”,因为它们都符合块级元素的基本特征,也就是一个水平流上只能单独显示一 个元素,多个块级元素则换行显示。
# 文字少的时候居中显示,文字超过一行的时候居左显示
<div class="box">
<p id="conMore" class="content">
文字内容-新增文字-新增文字-新增文字
</p>
</div>
1
2
3
4
5
2
3
4
5
.box {
text-align: center;
}
.content {
display: inline-block;
text-align: left;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 三无准则,即“无宽度,无图片,无浮动”
# CSS 盒子模型
# 浏览器是按照从上而下、自外而内的顺序渲染 DOM
# 块级元素负责结构,内联元素负责内容
# 利用content属性实现图片变化效果实例页面
<img src="laugh.png" />
1
img:hover {
content: url(laugh-tear.png);
}
1
2
3
2
3
待续。。。
css世界在实际代码编写中应用较少,等买了css新世界再继续
上次更新: 2023/04/05, 09:41:10