常見布局、媒體查詢

本文轉載自查看原文 2019-12-27 21:27 1114

常見布局實現：

作者：Sweet_KK
鏈接：https://juejin.im/post/5aa252ac518825558001d5de
來源：掘金

一、水平居中

文本/行內元素/行內塊元素居中

#parent{
    text-align: center;
}

text-align 只控制行內內容（文字、行內元素、行內塊元素）如何相對於他的塊父元素對齊

優缺點

優點：簡單快捷，容易理解，兼容性非常好
缺點：只對行內內容有效；屬性會繼承影響到后代行內內容；如果子元素寬度大於父元素寬度則無效，只有后代行內內容中寬度小於設置text-align屬性的元素寬度的時候，才會水平居中

單個塊級元素

#son{
    width: 100px; /*必須定寬*/
    margin: 0 auto;
}

在margin有節余的同時如果左右margin設置auto，將會根據剩余空間自動計算分配，如果是上下margin設置auto的時候計算值為0

優缺點

優點：簡單；兼容性好
缺點：必須定寬，並且值不能為auto；寬度要小於父元素，否則無效

多個塊級元素

#parent{
    text-align: center;
}
.son{
    display: inline-block; /*改為行內或者行內塊級形式，以達到text-align對其生效*/
}

原理：text-align只控制行內內容(文字、行內元素、行內塊級元素)如何相對他的塊父元素對齊

優缺點

優點：簡單，容易理解，兼容性非常好
缺點：只對行內內容有效；屬性會繼承影響到后代行內內容；塊級改為inline-block換行、空格會產生元素間隔

使用絕對定位實現

#parent{
    height: 200px;
    width: 200px;  /*定寬*/
    position: relative;  /*父相*/
    background-color: #f00;
}
#son{
    position: absolute;  /*子絕*/
    left: 50%;  /*父元素寬度一半,這里等同於left:100px*/
    transform: translateX(-50%);  /*自身寬度一半,等同於margin-left: -50px;*/
    width: 100px;  /*定寬*/
    height: 100px;
    background-color: #00ff00;
}

原理：子絕父相，top、right、bottom、left的值是相對於父元素尺寸的，然后margin或者transform是相對於自身尺寸的，組合使用達到水平居中的目的

優缺點

優點：使用margin-left兼容性好；不管是塊級還是行內元素都可以實現
缺點：代碼較多；脫離文檔流；使用margin-left需要知道寬度值；使用transform兼容性不好（ie9+）

任意個元素(flex)

#parent{
    display: flex;
    justify-content: center;
}

原理：設置當前主軸對齊方式為居中。

優缺點：

優點：功能強大
缺點：felx的PC兼容性,Android4.0+

小結：

水平居中需要優先考慮哪些元素自帶居中效果，最先想到的當然是text-align：center了，但是只對行內有效，使用text-align需要先display：inline-block或者display-inline
然后考慮可不可以用margin：0 auto
然后考慮功能強大flex

二、垂直居中

行內元素/單行文本/行內塊元素

#parent{
    height: 150px;
    line-height: 150px;  /*與height等值*/
}

原理： line-height最終表現是通過inline box 實現的，而無論inline box所占據的高度是多少，其占據的空間都是與文字內容公用水平中垂線的

優缺點：

優點：簡單，兼容性好
缺點：只能用於單行行內內容，且高度必須已知

圖片

#parent{
    height: 150px;
    line-height: 150px;
    font-size: 0;
}
img#son{vertical-align: middle;} /*默認是基線對齊，改為middle*/

原理：張鑫旭vertical-align和line-height

缺點

優點：簡單；兼容性好
缺點：需要添加font-size: 0; 才可以完全的垂直居中；不過需要主要，html#parent包裹img之間需要有換行或空格

單個塊級元素

<!--html-->
<div id="parent">
    <div id="son"></div>
</div>

使用tabel-cell實現:

#parent{
    display: table-cell;
    vertical-align: middle;
}

原理：CSS Table，使表格內容對齊方式為middle

優缺點

優點：簡單；寬高不定；兼容性好（ie8+）
缺點：設置tabl-cell的元素，寬度和高度的值設置百分比無效，需要給它的父元素設置display: table; 才生效；table-cell不感知margin，在父元素上設置table-row等屬性，也會使其不感知height；設置float或position會對默認布局造成破壞，可以考慮為之增加一個父div定義float等屬性；內容溢出時會自動撐開父元素

使用絕對定位實現:

#parent{
    height: 150px;
    position: relative;  /*父相*/
}
#son{
    position: absolute;  /*子絕*/
    top: 50%;  /*父元素高度一半,這里等同於top:75px;*/
    transform: translateY(-50%);  /*自身高度一半,這里等同於margin-top:-25px;*/
    height: 50px;
}

原理：子絕父相

優缺點：

優點：使用margin-top兼容性好；不管是塊級還是行內元素都可以實現
缺點：代碼較多；脫離文檔流；使用margin-top需要知道高度值；使用transform兼容性不好（ie9+）

#parent{position: relative;}
#son{
    position: absolute;
    margin: auto 0;
    top: 0;
    bottom: 0;
    height: 50px;
}

原理：當top、bottom為0時,margin-top&bottom會無限延伸占滿空間並且平分

優缺點

優點：簡單;兼容性較好(ie8+)
缺點：脫離文檔流

使用flex實現:

#parent{
    display: flex;
    align-items: center;
}

或

#parent{display: flex;}
#son{align-self: center;}

或

#parent{display: flex;}
#son{margin: auto 0;}

小結：

對於垂直居中，最先想到的應該就是 line-height 了，但是這個只能用於行內內容；
其次就是考慮能不能用vertical-align: middle
然后便是絕對定位，雖然代碼多了點，但是勝在適用於不同情況；
移動端兼容性允許的情況下能用flex就用flex

三、水平垂直居中

行內/行內塊級/圖片

#parent{
    height: 150px;
    line-height: 150px;  /*行高的值與height相等*/
    text-align: center;
    font-size: 0;   /*消除幽靈空白節點的bug*/
}
#son{
    /*display: inline-block;*/  /*如果是塊級元素需改為行內或行內塊級才生效*/
    vertical-align: middle;
}

原理：text-align: center; 控制行內內容相對於塊父元素水平居中,然后就是line-height和vertical-align的基友關系使其垂直居中，font-size: 0; 是為了消除近似居中的bug

優缺點

