一.标准文档流
标准文档流包括：块级元素和行内元素。
(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>
三.脱离标准文档流的三种方法
脱离标准文档流有三种方法：浮动、绝对定位、固定定位。
详见下两章： 浮动、定位。