标准文档流

一.标准文档流

   标准文档流包括：块级元素和行内元素。

(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>

三.脱离标准文档流的三种方法

   脱离标准文档流有三种方法：浮动、绝对定位、固定定位。

   

 

详见下两章： 浮动、定位。

 

posted @ 2017-01-11 13:57  Yaopengfei  阅读(748)  评论(0)  编辑  收藏  举报