優點：代碼簡單；兼容性好（ie8+）
缺點：只對行內內容有效；需要添加font-size: 0; 才可以完全的垂直居中；不過需要注意html中#parent包裹#son之間需要有換行或空格；熟悉line-height和vertical-align的基友關系較難

table-cell

#parent{
    height: 150px;
    width: 200px;
    display: table-cell;
    vertical-align: middle;
    /*text-align: center;*/   /*如果是行內元素就添加這個*/
}
#son{
    /*margin: 0 auto;*/    /*如果是塊級元素就添加這個*/
    width: 100px;
    height: 50px;
}

原理：CSS Table，使表格內容垂直對齊方式為middle,然后根據是行內內容還是塊級內容采取不同的方式達到水平居中

優缺點

優點：簡單方便，充分利用默認樣式
缺點：只適用於行內內容；需要清除部分默認樣式；水平垂直居中兼容性很好，但是ie下點擊會有凹陷效果！

絕對定位

#parent{
    position: relative;
}
#son{
    position: absolute;
    top: 50%;
    left: 50%;
    /*定寬高時等同於margin-left:負自身寬度一半;margin-top:負自身高度一半;*/
    transform: translate(-50%,-50%); 
}

原理：子絕父相，top、right、bottom、left的值是相對於父元素尺寸的，然后margin或者transform是相對於自身尺寸的，組合使用達到幾何上的水平垂直居中

缺點

優點：使用margin兼容性好；不管是塊級還是行內元素都可以實現
缺點：代碼較多；脫離文檔流；使用margin需要知道寬高；使用transform兼容性不好（ie9+）

絕對居中

#parent{
    position: relative;
}
#son{
    position: absolute;
    margin: auto;
    width: 100px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

原理：當top、bottom為0時,margin-top&bottom設置auto的話會無限延伸占滿空間並且平分；當left、right為0時,margin-left&right設置auto的話會無限延伸占滿空間並且平分

優缺點

優點：無需關注寬高；兼容性較好(ie8+)
缺點：代碼較多；脫離文檔流

flex

#parent{
    display: flex;
}
#son{
    margin: auto;
}

或

#parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

或

#parent{
    display: flex;
    justify-content: center;
}
#son{
    align-self: center;
}

優缺點

優點：簡單靈活；功能強大
缺點：PC端兼容性不好，移動端（Android4.0+）

視窗居中

#son{
	/*0如果去掉，則會多出滾動條並且上下都是50vh的margin。如果去掉就給body加上overflow:hidden;*/
    margin: 50vh auto 0;  
    transform: translateY(-50%);
}

原理：vh為視口單位，視口即文檔可視的部分，50vh就是視口高度的50/100，設置50vh上邊距再

優缺點

優點：簡單；容易理解；兩句代碼達到屏幕水平垂直居中
缺點：兼容性不好（ie9+，Android4.4+）

小結

一般情況下，水平垂直居中，我們最常用的就是絕對定位加負邊距了，缺點就是需要知道寬高，使用transform倒是可以不需要，但是兼容性不好（ie9+）；
其次就是絕對居中，絕對定位設置top、left、right、bottom為0，然后margin:auto; 讓瀏覽器自動平分邊距以達到水平垂直居中的目的；
如果是行內/行內塊級/圖片這些內容，可以優先考慮line-height和vertical-align 結合使用，不要忘了還有text-align ，這個方法代碼其實不多，就是理解原理有點困難，想要熟練應對各種情況還需好好研究；
移動端兼容性允許的情況下能用flex就用flex。

四、兩列布局

左列定寬,右列自適應

1、利用float+margin實現

<body>
<div id="left">左列定寬</div>
<div id="right">右列自適應</div>
</body>

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    margin-left: 100px; /*大於等於#left的寬度*/
}

2、利用float+margin(fix)實現

<body>
<div id="left">左列定寬</div>
<div id="right-fix">
    <div id="right">右列自適應</div>
</div>
</body>

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right-fix {
    float: right;
    width: 100%;
    margin-left: -100px; /*正值大於或等於#left的寬度,才能顯示在同一行*/
}
#right{
    margin-left: 100px; /*大於或等於#left的寬度*/
    background-color: #0f0;
    height: 500px;
}

3、使用float+overflow實現

<body>
<div id="left">左列定寬</div>
<div id="right">右列自適應</div>
</body>

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    overflow: hidden; /*觸發bfc達到自適應*/
}

<!--優缺點：-->

<!--優點：代碼簡單，容易理解，無需關注定寬的寬度，利用bfc達到自適應效果-->
<!--缺點：浮動脫離文檔流，需要手動清除浮動，否則會產生高度塌陷；不支持ie6-->

4、使用table實現

<div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
</div>

#parent{
    width: 100%;
    display: table;
    height: 500px;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    background-color: #0f0;
}
#left,#right{
    display: table-cell;  /*利用單元格自動分配寬度*/
}

<!--優缺點：-->

<!--優點：代碼簡單，容易理解，無需關注定寬的寬度，利用單元格自動分配達到自適應效果-->
<!--缺點：margin失效；設置間隔比較麻煩；不支持ie8--->

5、使用絕對定位實現

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

#parent{
    position: relative;  /*子絕父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f00;
    width: 100px;
    height: 500px;
}
#right {
    position: absolute;
    top: 0;
    left: 100px;  /*值大於等於#left的寬度*/
    right: 0;
    background-color: #0f0;
    height: 500px;
}

6、使用flex實現

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

#parent{
    width: 100%;
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    flex: 1; /*均分了父元素剩余空間*/
    background-color: #0f0;
}

7、使用Grid實現

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

#parent {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: 100px auto;  /*設定2列就ok了,auto換成1fr也行*/
}
#left {
    background-color: #f00;
}
#right {
    background-color: #0f0;
}

左列自適應,右列定寬

和左側定寬右側自適應同理，除了不能用上面的float+margin(fix)實現

一列不定,一列自適應

盒子寬度隨着內容增加或減少發生變化,另一個盒子自適應

1、使用float+overflow實現

<body>
<div id="parent">
    <div id="left">左列不定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

#left {
    margin-right: 10px;
    float: left;  /*只設置浮動,不設寬度*/
    height: 500px;
    background-color: #f00;
}
#right {
    overflow: hidden;  /*觸發bfc*/
    height: 500px;
    background-color: #0f0;
}

優缺點：

優點：代碼簡單，容易理解，無需關注寬度，利用bfc達到自適應效果
缺點：浮動脫離文檔流，需要手動清除浮動，否則會產生高度塌陷；不支持ie6

