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

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

圣杯布局和雙飛翼布局解決問(wèn)題的方案在前一半是相同的，也就是三欄全部float浮動(dòng)，但左右兩欄加上負(fù)margin讓其跟中間欄div并排，以形成三欄布局。

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

圣杯布局，為了中間div內(nèi)容不被遮擋，將中間div設(shè)置了左右padding-left和padding-right后，將左右兩個(gè)div用相對(duì)布局position: relative并分別配合right和left屬性，以便左右兩欄div移動(dòng)后不遮擋中間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
來(lái)源：知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

• 圣杯模型

兩欄和自適應(yīng)元素都設(shè)置同一方向的浮動(dòng)(如float: left)

父元素設(shè)置左右padding為左右邊欄的寬度。

自適應(yīng)元素設(shè)置寬度為100%

左邊欄margin-left為負(fù)100%，再設(shè)置relative，最后通過(guò)left屬性偏移負(fù)的自身寬度。

右邊欄margin-left為負(fù)自身寬度，再設(shè)置relative，最后通過(guò)right屬性偏移負(fù)的自身寬度。

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

main元素設(shè)置左右margin值，值為左右兩欄的寬度，main父元素設(shè)置寬度為100%。
左邊欄margin-left為負(fù)100%
右邊欄margin-left為負(fù)自身寬度

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

html:
<div class="main">
        <div class="left"></div>
        <div class="right">可愛(ài)如我可愛(ài)如我可愛(ài)如我可愛(ài)如我   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里注釋的那句代碼是因?yàn)榧雍筒患訉?duì)這個(gè)布局沒(méi)影響，加的話如果后面還有元素，可能需要視情況考慮清除浮動(dòng)。

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

除了BFC，還可以利用float和margin來(lái)實(shí)現(xiàn)，和上面BFC相比，只是少了一句BFC的激活語(yǔ)句，多了一句 margin-left:100px;

2.BFC的功能和特點(diǎn)：

• 如何激活BFC布局：

1.float值不是none
2.position為absolute或者fixed
3.非塊級(jí)元素的display是其中一個(gè)：inline-block，table-cell，table-caption，flex，inline-flex
4.塊級(jí)元素具有overflow，且值不是visible

• BFC用處
  原文鏈接

  1.清除浮動(dòng)

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;
}

由于子元素都是浮動(dòng)的，受浮動(dòng)影響，邊框?yàn)辄S色的父元素的高度坍塌了。

image

解決方案：為.wrapper 加上 overflow:hidden，使其形成BFC，根據(jù)BFC規(guī)則第六條，計(jì)算高度時(shí)就會(huì)計(jì)算float的元素的高度，達(dá)到清除浮動(dòng)的效果。
清除后如下：

image

2.自適應(yīng)兩欄布局

見(jiàn)CSS + CSS3的問(wèn)題1 有詳細(xì)解釋

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;
}
請(qǐng)注意，這里有一個(gè)margin-bottom和margin-top分別都是100px，section的寬高為了好對(duì)比也設(shè)置的100px

image

可以看到，我們實(shí)際只能看到兩個(gè)section之間的高度是100px，這是因?yàn)樗麄兊耐膺吘嘞嘤霭l(fā)生了合并。
解決方式：為其中一個(gè)元素的外面包裹一層元素，并為這個(gè)外層元素設(shè)置overflow:hidden，使其形成BFC。因?yàn)锽FC內(nèi)部是一個(gè)獨(dú)立的容器，所以不會(huì)與外部相互影響，可以防止margin合并。

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

image

3.對(duì)柵格的理解

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

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

bootstrap中，必須將列放入row中，而row必須在container中，container類在布局中主要有兩個(gè)作用：
1.在不同的寬度區(qū)間內(nèi)（響應(yīng)式斷點(diǎn)）提供寬度限制，當(dāng)寬度變化時(shí)，采用不同的寬度。
2.提供一個(gè)padding，組織內(nèi)部?jī)?nèi)容觸碰到瀏覽器邊界。

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

在介紹柵格布局如何實(shí)現(xiàn)之前，先介紹一個(gè)bootstrap中的柵格原理：
參考源文
要理解bootstrap的柵格，這其中有兩個(gè)要點(diǎn)：

• 容器（container），行（row）和列（column）之間的層級(jí)關(guān)系，一個(gè)正確的寫(xiě)法如下：

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

bootstrap柵格的container，row，column必須保持特定的層級(jí)關(guān)系，才能正常工作。原因如下：container有15px的水平內(nèi)邊距，row有-15px的水平外邊距，column有15px的水平內(nèi)邊距，這些邊距是故意的、互相關(guān)聯(lián)的，因此就像齒輪一樣，限定了層級(jí)結(jié)構(gòu)。這也是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>

• 第二個(gè)要點(diǎn)，是不同的斷點(diǎn)類型的意義及其搭配

