摘要：誤區(qū)注意只是動態(tài)分配父元素的剩余空間，而不是整個父元素的空間。默認(rèn)值如果項目未設(shè)置高度或設(shè)為，將占滿整個容器的高度。負(fù)值對該屬性無效。高像素密度設(shè)備相應(yīng)放大，像素密度設(shè)備相應(yīng)縮小。

css3新單位vw、vh、vmin、vmax

vh: 相對于視窗的高度, 視窗被均分為100單位的vh;
vw: 相對于視窗的寬度, 視窗被均分為100單位的vw;

vmax: 相對于視窗的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax;
vmin: 相對于視窗的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin;
視區(qū)所指為瀏覽器內(nèi)部的可視區(qū)域大小，
即window.innerWidth/window.innerHeight大小，不包含任務(wù)欄標(biāo)題欄以及底部工具欄的瀏覽器區(qū)域大小。

css3中calc動態(tài)計算元素長度

calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動態(tài)值。

注意點：

• 用于動態(tài)計算長度值。
• 需要注意的是，運(yùn)算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
• 任何長度值都可以使用calc()函數(shù)進(jìn)行計算；
• calc()函數(shù)支持 “+”, “-“, “*”, “/” 運(yùn)算；
• calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級規(guī)則；

例如：

calc(100vh - 10px)  表示整個瀏覽器窗口高度減去10px的大小
calc(100vw - 10px)   表示整個瀏覽器窗口寬度減去10px的大小

一般用來設(shè)置流式布局寬高，當(dāng)然，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動態(tài)值

詳細(xì)了解可參考：《CSS3 calc實現(xiàn)滾動條出現(xiàn)頁面不跳動》。

css3布局：box-flex（伸縮盒最老版本）

設(shè)置或檢索伸縮盒對象的子元素如何分配其剩余空間。

<ul id="box">
    <li>ali>
    <li>bli>
    <li>cli>
ul>

CSS:

#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}
#box li:nth-child(1){box-flex:1;}
#box li:nth-child(2){box-flex:1;}
#box li:nth-child(3){box-flex:2;}

誤區(qū)：注意box-flex只是動態(tài)分配父元素的剩余空間，而不是整個父元素的空間。

詳細(xì)可參考《CSS3布局之box-flex的使用》

css3布局：flex

Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。

任何一個容器都可以指定為Flex布局。

例如：讓一個box盒子中的兩個p元素在box中平分寬度，并且垂直居中。如下代碼：

<div class="box">
    <p>這是一段內(nèi)容1p>
    <p>這是一段內(nèi)容2p>
div>

css：

*{margin:0;padding:0;}
.box{
    background: #ccc;
    width:300px;
    height:200px;
    margin:30px auto;
    display: flex;
    align-items: center; /*在交叉軸上對齊方式-垂直居中*/
    justify-content: center;/*主軸上的對齊方式-水平居中*/
}
.box p{
    flex:1;
}
.box p:nth-child(1){background: red}
.box p:nth-child(2){background: blue}

效果如圖：

再看一個常用的例子：移動端使用flex讓內(nèi)容平均分配

<nav>
  <a href="#">aa>
  <a href="#">ba>
  <a href="#">ca>
nav>

css代碼：

nav{display:-webkit-flex;display:flex;}
a{-webkit-flex:1;flex:1;}

容器的屬性：

1.flex-direction： 決定主軸的方向（即項目的排列方向）

• row（默認(rèn)值）：主軸為水平方向，起點在左端。
• row-reverse：主軸為水平方向，起點在右端。
• column：主軸為垂直方向，起點在上沿。
• column-reverse：主軸為垂直方向，起點在下沿。

2.flex-wrap：默認(rèn)情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

• nowrap（默認(rèn)）：不換行。
• wrap：換行，第一行在上方。
• wrap-reverse：換行，第一行在下方。

3.flex-flow：flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。

.box {
  flex-flow:  || ;
}

4.justify-content：定義了項目在主軸上的對齊方式。

可能取5個值，具體對齊方式與軸的方向有關(guān)。下面假設(shè)主軸為從左到右。

• flex-start（默認(rèn)值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

5.align-items：定義項目在交叉軸上如何對齊。

它可能取5個值。具體的對齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下。

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。

6.align-content：定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

• flex-start：與交叉軸的起點對齊。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊。
• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
• space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（默認(rèn)值）：軸線占滿整個交叉軸。

 項目的屬性：

以下6個屬性設(shè)置在項目上。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1.order屬性

order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。

.item {
  order: ;
}

2.flex-grow屬性

flex-grow屬性定義項目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

.item {
  flex-grow: ; /* default 0 */
}

如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍。

3.flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默認(rèn)為1，即如果空間不足，該項目將縮小。

.item {
  flex-shrink: ; /* default 1 */
}

如果所有項目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

負(fù)值對該屬性無效。

