CSS布局

確定頁面的大致結(jié)構(gòu)，頁面分多少塊塘装，每塊的位置旁仿。每個(gè)部分怎么把該部分撐起來妆够。

* 早期以table為主(簡單)
* 之后 以技巧性的布局為主(難)
* 現(xiàn)在有flexbox/grid(偏簡單)
* 響應(yīng)式布局 在移動(dòng)端大行其道的時(shí)代 是必備的

* table表格布局
* float浮動(dòng) + margin
* inline-block布局 (用起來方便商玫，但是小問題較多)
* flexbox布局

盒模型

如下圖所示：
寬度和高度 指的是content的寬度和高度
margin指的是 距離上一個(gè)元素的距離 或者是 距離父元素的content的距離狂打。
* 要注意content-box 和 border-box區(qū)別：
    content-box: 設(shè)置的width/height 是設(shè)置content的寬高
    border-box: 設(shè)置的width/height 是border+padding+content的寬高
* w3c盒模型
    外盒尺寸計(jì)算（元素空間尺寸）
        element空間高度＝內(nèi)容高度＋內(nèi)距＋邊框＋外距
        element空間寬度＝內(nèi)容寬度＋內(nèi)距＋邊框＋外距

    內(nèi)盒尺寸計(jì)算（元素大惺樾薄）
        element高度＝內(nèi)容高度＋內(nèi)距＋邊框（height為內(nèi)容高度）
        element寬度＝內(nèi)容寬度＋內(nèi)距＋邊框（width為內(nèi)容寬度）

* IE盒模型
    外盒尺寸計(jì)算（元素空間尺寸）
        element空間高度＝內(nèi)容高度＋外距（height包含了元素內(nèi)容寬度诬辈、邊框、內(nèi)距）
        element空間寬度＝內(nèi)容寬度＋外距（width包含了元素內(nèi)容寬度荐吉、邊框焙糟、內(nèi)距）

    內(nèi)盒尺寸計(jì)算（元素大小）
        element高度＝內(nèi)容高度（height包含了元素內(nèi)容寬度稍坯、邊框酬荞、內(nèi)距）
        element寬度＝內(nèi)容寬度（width包含了元素內(nèi)容寬度淘菩、邊框助琐、內(nèi)距）

* display確定元素的顯示類型
    block/inline/inline-block
    inline元素 默認(rèn)是沒有寬高的(設(shè)置width/height也不會(huì)起作用)

* position確定元素的位置
    static/relative/absolute/fixed
    * relative的偏移 是相對(duì)于 元素自身默認(rèn)位置 進(jìn)行偏移的外里。并且 偏移 不會(huì)改變?cè)刈陨碓谖臋n流中 占據(jù)的空間(也就是說宗弯，其后的元素的位置 仍是依照 元素進(jìn)行偏移之前的位置 進(jìn)行排布)虚婿。設(shè)置relative 不會(huì)使元素 脫離文檔流彼硫。

    * 對(duì)元素設(shè)置absolute溜徙，會(huì)使元素 脫離文檔流(也就是說 不會(huì)對(duì)其它元素的布局 造成影響)市怎。absolute元素的參照位置 是參照 距離元素自身 最近的 父級(jí)absolute/relative元素 進(jìn)行定位的.

    對(duì)元素設(shè)置fixed陨亡，會(huì)使元素 脫離文檔流(也就是說 不會(huì)對(duì)其它元素的布局 造成影響)傍衡。fixed相對(duì)于瀏覽器窗口是 固定的。

    * 默認(rèn)情況下负蠕，會(huì)按照元素出現(xiàn)的先后順序 進(jìn)行層疊蛙埂。想要手動(dòng)改變 層疊元素的層疊順序，可以設(shè)置z-index.
    * 什么樣的元素可以設(shè)置z-index? position為relative/absolute/fixed的元素 可以設(shè)置z-index遮糖，z-index數(shù)值大的 在上層. 
    * 寫css時(shí)要注意z-index的設(shè)置绣的，一般來說 會(huì)給不同的元素 設(shè)置不同的區(qū)間，以防元素之間相互覆蓋。

