塊級元素和行內元素

時間 2019-11-20

標籤元素简体版

原文原文鏈接

標籤分爲兩種等級：

　　1，行內元素。2，塊級元素。

行內元素和塊級元素的區別：

行內元素：　　html

與其餘行內元素並排
不能設置寬高，默認的寬度就是文字的寬度

塊級元素：前端

霸佔一行，不能與其餘任何元素並列。
能接受寬高，若是不設置寬度，那麼寬度將默認變爲父級的100%。

塊級元素和行內元素的分類：

　　在HTML的角度來說，標籤分爲：python

　　　　文本級標籤：p , span , a , b , i , u , emlinux

　　　　容器級標籤：div , h系列 , li , dt ,ddweb

　　　　p：裏面只能放文字和圖片和表單元素，p裏面不能放h和ul，也不能放p。瀏覽器

　　從CSS的角度講，CSS的分類和上面的很像，就p不同：ide

　　　　行內元素：除了p以外，全部的文本級標籤，都是行內元素。p是個文本級標籤，可是是個塊級元素。佈局

　　　　塊級元素：全部的容器級標籤，都是塊級元素，以及p標籤。spa

塊級元素和行內元素的相互轉換：

　　咱們能夠經過display屬性將塊級元素(好比div)和行內元素進行相互轉換。3d

　　display：inline;

　　那麼這個標籤將變爲行內元素，即：

　　　　1，此時這個div將不能設置寬度和高度了。

　　　　2，此時這個div能夠和其餘行內元素並排了。

　　一樣的到了咱們也能夠用display將行內元素(好比span)轉行成塊級元素。

　　display：block；

　　那麼這個span標籤將變爲塊級標籤，即：

　　　　1，此時這個span可以設置寬度，高度。

　　　　2，此時這個span必須獨佔一行，其餘元素沒法與之並排。

　　　　3，若是不設置寬度，將佔滿父級。

標準流裏面的限制很是多，致使不少頁面效果沒法實現，若是咱們如今就要並排，而且就要設置寬度，就hi有：脫離標準流。

CSS一共有三種手段，是一個元素脫離標準流文檔：

浮動
絕對定位
固定定位

浮動：

　　浮動是CSS裏面佈局最多的一個屬性。

　　float：表示浮動的意思。

屬性：

none：表示不浮動，默認。
left：表示左浮動。
rigth：表示右浮動。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            /*margin: 0;*/
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: green;
            float: right;
        }
        span{
            float: left;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <span>路飛</span>
</body>
</html>

例子

咱們會發現，三個元素並排顯示，.box1和span由於是左浮動，全部緊挨在一塊兒，這種現象是貼邊現象。

.box2盒子由於是右浮動，因此緊靠着右邊。

浮動的四大特性：

　　1，浮動的的元素脫標，

　　2，浮動的元素互相貼靠。

　　3，浮動的元素由"子圍"效果。

　　4，收縮的效果。

浮動元素的脫標：

　　脫標：就是脫離了標準文檔流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        }
        span{
            float: left;
            width: 300px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">小紅</div>
    <div class="box2">小黃</div>
    <span>顧清秋</span>
    <span>顧清秋</span>
</body>
</html>

例子

效果：紅色的盒子蓋住了黃色的盒子，一個行內的span標籤，居然可以設置寬高了。

緣由1：小紅設置了浮動，而小黃並無設置浮動，小紅脫離了標準文檔流，其實就是他不在頁面中佔據位置了，此時瀏覽器認爲小黃是標準文檔流的第一個盒子，因此就渲染到了頁面中的第一個位置上，這種現象，也有一種叫法：浮動元素"飄起來了"。

緣由2：全部的標籤一旦設置浮動，就可以並排且不區分塊元素或行內元素，換言之，可以設置寬高了。

浮動元素互相貼靠：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 400px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 150px;
            height: 450px;
            float:     left;
            background-color: yellow;
        }
        .box3{
            width:     300px;
            height: 300px;    
            float:     left;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">小紅</div>
    <div class="box2">小黃</div>
    <div class="box3">小綠</div>
</body>
</html>

例子

效果發現：若是父元素有足夠的空間，那麼小綠就會緊靠小黃，小黃緊靠小紅，小紅靠着邊。

若是沒有足夠的空間，小綠那麼就會靠着小紅，若沒有足夠的空間靠着小紅，就會本身靠邊。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
                    width: 300px;
                    border:1px solid black;        
        }
        .box1{
            width: 100px;
            height: 400px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 150px;
            height: 450px;
            float:     left;
            background-color: yellow;
        }
        .box3{
            width:     80px;
            height: 300px;    
            float:     left;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">小紅</div>
        <div class="box2">小黃</div>
        <div class="box3">小綠</div>
    </div>
</body>
</html>

例子

浮動元素字圍效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin:0;
        }
        div{
            float:     left;    
        }
        p{
            background-color: #    666;
        }
    </style>
