文檔流和文本流的區別

時間 2019-11-12

標籤文檔文本區別简体版

原文原文鏈接

1.文檔流是指html文檔加載解析時從上到下，從左向右，但相對於盒子模型來講，浮動後脫離文檔流，可是沒有脫離文本流。html

1.1代碼ide

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .test01{
            width: 100px;height: 100px;
            border:1px solid red;
            float: left;
        }
    </style>
    
</head>
<body>
    <div class="test01"></div>
   假若我是跋涉千里的夜行者，母親必是那重重夜幕裏一盞溫柔的燈光，遠遠的爲我亮着，輕喚我遲疑的腳步；假若我只是自怨自艾的蹩腳演員，母親必是那熱烈的掌聲，呼喚我自信，鞭策我努力；假若我是條嬉戲的小遊魚兒，母親必是那一汪碧綠的湖水，在包容我頑皮任任性的同時，也將個人快樂漣漪般一圈圈的擴散了去。
</body>
</html>

View Code

1.2效果圖spa

2.文本流是指html文本的顯示，是相對於文字段落來講的。3d

tip：可是若是設置了絕對定位，元素既會脫離文本流也會脫離文檔流。code

2.1代碼htm

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .test01{
            width: 100px;height: 100px;
            border:1px solid red;
            /*float: left;*/
            position: absolute;
        }
    </style>    
</head>
<body>
    <div class="test01"></div>
   假若我是跋涉千里的夜行者，母親必是那重重夜幕裏一盞溫柔的燈光，遠遠的爲我亮着，輕喚我遲疑的腳步；假若我只是自怨自艾的蹩腳演員，母親必是那熱烈的掌聲，呼喚我自信，鞭策我努力；假若我是條嬉戲的小遊魚兒，母親必是那一汪碧綠的湖水，在包容我頑皮任任性的同時，也將個人快樂漣漪般一圈圈的擴散了去。
</body>
</html>

View Code

2.2效果圖blog

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。