Day 03 CSS布局

Date:2019.5.15

內(nèi)容綱要：

一龄糊、標(biāo)準(zhǔn)流布局

1.什么是標(biāo)準(zhǔn)流

??在沒有給標(biāo)簽通過CSS布局的時候纤勒，標(biāo)簽在瀏覽器中有一套默認(rèn)的布局規(guī)則，這個規(guī)則就是標(biāo)準(zhǔn)流布局

2.標(biāo)準(zhǔn)流布局規(guī)則

1)塊級標(biāo)簽 :

??一個占一行(不管標(biāo)簽本身的寬度)芦岂；設(shè)置寬高有效；默認(rèn)寬度是父標(biāo)簽的寬度宠哄，默認(rèn)高度是內(nèi)容的高度壹将，例如：p,h1-h6,hr,div....

2)行內(nèi)標(biāo)簽 :

?? 一行可以有多個；默認(rèn)大小是內(nèi)容的大忻怠诽俯；設(shè)置寬度無效，例如：a,font,label,span

3)行內(nèi)塊標(biāo)簽 :

??一行可以顯示多個承粤；默認(rèn)大小是內(nèi)容的大斜┣；設(shè)置寬度有效辛臊，例如: input,button,img

3.display屬性

block  - 塊級標(biāo)簽
inline - 行內(nèi)標(biāo)簽
inline-block - 行內(nèi)塊
none - 隱藏

4.脫流/脫標(biāo)

??只要標(biāo)簽脫流,標(biāo)準(zhǔn)的流的規(guī)則全部失效仙粱；不管什么樣的標(biāo)簽在脫離標(biāo)準(zhǔn)流的情況下都是按照以下規(guī)則進(jìn)行布局：一行可以顯示多個；默認(rèn)大小是內(nèi)容的大谐菇ⅰ伐割；設(shè)置寬度有效，浮動和定位都可以讓標(biāo)簽脫流

二刃唤、浮動

1.浮動能夠讓標(biāo)簽脫流

        <div style="background-color: lightblue; height: 60px; float: left;">div1</div>
        <div style="background-color: lightcoral; height: 60px; float: left;">div1</div>
        <a href="" style="background-color: lavender; width: 200px; float: left;">百度一下</a>

2.浮動原理

        <div style="background-color: lightcoral; height: 100px; width: 20%; float: left;"></div>
        <div style="background-color: rgba(0,255,0,0.4); height: 200px; width: 30%; float: left;"></div>
        <div id="" style="background-color: bisque; width: 100%; height: 100px; display: inline-block;">
            div1
        </div>

3.練習(xí)：分析一下代碼的效果

<!--情況1-->
        <div style="background-color: green; width: 200px; height: 100px;"></div>
        <div style="background-color: rgba(255,0,0,0.4); width: 400px; height: 250px; float: left;"></div>
        <div style="background-color: yellow; width: 300px; height: 150px;"></div>
        <div style="background-color: deeppink; width: 100px; height: 80px; display: inline-block;">div</div>
<!--情況2-->
        <div style="background-color: green; width: 200px; height: 100px; float: right;"></div>
        <div style="background-color: red; width: 400px; height: 250px;"></div>
        <div style="background-color: rgba(255,255,0,0.4); width: 300px; height: 150px; float: left;"></div>
        <div style="background-color: deeppink; width: 100px; height: 80px; display: inline-block;">div</div>
        
        <div style="width: 100%; height: 100px; background-color: yellowgreen;">

三隔心、浮動應(yīng)用：

1.文字環(huán)繞：

??浮動內(nèi)容環(huán)繞現(xiàn)象:被環(huán)繞標(biāo)簽浮動，環(huán)繞的內(nèi)容的容器標(biāo)簽不浮動,無論多么復(fù)雜的布局尚胞，其基本出發(fā)點(diǎn)均是：“如何在一行顯示多個div元素”硬霍。顯然標(biāo)準(zhǔn)流已經(jīng)無法滿足需求，這就要用到浮動笼裳。浮動可以理解為讓某個div元素脫離標(biāo)準(zhǔn)流唯卖，漂浮在標(biāo)準(zhǔn)流之上，和標(biāo)準(zhǔn)流不是一個層次侍咱。