bootstrap柵格的column對(duì)應(yīng)的類名形如.col-xx-y，其中y是數(shù)字，表示該元素的寬度占據(jù)12列中的y列，而xx只有特定的幾個(gè)值可以選擇，分別是xs、sm、md、lg，他們就是斷點(diǎn)類型，斷點(diǎn)像素值依次增大，其中xs表示極小，即認(rèn)為視口寬度永遠(yuǎn)不小于xs斷點(diǎn)，column始終水平浮動(dòng)。
在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ě)法，而且斷點(diǎn)像素值越大的，對(duì)應(yīng)代碼越靠后。這就是為什么在實(shí)現(xiàn)柵格布局時(shí)，只設(shè)定最小值，而不設(shè)定最大值的原因了。

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

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

參照源

• 開(kāi)始

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

• 實(shí)現(xiàn)

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

聲明浮動(dòng)后開(kāi)始聲明寬度，從最小屏幕開(kāi)始，最小屏幕不需要使用@media來(lái)聲明。

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

其他情況情況也需要聲明浮動(dòng)和寬度，但是需要聲明最小屏幕寬度，以中屏舉例：

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

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

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

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

垂直居中

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

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

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

水平垂直居中

• 已知高度和寬度的元素

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

• 已知高度和寬度的元素

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

• 未知高度和寬度的元素

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

• 使用flex布局來(lái)實(shí)現(xiàn)

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

5.CSS3有哪些新屬性？

彈性盒子 flex

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

• flex-direction屬性
  1 row：橫向從左到右排列（左對(duì)齊），默認(rèn)的排列方式
  2 row-reverse：反轉(zhuǎn)橫向排列（右對(duì)齊，從后往前排，最后一項(xiàng)排在最前面）
  3 column：縱向排列
  4 column-reverse：反轉(zhuǎn)縱向排列，從后往前排，最后一項(xiàng)排在最上面

• justify-content屬性
  1 flex-start：默認(rèn)值。彈性項(xiàng)目向行頭緊挨著填充。
  2 flex-end：彈性項(xiàng)目向行尾緊挨著填充
  3 center：彈性項(xiàng)目居中緊挨著填充（如果剩余的自由空間是負(fù)的，則彈性項(xiàng)目將在兩個(gè)方向上同時(shí)溢出）。
  4 space-between：在彈性項(xiàng)目剛好排下的時(shí)候該值等同于flex-start，如果彈性項(xiàng)目少的話，則第一個(gè)彈性項(xiàng)目的外邊距和行的main-start邊線對(duì)齊，而最后一個(gè)彈性項(xiàng)的外邊距和行的main-end邊線對(duì)齊，然后剩余的彈性項(xiàng)分布在該行上，相鄰項(xiàng)目的間隔相等。
  5 space-round：
  如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于center。否則，彈性項(xiàng)目沿該行分布，且彼此間隔相等（比如是20px），同時(shí)首尾兩邊和彈性容器之間留有一半的間隔

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

3D旋轉(zhuǎn)

不同瀏覽器的動(dòng)畫(huà)兼容性都不一樣，所以在寫(xiě)旋轉(zhuǎn)屬性時(shí)考慮多種瀏覽器的兼容特點(diǎ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)來(lái)定義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的按鈕添加了更多顏色或者邊框啊，圓潤(rùn)程度的改變，并沒(méi)有什么太大的亮點(diǎn)。

6.margin塌陷

參考原文

• margin屬性，注意幾點(diǎn)：
  1 如果 margin 的值是百分比，則是相對(duì)于父元素的內(nèi)容盒寬度來(lái)計(jì)算的，即使 margin-top 和 margin-bottom 也是如此。因此即使父元素的高寬不相等，子元素的 margin 元素指定了相同的百分比值，則子元素各個(gè)方向的 margin 計(jì)算值都是相等的。
  2 margin-top 和 margin-bottom 值對(duì)行內(nèi)非替換元素（non-replaced inline element）是無(wú)效的。因此我們可以指定 img 元素的 margin-top 和 margin-bottom，而非替換行內(nèi)元素（如 i，span 等）設(shè)置 margin-top 和 margin-bottom 卻不會(huì)產(chǎn)生效果。
  （非替換元素是指該元素的height和width屬性的大小由其內(nèi)容決定，而不能直接設(shè)置）
• 相鄰的margin
  兩個(gè)margin符合垂直相連的的四種情況，滿足其中之一即可：
  1 父元素的 top margin 和第一個(gè)子元素的 top margin
  2 父元素的bottom margin 和最后一個(gè)子元素的 bottom margin
  3 元素的 bottom margin 和與這個(gè)元素相鄰的兄弟元素的 top margin
  4 如果一個(gè)元素，它沒(méi)有生成 BFC、沒(méi)有包含正常流的子元素、min-height是0、height是0或者 auto，則它的 top margin 和 bottom margin 也是垂直毗連的