2、使用flex實現

<body>
<div id="parent">
    <div id="left">左列不定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

#parent{
    display: flex;
}
#left { /*不設寬度*/
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
    flex: 1;  /*均分#parent剩余的部分*/
}

3、使用Grid實現

<body>
<div id="parent">
    <div id="left">左列不定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

#parent{
    display: grid;
    grid-template-columns: auto 1fr;  /*auto和1fr換一下順序就是左列自適應,右列不定寬了*/
}
#left {
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
}

三列布局

1、兩列定寬,一列自適應

兩列定寬,一列自適應

1.1使用float+margin實現

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

#parent{
    min-width: 310px; /*100+10+200,防止寬度不夠,子元素換行*/
}
#left {
    margin-right: 10px;  /*#left和#center間隔*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center{
    float: left;
    width: 200px;
    height: 500px;
    background-color: #eeff2b;
}
#right {
    margin-left: 320px;  /*等於#left和#center的寬度之和加上間隔,多出來的就是#right和#center的間隔*/
    height: 500px;
    background-color: #0f0;
}

1.2使用float+overflow實現

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

#parent{
    min-width: 320px; /*100+10+200+20,防止寬度不夠,子元素換行*/
}
#left {
    margin-right: 10px; /*間隔*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center{
    margin-right: 10px; /*在此定義和#right的間隔*/
    float: left;
    width: 200px;
    height: 500px;
    background-color: #eeff2b;
}
#right {
    overflow: hidden;  /*觸發bfc*/
    height: 500px;
    background-color: #0f0;
}
<!--優缺點：-->

<!--優點：代碼簡單，容易理解，無需關注定寬的寬度，利用bfc達到自適應效果-->
<!--缺點：浮動脫離文檔流，需要手動清除浮動，否則會產生高度塌陷；不支持ie6-->

1.3使用table實現

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

#parent {
    width: 100%; 
    height: 520px; /*抵消上下間距10*2的高度影響*/
    margin: -10px 0;  /*抵消上下邊間距10的位置影響*/
    display: table;
    /*左右兩邊間距大了一點,子元素改用padding設置盒子間距就沒有這個問題*/
    border-spacing: 10px;  /*關鍵!!!設置間距*/
}
#left {
    display: table-cell;
    width: 100px;
    background-color: #f00;
}
#center {
    display: table-cell;
    width: 200px;
    background-color: #eeff2b;
}
#right {
    display: table-cell;
    background-color: #0f0;
}
<!--優缺點：-->

<!--優點：代碼簡單，容易理解，無需關注定寬的寬度，利用單元格自動分配達到自適應效果-->
<!--缺點：margin失效；設置間隔比較麻煩；不支持ie8--->

1.4使用flex實現

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

#parent {
    height: 500px;
    display: flex;
}
#left {
    margin-right: 10px;  /*間距*/
    width: 100px;
    background-color: #f00;
}
#center {
    margin-right: 10px;  /*間距*/
    width: 200px;
    background-color: #eeff2b;
}
#right {
    flex: 1;  /*均分#parent剩余的部分達到自適應*/
    background-color: #0f0;
}

1.5、使用Grid實現

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

#parent {
    height: 500px;
    display: grid;
    grid-template-columns: 100px 200px auto; /*設置3列,固定第一第二列的寬度,第三列auto或者1fr*/
}
#left {
    margin-right: 10px;  /*間距*/
    background-color: #f00;
}
#center {
    margin-right: 10px;  /*間距*/
    background-color: #eeff2b;
}
#right {
    background-color: #0f0;
}

2、兩側定寬,中間自適應

效果：

2.1、雙飛翼布局方法

<body>
<div id="header"></div>
<!--中間欄需要放在前面-->
<div id="parent">
    <div id="center">
        <div id="center_inbox">中間自適應</div>
        <hr>  <!--方便觀察原理-->
    </div>
    <div id="left">左列定寬</div>
    <div id="right">右列定寬</div>
</div>
<div id="footer"></div>
</body>

#header {
    height: 60px;
    background-color: #ccc;
}
#left {
    float: left;
    width: 100px;
    height: 500px;
    margin-left: -100%; /*調整#left的位置,值等於自身寬度*/
    background-color: #f00;
    opacity: 0.5;
}
#center {
    height: 500px;
    float: left;
    width: 100%;
    background-color: #eeff2b;
}
#center_inbox{
    height: 480px;
    border: 1px solid #000;
    margin: 0 220px 0 120px;  /*關鍵!!!左右邊界等於左右盒子的寬度,多出來的為盒子間隔*/
}
#right {
    float: left;
    width: 200px;
    height: 500px;
    margin-left: -200px;  /*使right到指定的位置,值等於自身寬度*/
    background-color: #0f0;
    opacity: 0.5;
}
#footer {
    clear: both;  /*注意清除浮動!!*/
    height: 60px;
    background-color: #ccc;
}

2.2、聖杯布局方法

<body>
<div id="header"></div>
<div id="parent">
    <!--#center需要放在前面-->
    <div id="center">中間自適應
        <hr>
    </div>
    <div id="left">左列定寬</div>
    <div id="right">右列定寬</div>
</div>
<div id="footer"></div>
</body>

#header{
    height: 60px;
    background-color: #ccc;
}
#parent {
    box-sizing: border-box;
    height: 500px;
    padding: 0 215px 0 115px;  /*為了使#center擺正,左右padding分別等於左右盒子的寬,可以結合左右盒子相對定位的left調整間距*/
}
#left {
    margin-left: -100%;  /*使#left上去一行*/
    position: relative;
    left: -115px;  /*相對定位調整#left的位置,正值大於或等於自身寬度*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
    opacity: 0.5;
}
#center {
    float: left;
    width: 100%;  /*由於#parent的padding,達到自適應的目的*/
    height: 500px;
    box-sizing: border-box;
    border: 1px solid #000;
    background-color: #eeff2b;
}
#right {
    position: relative;
    left: 215px; /*相對定位調整#right的位置,大於或等於自身寬度*/
    width: 200px;
    height: 500px;
    margin-left: -200px;  /*使#right上去一行*/
    float: left;
    background-color: #0f0;
    opacity: 0.5;
}
#footer{
    height: 60px;
    background-color: #ccc;
}

2.3使用Grid實現

