今天我们一起来学习一下HTML5中几种常见的盒模型标签,作者尽量用白话的形式阐述,欢迎批评指正
首先,先简单介绍一下盒模型
盒模型
盒模型由1、外边距(margin):通常用于盒子的定位,是透明的,可以显示父元素(包裹着这个盒子元素的元素)的背景。
2、边框(border): 边框是围绕内填充区的一条或多条线,由粗细、样式(直线、虚线、点状线等)、颜色三种属性构成,可以灵活的实现设置下划线、分界线等功能。
3、内填充区(内边距):通常用于调整内容在盒子中的位置,是透明的。受盒子的背景影响。
4、内容(元素):盒子的内容,显示文本和图像。
注释:1、父元素,举例,如下代码所示id为“d1”的div元素就是id为“d2”的div元素的父元素。
<div id="d1">
<div id="d2"></div>
</div>
四个部分组成
通常情况下,我们在浏览器中不会看到内填充区盒外边距区(因为默认状态下它们是透明的,当设置背景的时候,背景会在内填充区生效),在浏览器中我们通常能看到的是这个样子
接下来,我们来学习<div.../><span.../><a.../><p.../>这四种常用的盒类型元素
这四种元素分别属于两种盒类型 :block类型和inline类型
接下来,我们来做一个小实验来区别这两种类型
<html>
<body>
<div style="background-color: blue">我是div</div>
<p style="background-color: yellow">我是p</p>
<span style="background-color: red">我是span</span>
<a style="background-color:green">我是a</a>
</body>
</html>
结果如下:
block类型:
block模型的元素默认占据一行,允许通过css设置宽度、高度。由此可见<div.../>和<p.../>两个元素是属于block类型的
那么这两种元素之间的区别在哪呢?我们再做一个实验
<html>
<body>
<div style="background-color: blue">我是div</div>
<div style="background-color: blue">我是div</div>
<p style="background-color: yellow">我是p</p>
<p style="background-color: yellow">我是p</p>
</body>
</html>
我们可以看到,两个div元素之间是没有缝隙的,而p元素与其他元素之间都有距离
div是布局框架标签,常用于页面框架的布局
p是段落标签,常用于为文章布局
inline类型:
inline类型的元素的宽度与高度取决于它的内容的高度与宽度,在页面宽度允许的情况下,默认一行放多个元素直至放不下,即使通过CSS也无法设置它的高度与宽度。显然<span.../><a.../>两种元素属于inline类型
由于inline类型的特殊性,<span>常被用来组合想要放在同一行的元素
<a>标签则因为它特殊的href属性,常被用来搭建链接。
以上就是作者今天分享的内容,欢迎大家批评指正!