031_div和span

最新推荐文章于 2023-11-24 23:36:51 发布

原创最新推荐文章于 2023-11-24 23:36:51 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #web前端

html学习专栏收录该内容

89 篇文章

订阅专栏

1. html标签按照元素种类可以分为块级元素(display: block); 行内元素(display: inline)和行内块元素(display: inline-block)三种。

2. 块级元素

2.1. 块元素指的是占据全部可用宽度的元素, 并且在其前后都会换行。块级元素一般可嵌套块级元素、行内块元素或行内元素。最常用的块级元素是div。

2.2. 默认特点:

2.2.1. 独占一行, 通常会以新行来开始和结束。

2.2.2. 可以设置width, height, margin, padding等属性。

2.2.3. 占据全部可用宽度, 默认值为100%。

3. 行内元素

3.1. 行内元素通常不会以新行开始, 显示在一行, 宽度随内容变化, 当到达父元素宽度时换下一行显示。内联元素只能容纳文本或其他行内元素。最常用的行内元素是span。

3.2. 默认特点:

3.2.1. 排在一行, 宽度随内容变化。

3.2.2. 设置width, height无效(可以设置line-height指定高度)。

3.2.3. margin水平方向有效, 垂直方向无效。

3.2.4. padding水平方向有效, 垂直方向有特殊效果(不是边距效果), 具体表现: 不影响位置, 影响视觉。

4. 行内块元素

4.1. 行内块既有行内元素的一些特性又有块级元素的一些特性。

4.2. 默认特点:

4.2.1. 多个元素排在一行。

4.2.2. 可以设置width, height, margin, padding等属性。

5. <div>元素

5.1. <div>元素是块级元素, 它是可用于组合其他html元素的容器。

5.2. <div>元素没有特定的含义。实际上, 换行是<div>固有的唯一格式表现。

5.3. 如果用id或class来标记<div>, 那么该标签的作用会变得更加有效。

5.4. <div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。

5.5. <div>元素常用作布局工具, 因为能够轻松地通过CSS对其进行定位。

5.6. 使用<div>元素的html布局

5.6.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>div 布局</title>

		<style type="text/css">
			#header {
			    background-color: black;
			    color: white;
			    text-align: center;
			    height: 100px;
			}
			#header h1 {
				margin: 0;
				line-height: 100px;
			}
			#nav {
			    line-height: 30px;
			    background-color: #eeeeee;
			    height: 300px;
			    width: 100px;
			    float: left;
			    padding: 5px;	 
			    margin: 0px;     
			}
			#section {
			    width: 350px;
			    float: left;
			    padding: 10px;	 	 
			}
			#footer {
			    background-color: black;
			    color: white;
			    clear: both;
			    text-align: center;
			   	padding: 5px;	 	 
			}
		</style>
	</head>

	<body>
		<div id="header">
			<h1>City Gallery</h1>
		</div>

		<div id="nav">
			London<br />
			Paris<br />
			Tokyo<br />
		</div>

		<div id="section">
			<h2>London</h2>
			<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
			<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
		</div>

		<div id="footer">
			Copyright ? W3Schools.com
		</div>
	</body>
</html>

5.6.2. 效果图

6. <span>元素

6.1. <span>元素是内联元素, 可用作文本的容器。用来组合文档中的行内元素。

6.2. <span>元素也没有特定的含义。

6.3. 当与CSS一同使用时, <span>元素可用于为部分文本设置样式属性。

7. 早期没有div的时候都是使用table布局

7.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>table 布局</title>
		
		<style type="text/css">
			#header {
			    background-color: black;
			    color: white;
			    text-align: center;
			    width: 100%;
			    height: 100px;
			}
			#nav {
			    height: 300px;
			    width: 100px;
			    float: left;
			    background-color: #eeeeee;
			    text-align: left;
			    line-height: 30px;
			}
			#nav td {
				vertical-align: top;
			}
			#section {
			    width: 350px;
			    float: left;
			}
			span {
				display: inline-block;
				margin: 12px 0;
			}
			#footer {
			    background-color: black;
			    color: white;
			    clear: both;
			    text-align: center;
			   	padding: 5px;	
			   	width: 100%; 	 
			}
		</style>
	</head>

	<body>
		<table id="header">
			<tr>
				<td>
					<h1>City Gallery</h1>
				</td>
			</tr>
		</table>

		<table id="nav">
			<tr><td>London<br />Paris<br />Tokyo</td></tr>
		</table>

		<table id="section">
			<tr><td><h2>London</h2></td></tr>
			<tr><td>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</td></tr>
			<tr><td>
				<span>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</span>
			</td></tr>
		</table>

		<table id="footer">
			<tr><td>Copyright ? W3Schools.com</td></tr>
		</table>
	</body>
</html>

7.2. 效果图