<body>
<div id="parent">
    <div id="header"></div>
    <!--#center需要放在前面-->
    <div id="center">中間自適應
        <hr>
    </div>
    <div id="left">左列定寬</div>
    <div id="right">右列定寬</div>
    <div id="footer"></div>
</div>
</body>

#parent {
    height: 500px;
    display: grid;
    grid-template-columns: 100px auto 200px; /*設定3列*/
    grid-template-rows: 60px auto 60px; /*設定3行*/
    /*設置網格區域分布*/
    grid-template-areas: 
        "header header header" 
        "leftside main rightside" 
        "footer footer footer";
}
#header {
    grid-area: header; /*指定在哪個網格區域*/
    background-color: #ccc;
}
#left {
    grid-area: leftside;
    background-color: #f00;
    opacity: 0.5;
}
#center {
    grid-area: main; /*指定在哪個網格區域*/
    margin: 0 15px; /*設置間隔*/
    border: 1px solid #000;
    background-color: #eeff2b;
}
#right {
    grid-area: rightside; /*指定在哪個網格區域*/
    background-color: #0f0;
    opacity: 0.5;
}
#footer {
    grid-area: footer; /*指定在哪個網格區域*/
    background-color: #ccc;
}

其他的方法實現如下效果：

2.4使用table實現

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

#parent {
    width: 100%;
    height: 500px;
    display: table;
}
#left {
    display: table-cell;
    width: 100px;
    background-color: #f00;
}
#center {
    display: table-cell;
    background-color: #eeff2b;
}
#right {
    display: table-cell;
    width: 200px;
    background-color: #0f0;
}
<!--優缺點：-->

<!--優點：代碼簡潔，容易理解；-->
<!--缺點：margin失效，采用border-spacing表格兩邊的間隔無法消除；不支持ie8--->

2.5使用flex實現

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

#parent {
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#center {
    flex: 1;  /*均分#parent剩余的部分*/
    background-color: #eeff2b;
}
#right {
    width: 200px;
    background-color: #0f0;
}

2.6使用position實現

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

#parent {
    position: relative; /*子絕父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center {
    height: 500px;
    margin-left: 100px; /*大於等於#left的寬度,或者給#parent添加同樣大小的padding-left*/
    margin-right: 200px;  /*大於等於#right的寬度,或者給#parent添加同樣大小的padding-right*/
    background-color: #eeff2b;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 500px;
    background-color: #0f0;
}
<!--優缺點：-->

<!--優點：容易理解，兼容性比較好-->
<!--缺點：需手動計算寬度確定邊距；脫離文檔流；代碼繁多-->

多列布局

1、多列等寬

1.1使用float實現

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

#parent {
    height: 500px;
}
.column{
    float: left;  /*添加浮動*/
    width: 16.66666666666667%;  /*100÷列數,得出百分比*/
    height: 500px;
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

<!--優缺點：-->

<!--優點：代碼簡單，容易理解；兼容性較好-->
<!--缺點：需要手動清除浮動，否則會產生高度塌陷-->

1.2、使用table實現

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

#parent {
    width: 100%;
    height: 500px;
    display: table;
}
.column{
    display: table-cell; /*無需關注列數,單元格自動平分*/
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}
<!--優缺點：-->

<!--優點：代碼簡單，容易理解；無需關注寬度。單元格自動等分-->
<!--缺點：margin失效；設置間隔比較麻煩；不兼容ie8--->

1.3、使用flex實現

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

#parent {
    height: 500px;
    display: flex;
}
.column{
    flex: 1;  /*無需關注列數,一起平分#parent*/
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

1.4、使用Grid實現

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

#parent {
    height: 500px;
    display: grid;
    grid-template-columns: repeat(6,1fr);  /*6就是列數*/
}
.column{}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

2、九宮格布局

(1)使用table實現

<body>
<div id="parent">
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="row">
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="row">
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</div>
</body>

#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: table;
}
.row {
    display: table-row;
}
.item {
    border: 1px solid #000;
    display: table-cell;
}

(2)使用flex實現


<body>
<div id="parent">
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="row">
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="row">
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</div>
</body>

#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.row {
    display: flex;
    flex: 1;
}
.item {
    flex: 1;
    border: 1px solid #000;
}

(3)使用Grid實現

<body>
<div id="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
</body>

#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*等同於1fr 1fr 1fr,此為重復的合並寫法*/
    grid-template-rows: repeat(3, 1fr);  /*等同於1fr 1fr 1fr,此為重復的合並寫法*/
}
.item {
    border: 1px solid #000;
}

柵格系統

優缺點：

優點：代碼簡潔，容易理解；提高頁面內容的流動性，能適應多種設備；

(1)用Less生成

/*生成柵格系統*/
@media screen and (max-width: 768px){
  .generate-columns(12);     /*此處設置生成列數*/
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-xs-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}
@media screen and (min-width: 768px){
  .generate-columns(12);    /*此處設置生成列數*/
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-sm-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}
div[class^="column-xs-"]{
	float: left;
}
div[class^="column-sm-"]{
	float: left;
}

編譯后的CSS代碼:

@media screen and (max-width: 768px) {
  .column-xs-1 {  width: 8.33333333%;  }
  .column-xs-2 {  width: 16.66666667%;  }
  .column-xs-3 {  width: 25%;  }
  .column-xs-4 {  width: 33.33333333%;  }
  .column-xs-5 {  width: 41.66666667%;  }
  .column-xs-6 {  width: 50%;  }
  .column-xs-7 {  width: 58.33333333%;  }
  .column-xs-8 {  width: 66.66666667%;  }
  .column-xs-9 {  width: 75%;  }
  .column-xs-10 {  width: 83.33333333%;  }
  .column-xs-11 {  width: 91.66666667%;  }
  .column-xs-12 {  width: 100%;  }
}
@media screen and (min-width: 768px) {
  .column-sm-1 {  width: 8.33333333%;  }
  .column-sm-2 {  width: 16.66666667%;  }
  .column-sm-3 {  width: 25%;  }
  .column-sm-4 {  width: 33.33333333%;  }
  .column-sm-5 {  width: 41.66666667%;  }
  .column-sm-6 {  width: 50%;  }
  .column-sm-7 {  width: 58.33333333%;  }
  .column-sm-8 {  width: 66.66666667%;  }
  .column-sm-9 {  width: 75%;  }
  .column-sm-10 {  width: 83.33333333%;  }
  .column-sm-11 {  width: 91.66666667%;  }  
  .column-sm-12 {  width: 100%;  }
}
div[class^="column-xs-"]{
	float: left;
}
div[class^="column-sm-"]{
	float: left;
}

