1.左右布局：不少于三種方法

圣杯布局和雙飛翼布局解決的問題是一樣的怔檩，就是兩邊頂寬揽浙，中間自適應的三欄布局冬念，中間欄要在放在文檔流前面以優(yōu)先渲染提前。

圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動旋廷，但左右兩欄加上負margin讓其跟中間欄div并排鸠按，以形成三欄布局。

不同在于解決”中間欄div內(nèi)容不被遮擋“問題的思路不一樣：

圣杯布局柳洋，為了中間div內(nèi)容不被遮擋待诅，將中間div設置了左右padding-left和padding-right后，將左右兩個div用相對布局position: relative并分別配合right和left屬性熊镣，以便左右兩欄div移動后不遮擋中間div。

雙飛翼布局，為了中間div內(nèi)容不被遮擋绪囱，直接在中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容测蹲，在該子div里用margin-left和margin-right為左右兩欄div留出位置。

作者：知乎用戶
鏈接：https://www.zhihu.com/question/21504052/answer/50053054
來源：知乎
著作權歸作者所有鬼吵。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權扣甲，非商業(yè)轉(zhuǎn)載請注明出處。

• 圣杯模型

兩欄和自適應元素都設置同一方向的浮動(如float: left)

父元素設置左右padding為左右邊欄的寬度齿椅。

自適應元素設置寬度為100%

左邊欄margin-left為負100%琉挖，再設置relative，最后通過left屬性偏移負的自身寬度涣脚。

右邊欄margin-left為負自身寬度示辈，再設置relative，最后通過right屬性偏移負的自身寬度遣蚀。

• 雙飛翼模式
  與圣杯模式相似矾麻，只不過少了relative，left芭梯，right的步驟和共同父元素险耀，主內(nèi)容元素多了層父元素，實現(xiàn)思路如下：

main元素設置左右margin值玖喘，值為左右兩欄的寬度甩牺，main父元素設置寬度為100%。
左邊欄margin-left為負100%
右邊欄margin-left為負自身寬度

• 兩欄布局
  利用BFC布局實現(xiàn)：

html:
<div class="main">
        <div class="left"></div>
        <div class="right">可愛如我可愛如我可愛如我可愛如我   biubiubiubiubiubiu</div>
</div>

css:
        .main{
            /* float: left; */
            width: 100%;
        }
        .left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            opacity: 0.5;
        }
        .right{
            overflow: auto;
            height: 100px;
            background-color: green;
        }
main里注釋的那句代碼是因為加和不加對這個布局沒影響累奈，加的話如果后面還有元素贬派，可能需要視情況考慮清除浮動。

該布局利用了float和overflow费尽，overflow在這里的作用是激活BFC布局赠群。

除了BFC，還可以利用float和margin來實現(xiàn)旱幼，和上面BFC相比查描，只是少了一句BFC的激活語句，多了一句 margin-left:100px;

2.BFC的功能和特點：

• 如何激活BFC布局：

1.float值不是none
2.position為absolute或者fixed
3.非塊級元素的display是其中一個：inline-block柏卤，table-cell冬三，table-caption，flex缘缚，inline-flex
4.塊級元素具有overflow勾笆，且值不是visible

• BFC用處
  原文鏈接

  1.清除浮動

html:
<div class="wrap">
<section>1</section>
<section>2</section>
</div>

css:
.wrap {
  border: 2px solid yellow;
  width: 250px;
}
section {
  background-color: pink;
  float: left;
  width: 100px;
  height: 100px;
}

由于子元素都是浮動的，受浮動影響桥滨，邊框為黃色的父元素的高度坍塌了窝爪。

image

解決方案：為.wrapper 加上 overflow:hidden弛车，使其形成BFC，根據(jù)BFC規(guī)則第六條蒲每，計算高度時就會計算float的元素的高度纷跛，達到清除浮動的效果。
清除后如下：

image

2.自適應兩欄布局

見CSS + CSS3的問題1 有詳細解釋

3.防止垂直margin合并

html:
<section class="top">1</section>
<section class="bottom">2</section>

css：
section {
  background-color: pink;
  margin-bottom: 100px;
  width: 100px;
  height: 100px;
}
.bottom {
  margin-top: 100px;
}
請注意，這里有一個margin-bottom和margin-top分別都是100px，section的寬高為了好對比也設置的100px

image

