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. 效果图
987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