全屏布局

(1)使用絕對定位實現

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
</div>
</body>

html, body, #parent {height: 100%;overflow: hidden;}
#parent > div {
    border: 1px solid #000;
}
#top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
}
#left {
    position: absolute;
    top: 100px;  /*值大於等於#top的高度*/
    left: 0;
    bottom: 50px;  /*值大於等於#bottom的高度*/
    width: 200px;
}
#right {
    position: absolute;
    overflow: auto;
    left: 200px;  /*值大於等於#left的寬度*/
    right: 0;
    top: 100px;  /*值大於等於#top的高度*/
    bottom: 50px;  /*值大於等於#bottom的高度*/
}
#bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
}

優缺點：

優點：容易理解
缺點：代碼繁多；需要計算好各個盒子的寬高；

(2)使用flex實現

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="middle">
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
    <div id="bottom">bottom</div>
</div>
</body>

*{
    margin: 0;
    padding: 0;
}
html,body,#parent{
    height:100%;
}
#parent {
    display: flex;
    flex-direction: column;
}
#top {
    height: 100px;
}
#bottom {
    height: 50px;
}
#middle {
    flex: 1;
    display: flex;
}
#left {
    width: 200px;
}
#right {
    flex: 1;
    overflow: auto;
}

(3)使用Grid實現

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
</div>
</body>

*{
    margin: 0;
    padding: 0;
}
html, body, #parent {
    height: 100%;
}
#parent {
    width: 100%;
    height: 100%;
    display: grid;
    /*分成2列,第一列寬度200px,第二列1fr平分剩余的部分,此處換成auto也行*/
    grid-template-columns: 200px 1fr;  
    /*分成3行,第一行高度100px,第二行auto為自適應,此處換成1fr也行,第3行高度為50px*/
    grid-template-rows: 100px auto 50px; 
    /*定義網格區域分布*/
    grid-template-areas:
        "header header"
        "aside main"
        "footer footer";
}
#parent>div{
    border: 1px solid #000;
}
#top{
    grid-area: header;  /*指定在哪個網格區域*/
}
#left{
    grid-area: aside;  /*指定在哪個網格區域*/
}
#right{
    grid-area: main;  /*指定在哪個網格區域*/
}
#bottom{
    grid-area: footer;  /*指定在哪個網格區域*/
}

媒體查詢

[I]. 定義和規范

1.1 CSS2中的媒體查詢

在CSS2中，媒體查詢只使用於<style>和 <link>標簽中，以media屬性存在；media屬性用於為不同的媒介類型規定不同的樣式，而真正廣泛使用的媒介類型是'screen'、'print'和'all'

all            適合所有設備
screen         計算機屏幕（默認值） 
print          打印預覽模式 / 打印頁   
tty            電傳打字機以及使用等寬字符網格的類似媒介
tv             電視類型設備（低分辨率、有限的屏幕翻滾能力）
projection     放映機
handheld       手持設備（小屏幕、有限的帶寬）
braille        盲人用點字法反饋設備
aural          語音合成器

<style media="screen,tv">
.box{
    height: 100px;
    width: 100px; 
    background-color: lightblue;
}    
</style>
<div class="box"></div>

1.2 CSS3中的媒體查詢

在Media Queries Level 3規范中，媒體查詢的能力被擴展，除了設備的類型，我們可以還獲取到諸如窗口寬度、屏幕方向或分辨率等媒體特性(media features)：

width – 輸出設備渲染區域（如可視區域的寬度或打印機紙盒的寬度）的寬度
height – 輸出設備渲染區域（如可視區域的高度或打印機紙盒的高度）的高度
device-width – 輸出設備的寬度（整個屏幕或頁的高度，而不是僅是渲染區域）
device-height – 輸出設備的高度（整個屏幕或頁的高度，而不是僅是渲染區域）
orientation – 設備處於橫屏（寬度大於高度）模式還是豎屏（高度大於寬度）模式
aspect-ratio – 輸出設備目標顯示區域的寬高比
device-aspect-ratio – 輸出設備的寬高比
resolution – 輸出設備的分辨率（像素密度）
color – 檢查設備支持多少種顏色等
color-index – 輸出設備中顏色查詢表中的條目數量
monochrome – 指定了一個黑白（灰度）設備每個像素的比特數
scan – 檢查電視輸出設備是順序掃描還是隔行掃描
grid – 判斷輸出設備是網格設備還是位圖設備

1.3Media Queries Level 4規范中新的媒體特性

幾個有代表性的如：

update – 根據設備的更新頻度區分其類型 (none 如打印機, slow 如電子墨水, fast 正常設備)
scripting – none 不支持腳本或未啟用 | initial-only 僅支持頁面初始化腳本 | enabled 支持腳本並且已啟用
pointer – 設備交互的精度 (coarse不精確如手指, fine 精確如鼠標, none 無指點)
hover – 設備是否支持懸停狀態

[II]. 使用形式

2.1 基本語法

媒體查詢最基本的形式，就是單獨或組合使用媒體類型和媒體特性(后者要置於括號中)，如：

@media screen {
    body {
        font-size: 20px;
    }
}

@media screen, print {
    body {
        font-size: 20px;
    }
}

@media (width: 30em) {
    nav li {
        display: block;
    }
}

@media screen and (width: 30em) {
    nav li {
        display: block;
    }
}

2.2 嵌套

/*例子1:媒體類型套媒體特性*/
@media screen {
    @media (min-width: 20em) {
        img {
            display: block;
            width: 100%;
            height: auto;
        }
    }
    @media (min-width: 40em) {
        img {
            display: inline-block;
            max-width: 300px;
        }
    } 
}

/*例子2:媒體特性多層嵌套*/
@media (hover: on-demand) {
    @media (pointer: coarse) {
        input[type=checkbox] ~ label {
            padding: .5em;
        }
    }
    @media (pointer: fine) {
        input[type=checkbox] ~ label {
            padding: .1em;
        }
    }
}

2.3 否定式查詢

可以用關鍵字not表示一個否定查詢； not必須置於查詢的一開頭並會對整條查詢串生效，除非逗號分割的多條

@media not print {
    body {
        background: url('paisley.png');
    }
}

/*否定`print and (min-resolution: 1.5dppx)`這一整個條件*/
@media not print and (min-resolution: 1.5dppx) {
    .external {
        background: url('arrow-lowres.png');
    }
}