Flexbox

* flexbox是有彈性的屡江，可伸縮的
* flexbox本身就是 可以并列的
* 可以指定 寬度

使用float布局

* 元素設(shè)置float后芭概，元素就脫離了文檔流，但是不會(huì)脫離文本流惩嘉。
* float對(duì)元素自身的影響：
    * 會(huì)形成 ’塊‘(BFC - block formatting context): BFC會(huì)形成自己的布局(也就是 BFC塊的寬高 都由自己決定罢洲，也可以給它設(shè)置寬高)
    * 位置 先會(huì)向上靠
    * 位置 再向左/右靠

* 對(duì)兄弟元素的影響
    * float元素 向上緊貼 非float的元素(當(dāng)然 也可以是float元素)
    * float元素 向旁邊 緊貼 float元素(或者是 父元素的邊)
    * float元素不影響 其他塊級(jí)元素的位置
    * float元素影響 其他塊級(jí)元素 的內(nèi)部文本

* (float元素)對(duì)父級(jí)元素的影響
    * float元素 會(huì)從父級(jí)元素的空間中 消失
    * 父級(jí)元素 可能會(huì) 高度坍陷
        解決思路：
            1. float元素 進(jìn)行設(shè)置float時(shí)，float元素 會(huì)變成BFC文黎，BFC會(huì)負(fù)責(zé)接管自己的寬高的設(shè)置惹苗。
            那么有 沒有可能 讓父元素 也成為BFC，讓父元素 接管(父元素)自身的寬高呢臊诊？
            可以設(shè)置 父元素的overflow屬性(除了 visible 以外的值（hidden鸽粉，auto，scroll）). 


span默認(rèn)是 inline元素抓艳，而inline元素 是不能設(shè)置寬高的触机，這里span為什么會(huì)有寬高？
    float使span成為了一個(gè)BFC塊玷或，使得span可以設(shè)置寬高儡首。

* CSS中BFC詳解
    https://www.cnblogs.com/chen-cong/p/7862832.html

clear: both;  的作用是：保證該元素左右兩側(cè) 沒有浮動(dòng)元素。
after偽元素 默認(rèn)是inline的偏友。設(shè)置after為block 另起一行蔬胯。
高度height：0；visibility: none;
position: absolute元素位他，脫離文檔流 氛濒，無法繼承父元素的高度，因此需要 顯示的指定 高度鹅髓。

float+margin 實(shí)現(xiàn)兩列布局
1. div1 左浮動(dòng)：給出左側(cè)的空間
2. div2 的margin-left留出 div1 的寬度. + overflow: hidden;也變?yōu)锽FC塊舞竿，和 div1的BFC塊 并列。

float+margin 實(shí)現(xiàn)三列布局
1. div1 左浮動(dòng)：給出左側(cè)的空間
2. div2 右浮動(dòng)：給出右側(cè)的空間
3. div3 的margin-left margin-right 分別留出 div1 div2的寬度
這里面需要注意：div3要出現(xiàn)在 div1 和 div2 之后窿冯。否則的話 會(huì)先 排布div3骗奖，此時(shí)浮動(dòng)的div2 的頂部(由于float元素的特性) 會(huì)緊貼div3的底部。

inline-block 布局

布局所要做的事情是 把不同的塊 橫向并列起來醒串。由于縱向是由 每一行堆疊起來的执桌，重復(fù)的 布局一行的內(nèi)容，就可以了芜赌。
所以 布局重點(diǎn)就是 把塊 橫向的 排布開來仰挣。

