2.6 块级元素和行内元素,HTML入门到精通|计算机毕业设计,计算机毕业论文开题报告,毕设作品网

根据CSS规范的规定，每一个网页元素（标签）都有一个display属性，用于确定该元素的类型；每一个元素都有默认的display属性值，比如div元素（标签）、h1元素（标签）、p元素（标签），它的默认display属性值为“block”，成为“块级”元素(block-level)；块级元素会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子，我们可以设置块级元素的背景颜色来查看其所占据的空间。

与之相反，而span元素的默认display属性值为“inline”，称为“行内”元素，像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

行内、块状元素区别

块级元素会独占一行，其宽度自动填满其父元素宽度,行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化。

一般情况下，块级元素可以设置 width, height属性，行内元素设置width, height无效(注意：块级元素即使设置了宽度，仍然是独占一行的)块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

块级元素总结

n 总是从新的一行开始

n 高度、宽度都是可控的

n 宽度没有设置时，默认为100%

n 块级元素中可以包含块级元素和行内元素

行内元素总结

n 和其他元素都在一行

n 高度、宽度以及内边距都是不可控的

n 宽高就是内容的高度，不可以改变

n 行内元素只能行内元素，不能包含块级元素

块级元素有哪些

<h1>...</h1> 标题一级	<marquee>...</marquee> 滚动文本
<h2>...</h2> 标题二级	<ul>...</ul> 无序列表
<h3>...</h3> 标题三级	<ol>...</ol> 有序列表
<h4>...</h4> 标题四级	<dl>...</dl> 定义列表
<h5>...</h5> 标题五级	<table>...</table> 表格
<h6>...</h6> 标题六级	<form>...</form> 表单
<hr> 水平分割线	<address>...</adderss>
<p>...</p> 段落	<center>...</center> 地址文字
<div>...</div>	<blockquote>...</blockquote>
<pre>...</pre> 预格式化	……

Html中行内元素有哪些？

a - 锚点或链接	abbr - 缩写
acronym - 首字	b - 粗体(不推荐)
bdo - bidi override	big - 大字体
br - 换行	cite - 引用
code - 计算机代码	dfn - 定义字段
em - 强调	font - 字体设定(不推荐)
i - 斜体	img - 图片
input - 输入框	kbd - 定义键盘文本
label - 表格标签	q - 短引用
s - 中划线(不推荐)	samp - 定义范例计算机代码
select - 项目选择	small - 小字体文本
span - 常用内联容器，定义文本内区块	strike - 中划线
strong - 粗体强调	sub - 下标
sup - 上标	textarea - 多行文本输入框
tt - 电传文本	u - 下划线
var - 定义变量	……

下面我们来看下块级元素和行内元素的在网页中的效果，示例

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>块级元素和行内元素</title>
</head>
 
<body>
     <div style="background-color:aliceblue;width:30%;">div01</div><!--块级元素-->
     <div style="background-color: antiquewhite;width:30%;">div02</div><!--块级元素-->
     <h1>H1</h1><!--块级元素-->
     <h2>H2</h2><!--块级元素-->
    
     <span style="background-color: aqua;">黄菊华老师span01</span><br>
     <span>span02</span><br>
     <span>span03</span><br>
     <span>span04</span><br>
     <span>span05</span>
     <span>span06</span><!--行内元素-->
</body>
</html>

效果如图2-9。

上一篇： 2.5 HTML 换行 br 标签

下一篇： 2.7 HTML 文本格式化