/* not A 或 not B */
@media not (hover: hover), not (pointer: coarse) {
    font-size: 20px;
}

/*非法：not不在最前面*/
@media not print and not (min-resolution: 2dppx) {
}

/*非法：not不在最前面*/
@media screen and not (min-resolution: 2dppx) {
}

[III]. 媒體特性

3.1 根據媒體特性的范圍查詢

指定一個固定的寬度通常是沒有意義的，更多的情況下，我們需要限定的是類似“小於等於”或“大於等於”這樣的范圍，而大多數媒體特性可以通過添加“max-”和“min-”前綴達到上述目的

/*0 至 30em*/
@media (max-width: 30em) {
    nav li {
        display: block;
    }
}

/*30em 至 100em*/
@media (min-width: 30em) and (max-width: 100em)  {
    nav li {
        display: block;
    }
}

支持范圍選擇的特性	取值類型
aspect-ratio	諸如 1024/768 或 16:9
device-aspect-ratio	諸如 1024/768 或 16:9
color	整數
color-index	整數
width	合法寬度
height	合法高度
device-width	合法寬度
device-height	合法高度
monochrome	整數
resolution	分辨率單位(dpi, dpcm, dppx)

3.2 選項式的媒體特性查詢

不同於取值連續的范圍式查詢，很多媒體特性只有幾個固定的取值可供選擇

@media screen and (orientation: portrait) {
    #logo {
        height: 10vh;
        width: auto;
    }
}

選項式的媒體特性	取值選項	備注
grid	布爾值(使用時直接寫成 (grid) 來判斷)	是網格設備還是位圖設備
hover	none, on-demand, hover	是否支持懸停狀態
orientation	portrait, landscape	設備方向
light-level	dim, normal, washed	環境光
pointer	none, coarse, fine	設備交互的精度
scripting	none, initial-only, enabled	是否支持腳本
update	none, slow, normal	根據設備的更新頻度區分其類型
scan	interlace, progressive	電視輸出設備是順序掃描還是隔行掃描
any-hover	none, on-demand, hover	can be used to check whether any available input mechanism allows the user to hover over elements
any-pointer	none, coarse, fine	Presence and accuracy of any pointing device available to the user
inverted-colors	none, inverted	useragent或OS是否倒置了顏色
overflow-block	none, scroll, optional-paged, paged	在block軸方向，當內容超出初始包含塊或視口時，設備或瀏覽器的行為
overflow-inline	none, scroll	在inline軸方向，當內容超出初始包含塊或視口時，設備或瀏覽器的行為

@media screen and (hover: on-demand) {
    input[type=checkbox] + label {
        padding: .5em;
    }
}

@media screen and (hover: none) and (pointer: coarse) {
    input[type=checkbox] + label {
        padding: .5em;
    }
}

[IV]. 其他

4.1 針對高分屏的媒體查詢

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina屏幕下的樣式 */
}

4.2 引入外部文件時的媒體查詢

@import url(typography.css) screen, print;

@import url(hi-res-icons.css) (min-resolution: 1.5dppx), (min-resolution: 96dpi);
<!--即使媒體查詢不符，樣式文件總會被下載-->
<link rel="stylesheet" href="styles.css" 
    type="text/css" media="screen and (max-width: 480px)">

4.3 在style標簽上的媒體查詢

<style type="text/css" media="screen and (max-width: 480px)">
    body {
        font-size: 20px;
    }
</style>

4.4 利用媒體查詢實現圖片自適應

<picture>
    <source srcset="large.jpg" media="(min-width: 1024px)">
    <source srcset="medium.jpg" media="(min-width: 680px)">
    
    <!-- fallback -->
    <img src="small.jpg" alt="">
</picture>

看上去很簡單，但在實際應用中，考慮到各種情況，可能會是這樣:

<picture>
  <source src="large.jpg"
          media="( (min-device-pixel-ratio: 1.5) and (min-width: 20.001em) and (max-width: 35.999em) ) or
                 ( (max-device-pixel-ratio: 1.5) and (min-width: 120.001em) ) or
                 ( (min-device-pixel-ratio: 1.5) and (min-width: 60.001em) )" />
  <source src="medium.jpg"
          media="( (max-device-pixel-ratio: 1.5) and (min-width: 20.001em) and (max-width: 35.999em) ) or
                 ( (max-device-pixel-ratio: 1.5) and (min-width: 60.001em) ) or
                 ( (min-device-pixel-ratio: 1.5) and (min-width: 10.001em) )" />
  <source src="small.jpg" />

  <!-- fallback -->
  <img src="small.jpg" alt="" />
</picture>

4.5 擴展閱讀：用srcset和sizes實現更好的圖片自適應

對於固定寬度(不同設備的設計稿上尺寸相同)的圖像：
- srcset屬性列出了瀏覽器可以選擇加載的源圖像池，是一個由逗號分隔的列表。
- x描述符表示圖像的設備像素比
- 瀏覽器根據運行環境，利用這些信息來選擇適當的圖像
- 不理解srcset的瀏覽器會直接加載src屬性中聲明的圖像

<img src="pic-255.jpg" alt="pic"
    srcset="pic-383.jpg 1.5x, pic-510.jpg 2x" />

可變寬度(根據設備有不同顯示策略)的圖像：基於viewport選擇
- w描述符告訴瀏覽器列表中的每個圖象的寬度
- 如果srcset中任何圖像使用了w描述符，那么必須要設置sizes屬性
- sizes屬性有兩個值：第一個是媒體條件；第二個是源圖尺寸值
- 源圖尺寸值不能使用百分比
- 瀏覽器利用srcset和sizes信息來自動選擇最符合規定條件的圖像
- 無法確定究竟顯示哪張圖像，因為每個瀏覽器挑選適當圖像的算法有差異

4.6 擴展閱讀：用 image-set() 設置響應式的背景圖片

body {
    /*
    為普通屏幕使用 pic-1.jpg，
    為高分屏使用 pic-2.jpg，
    如果更高的分辨率則使用 pic-3.jpg，比如印刷
    */
    background-image:
        image-set(
            url(../images/pic-1.jpg) 1x,
            url(../images/pic-2.jpg) 2x,
            url(../images/pic-3.jpg) 600dpi
        );
}

4.7 在Javascript中使用媒體查詢

全局方法 matchMedia()，其唯一參數為一個合法的媒體查詢字符串

var isWideScreen = matchMedia("(min-width: 960px)"); 
console.log(isWideScreen.matches); //是否匹配 true | false
console.log(isWideScreen.media); //"(min-width: 960px)"