4.flex-basis屬性

flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。

.item {
  flex-basis:  | auto; /* default auto */
}

它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項目將占據(jù)固定空間。

5.flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個屬性可選。

.item {
  flex: none | [  ? ||  ]
}

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優(yōu)先使用這個屬性，而不是多帶帶寫三個分離的屬性，因為瀏覽器會推算相關(guān)值。

6.align-self屬性

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。

詳細(xì)參考：《Flex 布局語法教程》

css3多列布局：columns

columns語法：columns：[ column-width ] || [ column-count ]

其中：[ column-width ]：設(shè)置或檢索對象每列的寬度；[ column-count ]：設(shè)置或檢索對象的列數(shù)。

<h1>列數(shù)及列寬固定:h1>
<div class="test">
    <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. p>
    <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.p>
div>
<h1>列寬固定，根據(jù)容器寬度液態(tài)分布列數(shù):h1>
<div class="test2">
    <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. p>
    <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.p>
div>

CSS：

body{font:14px/1.5 georgia,serif,sans-serif;}
p{margin:0;padding:5px 10px;background:#eee;}
h1{margin:10px 0;font-size:16px;}
.test{
    width:628px;
    border:10px solid #000;
    -moz-columns:200px 3;
    -webkit-columns:200px 3;
    columns:200px 3;
}
.test2{
    border:10px solid #000;
    -moz-columns:200px;
    -webkit-columns:200px;
    columns:200px;
}

結(jié)果如圖所示：

以下列出column運(yùn)用的常用相關(guān)屬性：

1.column-width： | auto 設(shè)置或檢索對象每列的寬度
如：-moz-column-width:200px;

2.column-count： | auto 設(shè)置或檢索對象的列數(shù)
如：-webkit-column-count:3;

3.column-gap： | normal 設(shè)置或檢索對象的列與列之間的間隙
如：column-gap:normal;column-gap:40px;

4.column-rule：[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]設(shè)置或檢索對象的列與列之間的邊框。復(fù)合屬性。相當(dāng)于border屬性
如：column-rule:10px solid #090;

5.column-span：none | all 設(shè)置或檢索對象元素是否橫跨所有列。
如：column-span:all;

 詳細(xì)參考：《CSS3布局之多列布局columns詳解》

CSS相關(guān)題目

<div class="red blue">123div>
<div class="blue red">123div>

CSS:

.red {
    color: red
}

.blue {
    color: blue
}

結(jié)果為什么：
答案：結(jié)果兩個div的顏色值顯示都為blue

標(biāo)準(zhǔn)W3C盒子模型和IE盒子模型

CSS盒子模型組成：外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、內(nèi)容（content）。

CSS盒子模型分為：標(biāo)準(zhǔn)W3C盒子模型，IE盒子模型，注意在兩種模型中寬（width）和高（height）包括屬性的不同。

W3C模型中：

• CSS中的寬（width）=內(nèi)容（content）的寬
• CSS中的高（height）=內(nèi)容（content）的高

IE盒子模型：

• CSS中的寬（width）=內(nèi)容（content）的寬+（border+padding）*2
• CSS中的高（height）=內(nèi)容（content）的高+（border+padding）*2

 移動端安卓低版本設(shè)置target-densitydpi

target-densitydpi 這個私有屬性，它表示目標(biāo)設(shè)備的密度等級，作用是決定css中的1px代表多少物理像素

target-densitydpi 值可以為一個數(shù)值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個

• device-dpi –使用設(shè)備原本的 dpi 作為目標(biāo) dp。 不會發(fā)生默認(rèn)縮放。
• high-dpi – 使用hdpi 作為目標(biāo) dpi。 中等像素密度和低像素密度設(shè)備相應(yīng)縮小。
• medium-dpi – 使用mdpi作為目標(biāo) dpi。 高像素密度設(shè)備相應(yīng)放大， 像素密度設(shè)備相應(yīng)縮小。 這是默認(rèn)的target density.
• low-dpi -使用mdpi作為目標(biāo) dpi。中等像素密度和高像素密度設(shè)備相應(yīng)放大。

特別說明的是，當(dāng) target-densitydpi=device-dpi 時， css中的1px會等于物理像素中的1px。因為這個屬性只有安卓支持，并且安卓已經(jīng)決定要廢棄 target-densitydpi 這個屬性了，盡量避免使用這個屬性。

 邏輯像素大?。╠evice-width）

device-width的計算公式：設(shè)備的物理分辨率/(devicePixelRatio * scale)，在scale為1的情況下，device-width = 設(shè)備的物理分辨率/devicePixelRatio 。

devicePixelRatio稱為設(shè)備像素比，每款設(shè)備的devicePixelRatio都是已知，并且不變的，目前高清屏，普遍都是2，不過還有更高的，比如2.5, 3 等，魅族note的手機(jī)的devicePixelRatio就是3。