可以看到，我們實際只能看到兩個section之間的高度是100px，這是因為他們的外邊距相遇發(fā)生了合并飘诗。
解決方式：為其中一個元素的外面包裹一層元素，并為這個外層元素設置overflow:hidden溉潭，使其形成BFC赞别。因為BFC內(nèi)部是一個獨立的容器惠毁，所以不會與外部相互影響羽莺，可以防止margin合并荒给。

代碼如下：
html:
<section class="top">1</section>
<div class="wrap">
<section class="bottom">2</section>
</div>
css多加了.wrap的樣式，其他不變。
overflow:hidden

image

3.對柵格的理解

大部分柵格系統(tǒng)的公式依據(jù)：W =（c + g） * N
其中W是Flowline是W，c是column的寬度，g是Gutter（卡槽）的寬度

bootsrap的柵格系統(tǒng)：

bootstrap中，必須將列放入row中，而row必須在container中被冒，container類在布局中主要有兩個作用：
1.在不同的寬度區(qū)間內(nèi)（響應式斷點）提供寬度限制肠虽，當寬度變化時闲延，采用不同的寬度陆馁。
2.提供一個padding佛析，組織內(nèi)部內(nèi)容觸碰到瀏覽器邊界。

響應式布局概念：為同一個頁面設計多種布局形態(tài)，分別適配不同屏幕尺寸的設備。

在介紹柵格布局如何實現(xiàn)之前驮配，先介紹一個bootstrap中的柵格原理：
參考源文
要理解bootstrap的柵格涮阔，這其中有兩個要點：

• 容器（container），行（row）和列（column）之間的層級關系，一個正確的寫法如下：

<div class="container">  
    <div class="row">  
        <div class="col-md-6"></div>  
        <div class="col-md-6"></div>  
    </div>  
</div>

bootstrap柵格的container，row歧蕉，column必須保持特定的層級關系催跪，才能正常工作扫责。原因如下：container有15px的水平內(nèi)邊距抡笼，row有-15px的水平外邊距藏古，column有15px的水平內(nèi)邊距，這些邊距是故意的、互相關聯(lián)的臭墨，因此就像齒輪一樣，限定了層級結(jié)構。這也是bootstrap的精巧之處斥黑。
正確的用法如下：

<div class="container">   
    <div class="row">   
        <div class="col-md-8">   
            <div class="row">   
                <div class="col-md-6"></div>   
                <div class="col-md-6"></div>   
            </div>   
        </div>   
        <div class="col-md-4"></div>   
    </div>   
</div>

• 第二個要點箕慧，是不同的斷點類型的意義及其搭配

bootstrap柵格的column對應的類名形如.col-xx-y伐庭，其中y是數(shù)字盯捌，表示該元素的寬度占據(jù)12列中的y列，而xx只有特定的幾個值可以選擇缀雳，分別是xs渡嚣、sm、md、lg识椰，他們就是斷點類型绝葡，斷點像素值依次增大，其中xs表示極小腹鹉，即認為視口寬度永遠不小于xs斷點藏畅，column始終水平浮動。
在bootstrap的sass源碼中是這樣定義柵格的：

@include make-grid-columns;   
@include make-grid(xs);   
@media (min-width: $screen-sm-min) {   
  @include make-grid(sm);   
}   
@media (min-width: $screen-md-min) {   
  @include make-grid(md);   
}   
@media (min-width: $screen-lg-min) {   
  @include make-grid(lg);   
}

可以看到功咒，用了min-width的寫法愉阎，而且斷點像素值越大的，對應代碼越靠后力奋。這就是為什么在實現(xiàn)柵格布局時榜旦，只設定最小值，而不設定最大值的原因了景殷。

現(xiàn)在我們可以來了解一下如何實現(xiàn)柵格布局了：

柵格布局如何實現(xiàn)：

參照源

• 開始

實現(xiàn)柵格系統(tǒng)溅呢，首要確定兩個內(nèi)容：
1.我們打算把屏幕分為幾類
2.我們打算支持的列數(shù)是多少
我們可以以bootstrap為參照，將屏幕分成四類：超小屏幕（<768px）滨彻，小屏幕--平板（>=768px）藕届，中等屏幕--桌面顯示器（>=992px），大屏幕--大屏幕顯示器（>=1200px）亭饵，類前綴分別為：.col-xs-，.col-sm-梁厉，.col-md-辜羊，.col-lg-，列數(shù)也可以定位12词顾。

• 實現(xiàn)