以下情況下 matches 屬性會返回 false：

[ ] 媒體查詢條件不匹配
[ ] 媒體查詢字符串語法錯誤
[ ] 瀏覽器不支持該查詢特性
監聽媒體的更改

function toggleClass(mq) {
    if (mq.matches) {
        document.body.classList.add('widescreen');
    } else {
        document.body.classList.remove('widescreen');
    }
}
//添加監聽
isWideScreen.addListener( toggleClass );
//撤銷監聽
isWideScreen.removeListener( toggleClass );

深度思考

一、響應式的優點和缺點？？

響應式的優點

響應式設計可以向用戶提供友好的Web界面，同樣的布局，卻可以在不同的設備上有不同排版，這就是響應式最大的優點，現在技術發展日新月異，每天都會有新款智能手機推出。如果你擁有響應式Web設計，用戶可以與網站一直保持聯系，而這也是基本的也是響應式實現的初衷。
響應式在開發維護和運營上，相對多個版本成本會降低很多。也無須花大量的時間在網站的維護上
方便改動，響應式設計是針對頁面的，可以只對必要的頁面進行改動，其他頁面不受影響。

響應式的缺點

為了適配不同的設備，響應式設計需要大量專門為不同設備打造的css及js代碼,這導致了文件增大，影響了頁面加載速度。
在響應式設計中，圖片、視頻等資源一般是統一加載的，這就導致在低分辨率的機子上，實際加載了大於它的顯示要求的圖片或視頻，導致不必要的流量浪費，影響加載速度；
局限性，響應式不適合一些大型的門戶網或者電商網站，一般門戶網或電商網站一個界面內容較多，對設計樣式不好控制，代碼過多會影響運行速度。

二、幾種常見的瀏覽器內核

內核，就是常駐內存、能夠快速響應的那一部分核心代碼，非內核代碼都是要用到時再調入內存並執行的。webkit內核更小巧快速，但兼容性不如IE內核。所以有些瀏覽器是用的雙內核，可以在高速模式和兼容模式間切換

一、Trident內核代表產品Internet Explorer，又稱其為IE內核。

Trident（又稱為MSHTML），是微軟開發的一種排版引擎。使用Trident渲染引擎的瀏覽器包括：IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

二、Gecko內核代表作品Mozilla

FirefoxGecko是一套開放源代碼的、以C++編寫的網頁排版引擎。Gecko是最流行的排版引擎之一，僅次於Trident。使用它的最著名瀏覽器有Firefox、Netscape6至9。

三、WebKit內核代表作品Safari、Chromewebkit

是一個開源項目，包含了來自KDE項目和蘋果公司的一些組件，主要用於Mac OS系統，它的特點在於源碼結構清晰、渲染速度極快。缺點是對網頁代碼的兼容性不高，導致一些編寫不標准的網頁無法正常顯示。主要代表作品有Safari和Google的瀏覽器Chrome。

四、Presto內核代表作品OperaPresto

是由Opera Software開發的瀏覽器排版引擎，供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動態功能，例如網頁或其部分可隨着DOM及Script語法的事件而重新排版。

div+css布局較table布局有哪些優點？

使用table布局的特點

優點:

1、對於新手而言，容易上手，尤其對於一些布局中規中矩的網頁，更讓人首先想到excel，進而通過使用table去實現它。

2、表現上更加“嚴謹”，在不同瀏覽器中都能得到很好的兼容

3、通過復雜的表格套表格的形式，也可以實現比較復雜的布局需求。布置好表格，然后將內容放進去就可以了。

4、它可以不用顧及垂直居中的問題。

5、數據化的存放更合理。

缺點:

1、標簽結構多，復雜，在表格布局中，主要是用到表格的相互嵌套使用，這樣就會造成代碼的復雜度更高！

2、表格布局，不利於搜索引擎抓取信息，直接影響到網站的排名

使用div+css布局的特點

優點

1、符合W3C標准的，W3C標准提出網頁由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。結構清晰明了，結構、樣式和行為分離，帶來足夠好的可維護性。

2、布局更加靈活多樣，能夠通過樣式選擇來實現界面設計方面的更多要求。

3、布局改版方便，不需要過多地變動頁面內容，通常只要更換相應的css樣式就可以將網頁變成另外一種風格展現出來。

4、布局可以讓一些重要的鏈接和文字信息等優先讓搜索引擎抓取，內容更便於搜索。

5、增加網頁打開速度，增強用戶體驗。

缺點

1、開發技術高，要考慮兼容版本瀏覽器。目前來看，DIV+CSS還沒有實現所有瀏覽器的統一兼容。

2、CSS網站制作的設計元素通常放在1個外部文件中，或幾個文件，

有可能相當復雜，甚至比較龐大，如果CSS文件調用出現異常，那么整個網站將變得慘不忍睹。

三、用CSS寫一個簡單的幻燈片效果頁面

CSS3屬性中有關於制作動畫的三個屬性：Transform,Transition,Animation。

transform屬性向元素應用2D或3D轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

transition是令一個或多個可以用數值表示的css屬性值發生變化時產生過渡效果。

Animation字面上的意思，就是“動畫”的意思，

@keyframes規則。

Keyframes具有其自己的語法規則，他的命名是由"@keyframes"開頭，后面緊接着是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。

對於一個"@keyframes"中的樣式規則是由多個百分比構成的，如“0%”到"100%"之間，我們可以在這個規則中創建多個百分比，我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動，改變元素顏色，位置，大小，形狀等，