* 像文本一樣 排列block元素
* 沒有 清除浮動(dòng) 等問題，簡單易用
* 但是需要 處理間隙
    多個(gè)inline-block之間的間隙 相當(dāng)于 文字與文字 之間的間隙缠沈。不管使用什么字體椎木，兩個(gè)字之間 始終是有間隙的违柏。
    所以 間隙就出現(xiàn)在了 inline-block上面。
    解決辦法：
        1. 把inline-block的父元素 字體大小(font-size) 設(shè)置為0香椎。
        (因?yàn)?字體大小為0了 文字之間的間隙也就為0了)
        為了顯示inline-block內(nèi)的文字, 要重新設(shè)置inline-block的font-size.

        2. 把inline-block元素 之間的 空隙注釋掉，就可以了禽篱。

        還是推薦使用 設(shè)置字體 的方式畜伐，來處理inline-block之間的間隙。
* 局限：使用inline-block去做 自適應(yīng)的東西躺率，會(huì)有一定的困難玛界。
    所以 對(duì)于定寬的東西來說，比較適合 采用 inline-block 來進(jìn)行布局悼吱。

響應(yīng)式設(shè)計(jì)和布局

在移動(dòng)端時(shí)代慎框，響應(yīng)式的設(shè)計(jì)和布局 是必需掌握的內(nèi)容。響應(yīng)式布局 能幫助網(wǎng)頁 更好的適配pc端 和不同尺寸的移動(dòng)端后添。

* 讓頁面 在不同的設(shè)備上 能正常的使用
* 主要處理的是 屏幕大小的問題(嚴(yán)格來講 還涉及到 是否有鼠標(biāo) 是否是讀屏軟件 是否支持一些樣式)
* 在具體的方法上 涉及到 設(shè)計(jì) 和 實(shí)現(xiàn) 兩方面笨枯。
    響應(yīng)式頁面的設(shè)計(jì) 如果沒有 設(shè)計(jì)思路的支持，是很難進(jìn)行的遇西。
    (如果設(shè)計(jì)師直接給你固定寬度980的頁面馅精，位置都定死的話，那么到移動(dòng)端 是沒有辦法 做適配的)所以 在設(shè)計(jì)的源頭 就要想一些辦法 去適配粱檀。

* 主要方法：
    * 隱藏 + 折行 + 自適應(yīng)空間
        隱藏：確定好哪一部分的內(nèi)容(比如導(dǎo)航 個(gè)人信息 可以通過點(diǎn)擊菜單 從而彈出導(dǎo)航和個(gè)人信息 的方式洲敢，去隱藏起來) 在移動(dòng)端是可以隱藏的。
        比如側(cè)邊欄 友情鏈接 和很大的footer 在移動(dòng)端就不顯示了茄蚯。
        折行：在pc端橫向排布的若干個(gè)東西压彭，在移動(dòng)端 可以 一行顯示兩個(gè) 分多行顯示。
        留下自適應(yīng)的空間：和兩列布局類似渗常，一列固定寬度 另一列隨屏幕自適應(yīng)壮不。
        (類似的思路，在屏幕頂部 給logo固定寬度 logo右側(cè)的純色背景 可以自適應(yīng))凳谦。如果在設(shè)計(jì)的時(shí)候忆畅，多留一些自適應(yīng)的空間 就可以很好的適配移動(dòng)端。
    具體的方法：
        rem：通過html的字體大小 來確定元素大小的辦法尸执，我們可以使用rem的單位 進(jìn)行布局家凯。布局完成之后 針對(duì)不同大小的屏幕 給出不同大小的字號(hào)，那么其它元素就會(huì)跟著縮放如失。
        viewpoint：用js或者手工確定 要把整個(gè)界面放到多大
        media query：根據(jù)不同設(shè)備的特性 來匹配不同的樣式绊诲。比如 為小屏幕 寫一段樣式 為大屏 寫一段樣式，然后 通過media query來進(jìn)行褪贵。

    折行：把橫向排布的inline-block元素, 
        用@media (max-width: 640px)適配屏幕掂之，
        從而更改inline-block元素 為 block抗俄，margin: 0 auto
        (為了元素居中)。 

    自適應(yīng)：1. 既然不同設(shè)備的屏幕尺寸不一樣世舰，那么網(wǎng)頁中的文字 也應(yīng)該是不一樣的动雹，此時(shí) 可以采用等比例的方式 來自適應(yīng)屏幕。
        2. 固定設(shè)備的邏輯寬度為320跟压，來適配(<meta name="viewport" content="width=320">)胰蝠。
        3. rem: 使用html{font-size: 20px;}指定rem的單位，然后media根據(jù)查詢到的設(shè)備寬度震蒋，給html{font-size: 20px;}字體大小設(shè)置不同的值茸塞。

        @media (max-width: 375px){
            html{
                font-size: 24px;
            }
        }
        @media (max-width: 320px){
            html{
                font-size: 20px;
            }
        }
        @media (max-width: 640px){
            .intro{
                margin: .3rem auto;
                display: block;
            }
        }

    問題：rem的單位不一定非常精確，有時(shí)候會(huì)碰到’帶小數(shù)點(diǎn)的rem數(shù)值‘(比如font-size: 16px, 不好除盡 會(huì)算出來 帶小數(shù)點(diǎn)的rem數(shù)值)查剖。而小數(shù) 換算出來的 像素 是不精準(zhǔn)的钾虐。所以 使用rem的時(shí)候 要考慮到不精準(zhǔn)的情況 要預(yù)留一些余地 給不精準(zhǔn)的情況。對(duì)于精確性非常高的地方 就不要使用rem來布局了笋庄。