確定好屏幕分類和列數(shù)后八秃，就可以開始實現(xiàn)了。
首先給柵格系統(tǒng)的所有class增加浮動 float:left

聲明浮動后開始聲明寬度肉盹，從最小屏幕開始昔驱，最小屏幕不需要使用@media來聲明。

.col-sm-1 {
    width: 8.333333%  // 十二分之一
}
.col-sm-2 {
    width: 16.66667%  // 十二分之二      
}
// ...
.col-sm-12 {
    width: 100%  // 十二分之十二
}

其他情況情況也需要聲明浮動和寬度上忍，但是需要聲明最小屏幕寬度骤肛，以中屏舉例：

注意括號里是 min-width
@media (min-width:992) {
    .col-md-1 {
        width: 8.333333%  // 十二分之一
    }
    .col-md-2 {
        width: 16.66667%  // 十二分之二      
    }
    // ...
    .col-md-12 {
        width: 100%  // 十二分之十二
    }
}

其他情況同理，這樣我們就能實現(xiàn)一個簡單的柵格系統(tǒng)窍蓝。

4.（水平）居中有哪些實現(xiàn)方式

• text-align:center;
  將行內(nèi)元素包裹在一個屬性display為block的父層元素中腋颠，并且把父層元素添加如下屬性即可：
• 塊狀元素解決方案： margin:0 auto;
• 多個塊狀元素解決方案
  將元素的display屬性設置為Inline-block，并且把父元素的text-align屬性設置為center吓笙。
• 多個塊狀元素解決方案（使用flexbox布局實現(xiàn)）
  使用flexbox布局淑玫，只需要把待處理的塊狀元素的父元素添加屬性display：flex及justify-content:center

垂直居中

• 單行的行內(nèi)元素解決方案
  height=line-height

• 多行的行內(nèi)元素解決方案
  組合使用display:table-cell和vertical-align:middle屬性來定義需要居中的元素的父容器元素生成效果

• 已知高度的塊元素解決方案
  top移動50%，之后margin-top移動自身高度的一半

水平垂直居中

• 已知高度和寬度的元素

.item{
    position:absolute;
    margin:0 auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

• 已知高度和寬度的元素

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;  /* 設置margin-left / margin-top 為自身高度的一半 */
    margin-left: -75px;
}

• 未知高度和寬度的元素

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用css3的transform來實現(xiàn) */
}

• 使用flex布局來實現(xiàn)

.parent{
    display: flex;
    justify-content:center;
    align-items: center;
    /* 注意這里需要設置高度來查看垂直居中效果 */
    background: #AAA;
    height: 300px;
}

5.CSS3有哪些新屬性？

彈性盒子 flex

概念源文
彈性盒子是CSS3的一種新的布局模式絮蒿，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當?shù)男袨榈牟季址绞健?br> 彈性盒子由彈性容器和彈性子元素組成尊搬，彈性容器通過設置display屬性的值為flex或inline-flex將其定義為彈性容易。
彈性容器內(nèi)包含了一個或多個彈性盒子土涝。

• flex-direction屬性
  1 row：橫向從左到右排列（左對齊）佛寿，默認的排列方式
  2 row-reverse：反轉(zhuǎn)橫向排列（右對齊，從后往前排回铛，最后一項排在最前面）
  3 column：縱向排列
  4 column-reverse：反轉(zhuǎn)縱向排列狗准，從后往前排，最后一項排在最上面

• justify-content屬性
  1 flex-start：默認值茵肃。彈性項目向行頭緊挨著填充腔长。
  2 flex-end：彈性項目向行尾緊挨著填充
  3 center：彈性項目居中緊挨著填充（如果剩余的自由空間是負的，則彈性項目將在兩個方向上同時溢出）验残。
  4 space-between：在彈性項目剛好排下的時候該值等同于flex-start捞附，如果彈性項目少的話，則第一個彈性項目的外邊距和行的main-start邊線對齊您没，而最后一個彈性項的外邊距和行的main-end邊線對齊鸟召，然后剩余的彈性項分布在該行上，相鄰項目的間隔相等氨鹏。
  5 space-round：
  如果剩余空間為負或者只有一個彈性項欧募，則該值等同于center。否則仆抵，彈性項目沿該行分布跟继，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔

• align-items屬性：設置盒子元素在側(cè)軸（縱軸）方向上的對齊方式镣丑。
  1 flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界舔糖。
  2 flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
  3 center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置莺匠。（如果該行的尺寸小于彈性盒子元素的尺寸金吗，則會向兩個方向溢出相同的長度）。
  4 baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條趣竣，則該值與'flex-start'等效摇庙。其它情況下，該值將參與基線對齊期贫。
  5 stretch：如果指定側(cè)軸大小的屬性值為'auto'跟匆，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制通砍。

3D旋轉(zhuǎn)

不同瀏覽器的動畫兼容性都不一樣玛臂，所以在寫旋轉(zhuǎn)屬性時考慮多種瀏覽器的兼容特點烤蜕。
比如：同樣的transform，谷歌是-webkit-transform迹冤，火狐是-moz-transfrom讽营。

旋轉(zhuǎn)方法如下：

沿X軸旋轉(zhuǎn)
div{
  transform:rotateX(120deg);
  -webkit-transform:rotateX(120deg);
}
沿Y軸旋轉(zhuǎn)
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 與 Chrome */
}

另外還可以沿Z軸旋轉(zhuǎn)，這里的x,y,z可以聯(lián)想一些有趣的內(nèi)容記住~
比如 正面推倒妹子泡徙，就是X橱鹏，妹子側(cè)躺著欣賞，就是Y堪藐，妹子玉體橫陳就是Z莉兰。
以及定義3D縮放轉(zhuǎn)換scaleX(x)，scaleY(y)礁竞，scaleZ(z)
translateX(x)糖荒，transformY(y)，transformZ(z)來定義3D轉(zhuǎn)換模捂。

border-radius屬性：

使用該屬性可以給任何元素制作“圓角”捶朵。

@font-face規(guī)則：

<style>
自定義字體
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>

文本效果

文本陰影，text-shadow：5px 5px 5px #ff0000狂男；
盒子陰影综看，box-shadow：10px 10px 5px #888888；
文本溢出屬性岖食，text-overflow

按鈕

CSS3的按鈕添加了更多顏色或者邊框啊红碑，圓潤程度的改變，并沒有什么太大的亮點泡垃。

6.margin塌陷

參考原文

• margin屬性句喷，注意幾點：
  1 如果 margin 的值是百分比，則是相對于父元素的內(nèi)容盒寬度來計算的兔毙，即使 margin-top 和 margin-bottom 也是如此。因此即使父元素的高寬不相等兄春，子元素的 margin 元素指定了相同的百分比值澎剥，則子元素各個方向的 margin 計算值都是相等的。
  2 margin-top 和 margin-bottom 值對行內(nèi)非替換元素（non-replaced inline element）是無效的赶舆。因此我們可以指定 img 元素的 margin-top 和 margin-bottom哑姚，而非替換行內(nèi)元素（如 i，span 等）設置 margin-top 和 margin-bottom 卻不會產(chǎn)生效果芜茵。
  （非替換元素是指該元素的height和width屬性的大小由其內(nèi)容決定叙量，而不能直接設置）
• 相鄰的margin
  兩個margin符合垂直相連的的四種情況，滿足其中之一即可：
  1 父元素的 top margin 和第一個子元素的 top margin
  2 父元素的bottom margin 和最后一個子元素的 bottom margin
  3 元素的 bottom margin 和與這個元素相鄰的兄弟元素的 top margin
  4 如果一個元素九串，它沒有生成 BFC绞佩、沒有包含正常流的子元素寺鸥、min-height是0、height是0或者 auto品山，則它的 top margin 和 bottom margin 也是垂直毗連的

如果兩個margin滿足以下三個條件胆建，我們就說這兩個margin是相鄰的：
1 這兩個margin是垂直相連的，即滿足上面四種情況之一
2 margin的兩個元素都是正常流的塊級元素肘交，并且在同一個BFC中
3 兩個margin之間沒有行盒笆载、清除浮動后的空隙、padding和border涯呻。

• margin折疊
  即相鄰的margin有可能會被折疊成一個凉驻。
  比如元素 #a 指定了 margin-bottom 為 10px，而它下方的元素 #b 指定了 margin-top 為 20px复罐，

  
  
  image

元素 #a 的 margin-bottom 和元素 #b 的margin-top 在位置上重疊了涝登，它們之間的距離是 20px，即元素 #b 的 bottom margin 長度市栗，這就是 margin 折疊現(xiàn)象缀拭。關于這個現(xiàn)象，可以這么理解：