如果兩個(gè)margin滿足以下三個(gè)條件，我們就說(shuō)這兩個(gè)margin是相鄰的：
1 這兩個(gè)margin是垂直相連的，即滿足上面四種情況之一
2 margin的兩個(gè)元素都是正常流的塊級(jí)元素，并且在同一個(gè)BFC中
3 兩個(gè)margin之間沒(méi)有行盒、清除浮動(dòng)后的空隙、padding和border。

• margin折疊
  即相鄰的margin有可能會(huì)被折疊成一個(gè)。
  比如元素 #a 指定了 margin-bottom 為 10px，而它下方的元素 #b 指定了 margin-top 為 20px，

  
  
  image

元素 #a 的 margin-bottom 和元素 #b 的margin-top 在位置上重疊了，它們之間的距離是 20px，即元素 #b 的 bottom margin 長(zhǎng)度，這就是 margin 折疊現(xiàn)象。關(guān)于這個(gè)現(xiàn)象，可以這么理解：

margin 定義的是它與其他盒子之間的最小間距。其中元素 #a 指定了 margin-bottom 為 10px，就表明它下方的元素 #b 與它至少要有 10px 的距離，它指定的是一個(gè)最小值，因此實(shí)際的距離可以比這個(gè)大。

元素 #a 下方的元素 #b 也設(shè)置了 margin-top 為 20px，如果不折疊，則他們之間就有 30px 的距離。如果折疊成了一個(gè) 20px 的距離，則對(duì)元素 #a 來(lái)說(shuō)，它的 margin-bottom 要求至少要有 10px 的距離，是滿足的，而對(duì)于元素 #b 來(lái)說(shuō)，它的 margin-top 要求至少要有 20px 的距離，也是滿足的。

而 margin 折疊的存在，其實(shí)是為了可以在視覺(jué)上顯得更美觀，也更貼近設(shè)計(jì)師的預(yù)期。

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

-折疊后的Margin大小

當(dāng)兩個(gè)或者兩個(gè)以上的 margin 折疊后，margin 的值計(jì)算如下：
1 如果 margin 都是正數(shù)，則取他們當(dāng)中的最大值
2 如果 margin 中有正有負(fù)，則取最大的正數(shù)加上最小的負(fù)數(shù)（如最大的 margin是 20px，最小的 margin 是 -20px，則他們計(jì)算后的值是 0）
3 如果 margin 中都是負(fù)數(shù)，則取他們當(dāng)中的最小值

• 如何解決margin塌陷

例1：針對(duì)——>“* 兩個(gè) margin 之間沒(méi)有行盒（line box）、清除浮動(dòng)后的空隙（clearance）、padding和邊框”

如圖所示：

image

如果 #container 沒(méi)有下邊框，則 #container 的 bottom margin 和 #inner 的 bottom margin 是相鄰的，因此它們折疊了，并且 #inner 撐開(kāi)了 #container 元素，所以可以看到 #container 元素的高度變成了 10px，且顯示的是 #inner 的紅色背景
我們通過(guò)增加padding的方式來(lái)阻止Margin的折疊：

image

例2：針對(duì)——>'* margin 的兩個(gè)元素都是正常流的塊級(jí)元素，并且在同一個(gè) BFC 中''

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

image

如上圖 #container 元素和 #inner 元素同屬于一個(gè) BFC 中，#container 的 top margin 和 #inner 的 top margin 折疊，bottom margin 同理。
但如果讓 #container 跟 #innter 處在不同的 BFC 中，則 top margin 和 bottom margin 都不會(huì)折疊，如：

image

例3：針對(duì)——>"* 如果一個(gè)元素，它本身的 top margin 和 bottom margin 是相鄰的，并且有清除浮動(dòng)后的空隙（clearance），這個(gè)元素的 margin 可以跟兄弟元素的 margin 折疊，但是折疊后的 margin 不能跟父元素的 bottom margin 折疊"

image

給父元素 #container 設(shè)置了一個(gè)灰色背景，并且沒(méi)有設(shè)置高度，因此高度會(huì)隨著內(nèi)容而擴(kuò)展，margin 設(shè)置為 50px。
其中有一個(gè)紅色的浮動(dòng)元素 #floated，高寬都設(shè)置為 40px。
給 #cleared 設(shè)置了 15px 的 margin，并且元素的高度、padding、margin 都為0，因此 #cleared 元素的 top margin 和 bottom margin 是相鄰的。這個(gè)元素的位置如下圖所示：

image

因?yàn)?#cleared 元素清除了左浮動(dòng)，所以 #cleared 元素下移。
而 #cleared 元素和 #slibling 元素的 margin 折疊了，因此可以看到他們的位置是重疊的。

image

如果沒(méi)有這條規(guī)則，他們還應(yīng)該跟 #container 的 bottom margin 進(jìn)行折疊，如：

image

以上這張圖，在去掉了 #cleared 元素的 clear 屬性之后，就不滿足這條規(guī)則了，所以可以看到 #container 的高度就只有 40px，即紅色的浮動(dòng)元素的高度，而 #cleared 元素、#sibling 元素、#container 元素的 margin 都折疊成了一個(gè)。