一.标准文档流
标准文档流包括:块级元素和行内元素。
(1). 块级元素
特点: 一个元素单独一行,不与其他元素并行,可以设置其宽度和高度,如果不设置宽度,宽度默认为其父元素的100%。
(2). 行内元素
特点:与其他元素并行,不能设置其宽度和高度,默认宽度为内容的宽度。
二.相互转换
(1). 块级元素→行内元素
加上 display:inline。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 div {
8 display: inline;
9 width: 150px;
10 height: 150px;
11 background-color: pink;
12 }
13 </style>
14 </head>
15 <body>
16 <div>我是一个块级元素</div>
17 <div>我是一个块级元素</div>
18 </body
19 </html>
(2). 行内元素→块级元素
加上 display:block。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
display: block;
width: 150px;
height: 150px;
background-color: pink;
}
</style>
</head>
<body>
<span>我是一个行内元素</span>
<span>我是一个行内元素</span>
</body
</html>
三.脱离标准文档流的三种方法
脱离标准文档流有三种方法:浮动、绝对定位、固定定位。
详见下两章: 浮动、定位。