一.標(biāo)準(zhǔn)流和浮動

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

標(biāo)準(zhǔn)流布局:在標(biāo)準(zhǔn)流中，塊級標(biāo)簽是一個占一行，默認(rèn)寬度是父標(biāo)簽的寬度，默認(rèn)高度是內(nèi)容的高度；并且可以設(shè)置寬度和高度，一行可以顯示多個,默認(rèn)寬度和高度都是內(nèi)容的寬高；設(shè)置寬高有效
塊級標(biāo)簽:h1-h6,p,hr,ol\ul\dl\li,table,tr,div
行內(nèi)標(biāo)簽:a,img,td,input,select,option,textarea,span

image.png

二display屬性

1.display(設(shè)置標(biāo)簽的性質(zhì))

block - 將標(biāo)簽設(shè)置為塊級標(biāo)簽
inline-block - 將標(biāo)簽設(shè)置為內(nèi)塊標(biāo)簽
注意：一般不會通過標(biāo)簽轉(zhuǎn)換成行內(nèi)塊來解決問題，因為行內(nèi)塊標(biāo)簽在現(xiàn)實左右中間會有不能消除的空隙
inline - 將標(biāo)簽設(shè)置為行內(nèi)標(biāo)簽

image.png

float屬性

1.浮動原理:

a.浮動會讓標(biāo)簽脫離標(biāo)準(zhǔn)流進行布局(布局)
b.沒有浮動的標(biāo)簽即占池底的位置，也占水面位置，浮動后只占水面位置

2.浮動屬性

left - 左浮動
right - 右浮動

3.脫流后的布局規(guī)則：不管什么標(biāo)簽，脫流后都是一行可以顯示多個，可以設(shè)置寬度和高度

image.png

4.清零浮動

1.清除浮動

清除浮動值得是清除因為浮動而產(chǎn)生的高度塌陷問題

2.高度塌陷

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

3.a.添加空的div： 在父標(biāo)簽的最后添加一個空的div,并且設(shè)置樣式clear屬性的值為both

b.在會塌陷的標(biāo)簽中添加樣式，將overflow屬性的值設(shè)置為hidden

image.png

五.文字環(huán)繞

文字環(huán)繞：被環(huán)繞的標(biāo)簽(例如圖片對應(yīng)的標(biāo)簽)浮動；文字對應(yīng)的標(biāo)簽不浮動

image.png

六.定位

CSS可以通過letf,right,top,bottom來對標(biāo)簽進行定位。前提是設(shè)置好參考對象

####1.定位屬性：
left - 標(biāo)簽左邊距
right - 標(biāo)簽右邊距
top - 標(biāo)簽上邊距
bottom - 標(biāo)簽下邊距



注意：a.定位需要通過position屬性來設(shè)置參考對象
     b.當(dāng)標(biāo)簽的寬度固定的時候，同時設(shè)置left和right只有l(wèi)eft有效；top和bottom同理
     c.可以同時設(shè)置left和right,不設(shè)置寬度，或者寬度值為auto的時候，標(biāo)簽會自動拉伸;top和bottom同理
     
####2.position屬性
(了解)initial - (默認(rèn)值)
(了解)static - 不希望自己的子標(biāo)簽相對自己定位的時候才使用static

absolute - 相對第一個非static和非initial的父標(biāo)簽進行定位
relative - 相對于自己在標(biāo)準(zhǔn)流中的位置定位;
           如果一個標(biāo)簽希望自己的子標(biāo)簽?zāi)軌蛳鄬ψ约憾ㄎ唬驮O(shè)置這個標(biāo)簽的position為relative(自己不定位)
fixed - 相對于瀏覽器定位
sticky - 粘性定位，只針對網(wǎng)頁底部的標(biāo)簽定位。如果網(wǎng)頁內(nèi)容超過一屏(需要滾動)的時候相對瀏覽器定位；
         否則相對標(biāo)準(zhǔn)流定位

image.png

image.png

image.png

七.盒子模型

html中所有可見的標(biāo)簽都是盒子模型。有固定的結(jié)構(gòu)，包括：內(nèi)容、padding、border、margin四個部分
內(nèi)容 - 可見的，設(shè)置width和height實質(zhì)就是設(shè)置內(nèi)容的大小;默認(rèn)大小跟標(biāo)簽中的內(nèi)容有關(guān)
添加子標(biāo)簽或者設(shè)置文字內(nèi)容都是添加或者顯示在內(nèi)容部分的;
可以background-color會作用于內(nèi)容部分

padding - 可見的，分上下左右四個部分;一般默認(rèn)都是0;
          可以background-color會作用于padding
          
border - 可見的，分上下左右四個部分；一般默認(rèn)都是0；
         border的背景顏色需要單獨設(shè)置
         
margin - 不可見，但是占位置；分上下左右四個部分；一般默認(rèn)是0
    ![image.png](https://upload-images.jianshu.io/upload_images/14187468-1a3df5eb3fb9f3d3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

image.png