CSS面試題

1. 實(shí)現(xiàn)兩欄/三欄的布局 的方法
    1. 表格布局
    2. float+margin布局
    3. inline-block布局
    4. flexbox布局
2. position: absolute和fixed有什么區(qū)別效扫？
    主要區(qū)別在于 參照物不同
    absolute相對(duì)于 最近的父級(jí) absolute/relative元素 來進(jìn)行定位。
    fixed相對(duì)于屏幕(viewport) 來進(jìn)行定位
3. display: inline-block的間隙 如何處理无切？
    間隙原因：字符間距
    解決方案：1.消滅空白字符：注釋掉 標(biāo)簽之間的空白字符
            2.消滅字符間距：把父級(jí)元素的字體大小設(shè)置為0荡短，再設(shè)置元素自身的字體大小。
4. 如何清除浮動(dòng)哆键，為什么清除浮動(dòng)
    這是因?yàn)?float元素 不會(huì)占據(jù)父元素的布局空間掘托，有可能 float元素 就會(huì)超出 父元素，從而對(duì)其它的元素 造成影響籍嘹。所以作為父元素 要清除浮動(dòng) 來保證父元素內(nèi)的元素 不會(huì)影響父元素的外部元素闪盔。
    清除方式：
        * 讓盒子負(fù)責(zé)自己的布局(overflow:hidden(auto))
            設(shè)置超出時(shí) 要怎么辦，那么就會(huì)管理 什么時(shí)候會(huì)超出
        * ::after{clear:both} display:block 
            content:""  height:0  visibility:none
            不讓父元素管自己的布局辱士，而是加一個(gè)偽元素 放到浮動(dòng)元素的后面泪掀，從而讓父元素 包含浮動(dòng)元素。 

5. 如何視頻移動(dòng)端颂碘？
    * 適配頁面的viewport(頁面的寬度 要和 移動(dòng)端的寬度 適配异赫，否則頁面 在移動(dòng)端上 會(huì)縮小，也就是一定要加viewport)
    * rem/viewport/media query
    * 設(shè)計(jì)上：隱藏(不需要在移動(dòng)端顯示的头岔，就不讓 在移動(dòng)端顯示) 
        折行(在pc端 橫排的東西塔拳，在移動(dòng)端可以少排一些 或者 豎排) 
        自適應(yīng)(留下自適應(yīng)的空間)

我的博客即將同步至騰訊云+社區(qū)，邀請(qǐng)大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=30ypesnuf06cs