</head>
<body>
    <div class="d1"><img src="    ../../images/1.jpg" alt="圖片"></div>
    <p style="font-size:34px" >顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋</p>
</body>
</html>

例子

效果發現：所謂的字圍效果，當div浮動，p不浮動，div遮蓋了p,div的層級提升，可是p中的文字不會被遮蓋，此時就造成了字圍效果。

浮動元素緊湊效果：

　　收縮：一個浮動元素，若是沒有設置width，那麼就自動收縮爲文字的寬度。（和行內元素很像）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>緊湊效果</title>
    <style>
        div{
            float: left;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>顧清秋</div>
</body>
</html>

例子

謹記：關於浮動，必定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一塊兒浮動。另外，有浮動，必定要清楚浮動。

爲何要清楚浮動：

　　在頁面佈局的時候，每一個結構中的父元素的高度，咱們通常不會設置。

　　你們想，若是我初版的頁面的寫完了，感受很是爽，忽然隔了一個月，老闆說頁面某一塊的區域，我要加點內容，或者我以爲圖片要縮小一下。這樣的需求在工做中很是常見的。真想打他啊。那麼此時做爲一個前端小白，確定是去每一個地方加內容，改圖片，而後修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是確定的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 1126px;
            /*子元素浮動，父級通常不設置高度*/
        }
        .box1{
            width: 200px;
            height: 500px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .box3{
            width: 400px;
            height: 100px;
            float: left;
            background-color: blue;
        }
        .father{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <div class="father2"></div>
</body>
</html>

例子

效果發現：若是不給.father一個高度，那麼浮動子元素是不會填充父盒子的高度，那麼.father2的盒子就會佔據第一個位置，影響頁面佈局。

那麼咱們知道，浮動元素確實能實現咱們頁面元素並排的效果，這是它的好處，同時它還帶來了頁面佈局極大的錯亂！！！因此咱們要清除浮動！

清除浮動的方法：

　　1，給父盒子設置高度。

　　2，clear：both;

　　3，僞元素清除法

　　4，overflow：hidden；

給父盒子設置高度：

　　使用不靈活，會固定父盒子的高度。

clear：both；

　　clear：意思就是清楚的意思。

　　有三個值：

　　left：當前元素左邊不容許有浮動元素，

　　rigtht：當前元素右邊不容許有浮動元素。

　　both：當前元素的左右兩邊都不容許有浮動元素。

　　給浮動元素後面加一個空的div，而且該元素不浮動，而後設置clear：both。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        div{
            width: 400px;
        }
        div ul li{
            float: left;
            width: 100px;
            height: 40px;
            background-color:red;
        }
        .clear{
            width: 200px;
            height: 200px;
            background-color: yellow;
            clear:both;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>python</li>
            <li>web</li>
            <li>linux</li>
        </ul>
    </div>
    <div class="clear"></div>
</body>
</html>

例子

僞元素清除法(經常使用)：

　　給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，而後設置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        div{
            width: 400px;
        }
        div ul li{
            float: left;
            width: 100px;
            height: 40px;
            background-color:red;
        }
        .clear{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*clear:both;*/
        }
        .clearfix:after{
            content: '.';
            height: 0;
            clear:both;
            display: block;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <ul>
            <li>python</li>
            <li>web</li>
            <li>linux</li>
        </ul>
    </div>
    <div class="clear"></div>
</body>
</html>

例子

overflow:hidden(經常使用)：

　　overflow屬性規定當內容溢出元素框時，發生的事情。

　　屬性值：

　　visible：默認值，內容不會被修剪，會呈如今元素框以外。

　　hidden：內容會被修剪，而且其他內容是不可見的。

　　scroll：內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。

　　auto：若是內容被修剪，則瀏覽器會顯示滾動條以便利查看其他內容。

　　inherit：規定應該從父元素繼承overflow屬性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            overflow: scroll;
        }
        div{
            width: 100px;
            height: 100px;
            overflow: inherit;
        }
    </style>

</head>
<body>
    <div>顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋</div>
</body>
</html>

例子

塊級元素和行內元素

標籤分爲兩種等級：

1，行內元素。2，塊級元素。

行內元素和塊級元素的區別：

塊級元素和行內元素的分類：

塊級元素和行內元素的相互轉換：

CSS一共有三種手段，是一個元素脫離標準流文檔：

浮動

絕對定位

固定定位

浮動：

浮動的四大特性：

浮動元素的脫標：

浮動元素互相貼靠：

浮動元素字圍效果：

浮動元素緊湊效果：

謹記：關於浮動，必定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一塊兒浮動。另外，有浮動，必定要清楚浮動。

爲何要清楚浮動：

給父盒子設置高度：

clear：both；

僞元素清除法(經常使用)：

overflow:hidden(經常使用)：

　　1，行內元素。2，塊級元素。