margin 定義的是它與其他盒子之間的最小間距填帽。其中元素 #a 指定了 margin-bottom 為 10px蛛淋，就表明它下方的元素 #b 與它至少要有 10px 的距離，它指定的是一個最小值篡腌，因此實際的距離可以比這個大褐荷。

元素 #a 下方的元素 #b 也設置了 margin-top 為 20px，如果不折疊嘹悼，則他們之間就有 30px 的距離叛甫。如果折疊成了一個 20px 的距離，則對元素 #a 來說杨伙，它的 margin-bottom 要求至少要有 10px 的距離其监，是滿足的，而對于元素 #b 來說限匣，它的 margin-top 要求至少要有 20px 的距離抖苦，也是滿足的。

而 margin 折疊的存在米死，其實是為了可以在視覺上顯得更美觀锌历，也更貼近設計師的預期。

-margin的折疊規(guī)則
并不是所有的margin都可以折疊峦筒，需要滿足以下條件：
1 垂直相鄰的margin才有可能折疊究西，水平margin永遠不折疊
2 根元素（即html）的margin永遠不折疊
3 如果一個元素，它的 top margin 和 bottom margin 是相鄰的物喷，并且有清除浮動后的空隙（clearance）卤材，這個元素的 margin 可以跟兄弟元素的 margin 折疊遮斥，但是折疊后的 margin 不能跟父元素的 bottom margin 折疊。

-折疊后的Margin大小

當兩個或者兩個以上的 margin 折疊后商膊，margin 的值計算如下：
1 如果 margin 都是正數(shù)伏伐，則取他們當中的最大值
2 如果 margin 中有正有負，則取最大的正數(shù)加上最小的負數(shù)（如最大的 margin是 20px晕拆，最小的 margin 是 -20px藐翎，則他們計算后的值是 0）
3 如果 margin 中都是負數(shù)，則取他們當中的最小值

• 如何解決margin塌陷

例1：針對——>“* 兩個 margin 之間沒有行盒（line box）实幕、清除浮動后的空隙（clearance）吝镣、padding和邊框”

如圖所示：

image

如果 #container 沒有下邊框，則 #container 的 bottom margin 和 #inner 的 bottom margin 是相鄰的昆庇，因此它們折疊了末贾，并且 #inner 撐開了 #container 元素，所以可以看到 #container 元素的高度變成了 10px整吆，且顯示的是 #inner 的紅色背景
我們通過增加padding的方式來阻止Margin的折疊：

image

例2：針對——>'* margin 的兩個元素都是正常流的塊級元素务荆，并且在同一個 BFC 中''

我們通過創(chuàng)建新的BFC來阻止Margin的折疊：

image

如上圖 #container 元素和 #inner 元素同屬于一個 BFC 中，#container 的 top margin 和 #inner 的 top margin 折疊穷遂，bottom margin 同理函匕。
但如果讓 #container 跟 #innter 處在不同的 BFC 中，則 top margin 和 bottom margin 都不會折疊蚪黑，如：

image

例3：針對——>"* 如果一個元素伴网，它本身的 top margin 和 bottom margin 是相鄰的，并且有清除浮動后的空隙（clearance）妆棒，這個元素的 margin 可以跟兄弟元素的 margin 折疊澡腾，但是折疊后的 margin 不能跟父元素的 bottom margin 折疊"

image

給父元素 #container 設置了一個灰色背景沸伏，并且沒有設置高度，因此高度會隨著內(nèi)容而擴展动分，margin 設置為 50px毅糟。
其中有一個紅色的浮動元素 #floated，高寬都設置為 40px澜公。
給 #cleared 設置了 15px 的 margin姆另，并且元素的高度、padding坟乾、margin 都為0迹辐，因此 #cleared 元素的 top margin 和 bottom margin 是相鄰的。這個元素的位置如下圖所示：

image

因為 #cleared 元素清除了左浮動甚侣，所以 #cleared 元素下移明吩。
而 #cleared 元素和 #slibling 元素的 margin 折疊了，因此可以看到他們的位置是重疊的殷费。

image

如果沒有這條規(guī)則仍律，他們還應該跟 #container 的 bottom margin 進行折疊，如：

image

以上這張圖殷绍，在去掉了 #cleared 元素的 clear 屬性之后染苛，就不滿足這條規(guī)則了，所以可以看到 #container 的高度就只有 40px主到，即紅色的浮動元素的高度茶行，而 #cleared 元素、#sibling 元素登钥、#container 元素的 margin 都折疊成了一個畔师。