前端基礎(chǔ)-CSS如何布局以及文檔流

番茄西紅柿發(fā)布于2019-04-23 13:40 / 2740人閱讀

摘要：一網(wǎng)頁布局方式二標(biāo)準(zhǔn)流三浮動(dòng)流四定位流一網(wǎng)頁布局方式什么是網(wǎng)頁布局方式布局可以理解為排版，我們所熟知的文本編輯類工具都有自己的排版方式，比如，等等而網(wǎng)頁的布局方式指的就是瀏覽器這款工具是如何對(duì)網(wǎng)頁中的元素進(jìn)行排版的網(wǎng)頁布局排版的三種方式標(biāo)準(zhǔn)

一、網(wǎng)頁布局方式
二、標(biāo)準(zhǔn)流
三、浮動(dòng)流
四、定位流

一、網(wǎng)頁布局方式

　1、什么是網(wǎng)頁布局方式布局可以理解為排版，我們所熟知的文本編輯類工具都有自己的排版方式，

比如word，nodpad++等等而網(wǎng)頁的布局方式指的就是瀏覽器這款工具是如何對(duì)網(wǎng)頁中的元素進(jìn)行排版的

　　2、網(wǎng)頁布局/排版的三種方式

　　　　2.1、標(biāo)準(zhǔn)流
　　　　2.2、浮動(dòng)流
　　　　2.3、定位流

二、標(biāo)準(zhǔn)流

　　標(biāo)準(zhǔn)流的排版方式，又稱為：文檔流/普通流，所謂的文檔流，指的是元素排版布局過程中，元素會(huì)自動(dòng)從左往右，從上往下的流式排列。

　　1 、瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)流排版方式

　　2 、在CSS中將元素分為三類：分別是塊級(jí) 行內(nèi) 行內(nèi)塊級(jí)

　　3、在標(biāo)準(zhǔn)流中有兩種排版方式，一種是垂直排版，一種是水平排版垂直排版，如果元素是塊級(jí)元素，那么就會(huì)垂直排版水平排版，

如果元素是行內(nèi)元素或行內(nèi)塊級(jí)元素，那么就會(huì)水平排版

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>

    <style type="text/css">
        div,h1,p {
            border: 1px solid red;
        }

        span，strong,b {
            border: 1px solid #000;
        }
    style>
head>
<body>
<div>我是divdiv>
<h1>我是標(biāo)題h1>
<p>我是段落p>

<span>spanspan>
<strong>我是強(qiáng)調(diào)strong>
<b>我是加粗b>
body>
html>

實(shí)例

三、浮動(dòng)流

1、浮動(dòng)流是一種半脫離標(biāo)準(zhǔn)流的排版方式那什么是脫離文檔流？什么又是半脫離文檔流？

1.1 什么是脫離文檔流？

　　1、浮動(dòng)元素脫離文檔流意味著

　　　　1、不再區(qū)分行內(nèi)、塊級(jí)、行內(nèi)塊級(jí)，無論是什么級(jí)的元素都可以水平排版

　　　　2、無論是什么級(jí)的元素都可以設(shè)置寬高綜上所述，浮動(dòng)流中的元素和標(biāo)準(zhǔn)流總的行內(nèi)塊級(jí)元素很像

DOCTYPE html>
<html>
<head>
    <title>title>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*
        不再區(qū)分行內(nèi)、塊級(jí)、行內(nèi)塊級(jí)，無論是什么級(jí)的元素都可以水平排版：span和p都顯示到一行
        無論是什么級(jí)的元素都可以設(shè)置寬高：span這種行內(nèi)元素也可以設(shè)置寬高
        */
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;

            float: left;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;

            float: left;
        }


    style>
head>

<body>

<span class="box1">我是spanspan>
<p class="box2">我是段落p>



body>
html>

實(shí)例

　　2、浮動(dòng)元素脫標(biāo)文檔流意味著

　　　　1、當(dāng)某一個(gè)元素浮動(dòng)走之后，那么這個(gè)元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣，這個(gè)就是浮動(dòng)元素的脫標(biāo)

　　　　2、如果前面一個(gè)元素浮動(dòng)走了，而后面一個(gè)元素沒有浮動(dòng)，那么垂直方向的元素會(huì)自動(dòng)填充，浮動(dòng)元素重新歸位后就會(huì)覆蓋該元素

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動(dòng)元素脫標(biāo)title>

    <style>
        .box1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            width: 150px;
            height: 150px;
            background-color: blue;
        }
    style>
head>
<body>
<div class="box1">div>
<div class="box2">div>


body>
html>

實(shí)例

注意點(diǎn)：

　　1、浮動(dòng)流只有一種排版方式，就是水平排版，它只能設(shè)置某個(gè)元素左對(duì)齊或者右對(duì)齊，沒有居中對(duì)齊，也就是沒有center這個(gè)取值

　 2、一旦使用了浮動(dòng)流，則margin:0 auto;失效

DOCTYPE html>
<html>
<head>
    <title>title>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            width: 930px;
            height: 100px;
            border: 1px solid #000;

            margin: 0 auto;
        }

        .logo {
            width: 100px;
            height: 50px;
            background-color: yellow;
            float: left;
        }
        .nav {
            width: 300px;
            height: 50px;
            background-color: green;
            float: left;

            /*失效*/
            margin: 0 auto;
        }

    style>
head>

<body>

<div class="header">
    <div class="logo">div>
    <div class="nav">div>
div>

實(shí)例