1)什么是浮動元素的脫離文檔流?

??首先要知道耐床，div是塊級元素密幔，在頁面中獨(dú)占一行楔脯，自上而下排列，也就是傳說中的標(biāo)準(zhǔn)流（網(wǎng)頁的正常排版順序）胯甩。
脫離文檔流: 就是脫離正常的網(wǎng)頁排版順序昧廷。成為浮動流（浮動后的元素就是浮動流）。
??簡單來說當(dāng)某一個元素浮動之后, 那么這個元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣, 這個就是脫離文檔流偎箫。-->

2.清除浮動

??清除浮動是清除因為浮動而產(chǎn)生的高度塌陷的問題木柬。

1）高度塌陷

??當(dāng)父標(biāo)簽不浮動，并且不設(shè)置固定高度淹办；子標(biāo)簽浮動就會產(chǎn)生高度塌陷的問題

2)清除浮動的方法

??a.空盒子法: 在高度會塌陷的標(biāo)簽的最后添加一個空的div,并且設(shè)置這個空的div的樣式的clear屬性為both
??b.設(shè)置高度會塌陷的標(biāo)簽的樣式的overflow屬性為hidden
??c.萬能清除法: 給高度會塌陷的標(biāo)簽的after狀態(tài)添加樣式{display:block;clear:both;content:"";visibility:hidden;height:0;} 再給高度會塌陷的標(biāo)簽添加樣式屬性zoom的值為1

/*方法1*/
            /*.clear1{
                clear: both;
            }*/
/*方法2*/
            /*.clear2{
                 overflow: hidden;
            }*/
            
/*方法3*/
            .clear2:after{
                display:block;
                clear:both;
                content:"";
                visibility:hidden;
                height:0;
            }
            .clear2{
                zoom: 1;
            }

四眉枕、定位

1.position屬性 - 選中定位的標(biāo)簽的參考對象

??initial/static - 不定位，默認(rèn)值；但是body的不是它們
??absolute - 絕對定位, 相對第一個position屬性不是initial/static的父標(biāo)簽進(jìn)行定位
??relative - 相對定位,相對標(biāo)準(zhǔn)流定位(相對于原標(biāo)簽在標(biāo)準(zhǔn)流中的位置進(jìn)行定位)
??fixed - 相對瀏覽器定位
??sticky - 定位保持網(wǎng)頁中最后一個塊在最后面（網(wǎng)頁滾動的時候在瀏覽的最下面速挑，網(wǎng)頁不超過一屏在內(nèi)容的最下面）

2.left\right\top\bottom

??設(shè)置當(dāng)前標(biāo)簽的左谤牡、右、上姥宝、下到參考對象的左翅萤、右、上腊满、下的距離
??注意: 在不給position屬性的時候直接設(shè)置left\right\top\bottom屬性無效

五套么、盒子模型

??html中每個可見的標(biāo)簽都是一個盒子模型，由content碳蛋、padding胚泌、border、margin組成

1)content

??內(nèi)容肃弟，設(shè)置寬和高其實是設(shè)置盒子內(nèi)容的大兄畛佟；添加子標(biāo)簽是添加在內(nèi)容上愕乎；
?? 設(shè)置背景顏色和背景圖都會作用于內(nèi)容部分

2)padding

??內(nèi)容外面的可見部分(默認(rèn)沒有),有四個方向; 設(shè)置padding會讓標(biāo)簽變大阵苇；設(shè)置背景顏色和背景圖都會作用于padding部分

3)border

??邊框，有四個方向感论，可以單獨(dú)控制每個方向的大小绅项、顏色、樣式

4)margin

??內(nèi)邊距比肄，有四個方向快耿；不可見，但是占位置