本章介绍在CSS中,对页面布局起到关键作用的三种标签块级标签,行级标签,行级块标签.
一.什么是块级,行级,行级块标签
1.什么是块级标签
无论内容多少,都会独占一行(可以设置宽高)
若未设置宽高,宽将与<body>(或者与父级标签一致,[父级标签就是比该标签高一级的标签])标签一致,高将与内容相同(若没有内容,则高度将为0)
如:<p> <h1> <ul> <ol> <hr/>
2.什么是行级标签
只占自身大小的标签,不占一行(不可设置宽高,或者说设置宽高无效)
如<font> <b> <i> <a>
3.行级块标签
不会占一行,但可以设置宽高
如<input /> <img>
二.两个特殊的标签
1.<div>
div标签是块级标签,可以在内部放置任意标签,其无实际意义,无默认样式,设置什么属性,就会成什么样子
2.<span>
span是行级标签,无默认样式主要用于选取中午文本内容(添加CSS样式)
以上两个标签都无实际意义,方便选择器的选择,以此实现页面布局
三.一个特殊的属性
属性display,可以修饰标签的特性,可将标签设为块级,或行级标签.(可以将行级标签设为块级标签,从而达到可设置宽高的条件)
以上所有标签在设置宽高时都使用width,height标签进行操作.
四.如何观察标签的宽高
阅读完上述内容你一定会有疑问,那就是怎样判断宽高,以下我就来详细说明
首先我们将写好的代码运行起来(我使用的是Edge),然后就会自动进入浏览器中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
background-color: aliceblue;
width: 200px;
height: 200px;
margin-left: auto;/* 上下外边距无法设置为auto,必须给具体的值 */
margin-right: auto;
}
/* 对系统默认样式进行清除 */
*{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> 
然后我们在空白区域点击鼠标右键,就会弹出以下窗口
点击检查,就会出现以下窗口
当我们将鼠标放置在下方代码上,就可以看到对应的宽高数据
以上即为观察标签宽高的方法
以上即为本章节的全部内容,下一章节将对页面布局所需要的一个非常重要的模型进行说明--盒子模型,感谢观看,如果你对文章内容有异议,或者有任何建议和需求,请在评论区留言,我会积极解决.
标签：块级,行级,标签,宽高,设置,auto,CSS From： https://blog.csdn.net/wzc3180043380/article/details/143334522