DOCTYPE html>
<html>
<head>
    <title>方式一：修改顯示方式為inline-blocktitle>
    <meta charset="utf-8">
    <style>
        .box1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;

            /*
            當(dāng)設(shè)置box2的margin-left足夠大時(shí)，第二個(gè)盒子就靠右面顯示了
            但是當(dāng)瀏覽器界面縮小時(shí)，box2由于左邊的margin-left不夠930，則必須換一個(gè)新行顯示，就無法讓兩個(gè)盒子處于一行
            */
            margin-left: 930px;
        }

    style>
head>

<body>



<div class="box1">div>
<div class="box2">div>


body>
html>










DOCTYPE html>
<html>
<head>
    <title>方式二：用浮動(dòng)的方式title>
    <meta charset="utf-8">
    <style>
        .box1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;

            float: left;
        }
        .box2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;

            float: right;
        }

    style>
head>

<body>



<div class="box1">div>
<div class="box2">div>


body>
html>

讓兩個(gè)元素顯示到一行，有兩種實(shí)現(xiàn)方式，一種是修改元素的顯示方式為inline-block，另外一種就是用浮動(dòng)的方式

1.2、那什么又是半脫離文檔流？

脫離分為：半脫離與完全脫離，其中完全脫離指的是元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來不存在一樣

而之所以稱為半脫離：是因?yàn)楦?dòng)元素浮動(dòng)之后的位置取決于它在浮動(dòng)之前的標(biāo)準(zhǔn)流中的位置，跟標(biāo)準(zhǔn)流還是有一定的關(guān)系，
比如說浮動(dòng)的元素在浮動(dòng)之前處于標(biāo)準(zhǔn)流的第二行，那么他浮動(dòng)之后也是處于浮動(dòng)流的第二行，不會(huì)去找其他行的浮動(dòng)元素去貼靠，
打一個(gè)比方就是：浮動(dòng)流就是在標(biāo)準(zhǔn)流上面覆蓋的一層透明薄膜，元素浮動(dòng)之后就會(huì)被從標(biāo)準(zhǔn)流中扔到浮動(dòng)流這個(gè)薄膜上，
他在這個(gè)薄膜上的位置還是以前在標(biāo)準(zhǔn)流的位置上找同方向的浮動(dòng)元素進(jìn)行貼靠，貼靠的準(zhǔn)則就是：

（1）同一個(gè)方向上誰先浮動(dòng)，誰在前面

（2）不同方向上左浮動(dòng)找左浮動(dòng)，右浮動(dòng)找右浮動(dòng)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動(dòng)元素排序規(guī)則title>

    <style>
        .box1 {
            float: left;

            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            width: 150px;
            height: 150px;
            background-color: blue;
        }

        .box3 {
            float: left;

            width: 250px;
            height: 250px;
            background-color: yellow;
        }


        .box4 {
            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
        }
    style>
head>
<body>

<div class="box1">1div>
<div class="box2">2div>
<div class="box3">3div>
<div class="box4">4div>

浮動(dòng)元素浮動(dòng)之后的位置取決于它在浮動(dòng)之前的標(biāo)準(zhǔn)流中的位置

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動(dòng)元素排序規(guī)則title>

    <style>
        .box1 {
            float: left;

            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            float: left;

            width: 150px;
            height: 150px;
            background-color: blue;
        }

        .box3 {
            float: left;

            width: 250px;
            height: 250px;
            background-color: yellow;
        }


        .box4 {
            float: left;

            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
        }
    style>
head>
<body>

<div class="box1">1div>
<div class="box2">2div>
<div class="box3">3div>
<div class="box4">4div>


body>
html>

同一個(gè)方向上誰先浮動(dòng)，誰在前面

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動(dòng)元素排序規(guī)則title>

    <style>
        .box1 {
            float: left;

            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            float: left;

            width: 150px;
            height: 150px;
            background-color: blue;
        }

        .box3 {
            float: right;

            width: 250px;
            height: 250px;
            background-color: yellow;
        }


        .box4 {
            float: right;

            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
        }
    style>
head>
<body>

<div class="box1">1div>
<div 
                 
                                                                                                                    
                         GPU云服務(wù)器
                                             
                         云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               css布局
                                                                                                           css布局教程
                                                                                                           學(xué)習(xí)css布局
                                                                                                           文檔流輸出

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2200.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 736·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3981·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

閱讀 3807·2021-11-30 14:52
VmShell：黑五美國VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

閱讀 3871·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3802·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3904·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3580·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6183·2021-11-29 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

前端基礎(chǔ)-CSS如何布局以及文檔流

一、網(wǎng)頁布局方式

二、標(biāo)準(zhǔn)流

三、浮動(dòng)流

相關(guān)文章

**前端常見知識(shí)點(diǎn)匯總（面試）-HTML和CSS部分**

**前端常見知識(shí)點(diǎn)匯總（面試）-HTML和CSS部分**

**前端面試之CSS總結(jié)(上)**

CSS 布局經(jīng)典問題初步整理

發(fā)表評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

VmShell：黑五美國VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設(shè)置方法有幾種

wordpress網(wǎng)站重定向次數(shù)過多的解決方法

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

前端基礎(chǔ)-CSS如何布局以及文檔流

一、 網(wǎng)頁布局方式

二、 標(biāo)準(zhǔn)流

三、 浮動(dòng)流

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

一、網(wǎng)頁布局方式

二、標(biāo)準(zhǔn)流

三、浮動(dòng)流