不過有一點需要注意的是，我們可以使用“fromt”“to”來代表一個動畫是從哪開始，到哪結束，也就是說這個"from"就相當於"0%"而"to"相當於"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號省略。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>純css幻燈片</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            margin: auto;
            padding: 0;
        }

        div {
            margin-top: 100px;
            width: 100px;
            border: solid 1px #ccc;
            overflow: hidden;
        }

        ul {
            float: left;
            display: flex;
        }

        ul li {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            list-style: none;
            animation: slide 5s ease 0s infinite normal both;
        }

        /*停頓(開始)>左移>停頓>左移>歸零(結束)  此為三張圖片  多一張圖片加一個停頓+左移*/
        @keyframes slide {
            0% {
                transform: translateX(0%);
            }

            16.7% {
                transform: translateX(0%);
            }

            33.3% {
                transform: translateX(-100%);
            }

            50% {
                transform: translateX(-100%);
            }

            66.7% {
                transform: translateX(-200%);
            }

            83.3% {
                transform: translateX(-200%);
            }

            100% {
                transform: translateX(0%);
            }
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>

</html>

Bootstrap響應式布局原理

Bootstrap響應式布局是利用其柵格系統，對於不同的屏幕采用不同的類屬性。Bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為做多12列。

Bootstrap采取12列的柵格體系，根據主流設備的尺寸進行分段，每段寬度固定，通過百分比和媒體查詢實現響應式布局。

柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局。

柵格系統的工作原理：

行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中，以便為其賦予合適的排列（aligment
）和內補（padding）。
通過行（row）在水平方向創建一組列（column）。
自己內容應當放置於列（column）內，並且，只有列可以作為行（row）的直接子元素。
類似.row和.col-xs-4這種預定義的類，可以用來快速創建柵格布局。Bootstrap源碼中定義的mixin也可以用來創建語義化布局。
通過為列設置padding屬性，從而創建列與列之間的間隔（gutter）。通過為.row元素設置負值margin從而抵消為.container元素設置的padding，也就間接為行（row）所包含的列（column）抵消掉了padding。
柵格系統的列是通過指定1到12的值來表示其跨越范圍。例如三個等寬的列可以使用三個.col-xs-4來創建。
如果一行（row）中包含了的列（column）大於12，多余的列所在的元素將作為一個整體另起一行排列。
柵格類適用於與屏幕寬度大於或等於分界點大小的設備，並且針對小屏幕覆蓋柵格類。

為什么對於大屏設備，container的寬度要設計為1170px。既然是12列柵格，設計成1200px不是顯得更規整、也更容易向產品和UI解釋嗎？

bootstrap為了避免內容占滿屏幕，確保在1200px寬的設備兩邊留出一定的邊距，因此將container的最大寬度設為1170px，並使用margin-left:auto和margin-right:auto將container居中，從而確保兩邊各留出15px的邊距。所有列寬均設置為百分比，根本不考慮具體數值。

Bootstrap的柵格系統是一個三層結構，除了外圍的container和內部的column，中間還有一個夾層row，並且Bootstrap要求所有的column必須包含在row里面，這是為什么呢？

Bootstrap將所有元素的盒模型設置為了border-box
因此container寬度為1170px，減去左右共30px的padding，於是container的內容寬度就只剩1140px，這下所有col柵格的百分比乘的都是1140而不是1170，為解決此問題，Bootstrap在container中新增了一個夾層row，通過使用負的margin增加row的寬度至1170px。這里用到了盒模型尺寸的計算原理：塊元素左右外邊距、左右border、左右內邊距和width這七個值之和必須等於包含塊的content width。row的包含塊container的content width為1140px，因此對於row而言，就存在如下等量關系：

　　-15px+0+0+width+0+0+（-15px）= 1140

　　於是row的width就自動擴展到1170px了。
　　

既然container左右兩邊都有15px的外邊距了，為什么還要設計15px的內邊距？如果沒有這個內邊距，不就不需要額外添一個夾層row了嗎？

因為柵格之間需要間隔，因此每個column柵格都設置了15px的padding：

這意味着每個column實際上也可以看成一個container！我們可以在任意一個column內再嵌套一個柵格系統，而無需再添加container，只需添加一個row即可，不要將row理解成“行”，它就是一個包含塊而已。這樣的三層結構使得Bootstrap成為了一個可以無限嵌套的響應式系統，每一個柵格都可以看做一個獨立的系統，container只不過是那個最大的柵格而已。

另外，Bootstrap柵格系統預設的數值，如列數、槽寬以及媒體查詢閾值都是可以修改的。

列排序與列偏移

　　Bootstrap將所有列的position都設成了relative，就在於可對列進行定位或排序，比如要將某一個列定位到12分之3處（即從第三、四列交界處開始），可以設置left:25%或者right:75%。Bootstrap已經預設好了相應的類名：

col-xs-pull-3  ===  right: 25%
col-sx-push-3    ===  left: 25%

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 媒體查詢和rem布局媒體查詢用法及常見媒體尺寸響應式布局-媒體查詢媒體查詢及響應式布局媒體查詢響應式布局 CSS3 媒體查詢@media 查詢（響應式布局） html5 響應式布局（媒體查詢）利用媒體查詢實現響應式布局媒體查詢（pc端，移動端不同布局） CSS：使用CSS媒體查詢創建響應式布局

常見布局、媒體查詢

常見布局實現：

一、水平居中

文本/行內元素/行內塊元素居中

單個塊級元素

多個塊級元素

使用絕對定位實現

任意個元素(flex)

小結：

二、垂直居中

行內元素/單行文本/行內塊元素

圖片

單個塊級元素

使用tabel-cell實現:

使用絕對定位實現:

使用flex實現:

小結：

三、水平垂直居中

行內/行內塊級/圖片

table-cell

絕對定位

絕對居中

flex

視窗居中

小結

四、兩列布局

左列定寬,右列自適應

1、利用float+margin實現

2、利用float+margin(fix)實現

3、使用float+overflow實現

4、使用table實現

5、使用絕對定位實現

6、使用flex實現

7、使用Grid實現

左列自適應,右列定寬

一列不定,一列自適應

1、使用float+overflow實現

2、使用flex實現

3、使用Grid實現

三列布局

1、 兩列定寬,一列自適應

1.1使用float+margin實現

1.2使用float+overflow實現

1.3使用table實現

1.4使用flex實現

1.5、使用Grid實現

2、兩側定寬,中間自適應

2.1、雙飛翼布局方法

2.2、聖杯布局方法

2.3使用Grid實現

2.4使用table實現

2.5使用flex實現

2.6使用position實現

多列布局

1、多列等寬

1.1使用float實現

1.2、使用table實現

1.3、使用flex實現

1.4、使用Grid實現

2、九宮格布局

(1)使用table實現

(2)使用flex實現

(3)使用Grid實現

柵格系統

(1)用Less生成

全屏布局

(1)使用絕對定位實現

(2)使用flex實現

(3)使用Grid實現

媒體查詢

[I]. 定義和規范

1.1 CSS2中的媒體查詢

1.2 CSS3中的媒體查詢

1.3Media Queries Level 4規范中新的媒體特性

[II]. 使用形式

2.1 基本語法

2.2 嵌套

2.3 否定式查詢

[III]. 媒體特性

3.1 根據媒體特性的范圍查詢

1、兩列定寬,一列自適應