頁面布局浮動以及定位

1、頁面布局，浮動以及定位什么是盒模型？（1）css盒子模型僅僅是一個(gè)比方，html中全部的標(biāo)簽都是盒子（2）就是在html中全部標(biāo)簽都可以設(shè)置（3）寬度/高度：指可以存放內(nèi)容的區(qū)域（4）內(nèi)邊距：內(nèi)容與邊框的距離-填充物（5）邊框：（6）外邊距：盒子與盒子之間的距離盒子的寬度有不同的寬度（1）盒子寬度和高度–1、內(nèi)容的寬度和高度就是通過標(biāo)簽的width/height屬性設(shè)置的寬度和高度–2、元素的寬度和高度寬度=左邊框+width+右內(nèi)邊距+右邊框高度一樣–3、元素空間的寬度和高度寬度=左外邊距+左邊框+做內(nèi)邊距+width+右內(nèi)邊距+右

2、邊框+右外邊距高度一樣總結(jié)，可以按照盒子模型的特性+浮動/定位+設(shè)置寬高來舉行頁面布局設(shè)計(jì)什么是網(wǎng)頁的布局方式：排版二。一、標(biāo)準(zhǔn)流（文檔流/一般流）排版方式：從左到右，從上到下1、掃瞄器默認(rèn)的排版就是標(biāo)準(zhǔn)流排版方式2、css把元素分為塊元素（默認(rèn)每行只能顯示一個(gè)），行內(nèi)元素，行內(nèi)塊元素3、在標(biāo)準(zhǔn)流有兩種排版方式，一種是垂直排版，一種是水平排版垂直排版：塊元素水平排版：行內(nèi)元素/行內(nèi)塊元素設(shè)置二。二、浮動流排版：半脫離標(biāo)準(zhǔn)流2.1、浮動流只是一種排版方式，水平排版，它只能設(shè)置某個(gè)元素在父元素左對齊或者右對齊，沒有居中對齊，2.2、不行以用法magrin ：0 auto;2.3、浮動流不區(qū)別塊級元

3、素/行內(nèi)元素/行內(nèi)塊元素，都是水平排版2.4、 都可以設(shè)置寬高什么是浮動元素脫標(biāo)：脫離標(biāo)準(zhǔn)流效果，之前的標(biāo)準(zhǔn)流的元素會重新排版，由于脫離這個(gè)標(biāo)準(zhǔn)流后，騰出了位置浮動元素排序原則1、相同方向上的浮動元素，先浮動的在前，后浮動的在后2、不同方向，左浮動找左浮動，右浮動找右浮動互不影響，問題;當(dāng)兩個(gè)遇到會怎么樣？3、浮動元素浮動之后的位置，是由浮動之前在標(biāo)準(zhǔn)流中的位置來確定所以稱為半脫離狀態(tài)：看浮動之前的位置在哪一行，就在哪一行浮動，若前面有浮動，則前面浮動完成后，標(biāo)準(zhǔn)流重新排版，看到就是重新排版的位置浮動元素的貼靠現(xiàn)象（1）、假如父元素的寬度能顯示全部浮動元素，那么浮動的元素會并排顯示（2）假如父

4、元素的寬度不能顯示全部浮動元素，那么會從最后一個(gè)元素開頭往前面貼靠（3）假如貼靠了前面全部的浮動元素之后都不能顯示，終于會貼靠到父元素的左邊或者右邊用處浮動元素字圍繞現(xiàn)象？浮動元素不會攔住沒有浮動元素中的文字，沒有浮動 的文字會自動給浮動的元素讓位置，這個(gè)就是浮動元素字圍現(xiàn)象利用浮動來布局首先要清除默認(rèn)布局1、先從上到下，大體盒子布局2、再從左到右布局浮動元素高度問題1、若子元素浮動了，則他不會撐起父元素的高度清除浮動方式為什么要清除浮動？由于當(dāng)父盒子高度為0時(shí)，子盒子不占位置，子盒子不會撐開父盒子，所以下面的標(biāo)準(zhǔn)流盒子，會跑到父盒子中的子盒子下面。關(guān)于浮動的小學(xué)問：（1）浮動的盒子千萬不要讓他超出父盒子。（2）超出父盒子的部分會影響下面盒子中的浮動的子盒子。（3）浮動的盒子比標(biāo)準(zhǔn)流盒子高，但是能夠遮攔住標(biāo)準(zhǔn)流盒子，遮擋不住里面的和文字。清除浮動的幾種方式？（1）給前面的一個(gè)父元素設(shè)置高度（但是企業(yè)中，能不寫高度就不寫高度）（2）想讓誰不跟前，就給誰添加cl