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

css3新單位vw、vh、vmin、vmax

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

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

css3中calc動(dòng)態(tài)計(jì)算元素長(zhǎng)度

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

注意點(diǎn)：

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

例如：

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

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

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

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

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

<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只是動(dòng)態(tài)分配父元素的剩余空間，而不是整個(gè)父元素的空間。

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

css3布局：flex

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

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

例如：讓一個(gè)box盒子中的兩個(gè)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; /*在交叉軸上對(duì)齊方式-垂直居中*/
    justify-content: center;/*主軸上的對(duì)齊方式-水平居中*/
}
.box p{
    flex:1;
}
.box p:nth-child(1){background: red}
.box p:nth-child(2){background: blue}

效果如圖：

再看一個(gè)常用的例子：移動(dòng)端使用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： 決定主軸的方向（即項(xiàng)目的排列方向）

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

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

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

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

.box {
  flex-flow:  || ;
}

4.justify-content：定義了項(xiàng)目在主軸上的對(duì)齊方式。

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

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

5.align-items：定義項(xiàng)目在交叉軸上如何對(duì)齊。

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

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

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

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

 項(xiàng)目的屬性：

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

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

1.order屬性

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

.item {
  order: ;
}

2.flex-grow屬性

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

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

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

3.flex-shrink屬性

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

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

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

負(fù)值對(duì)該屬性無(wú)效。

4.flex-basis屬性

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

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

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

5.flex屬性

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

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

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

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

6.align-self屬性

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

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

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

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

css3多列布局：columns

columns語(yǔ)法：columns：[ column-width ] || [ column-count ]

其中：[ column-width ]：設(shè)置或檢索對(duì)象每列的寬度；[ column-count ]：設(shè)置或檢索對(duì)象的列數(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è)置或檢索對(duì)象每列的寬度
如：-moz-column-width:200px;

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

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

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

5.column-span：none | all 設(shè)置或檢索對(duì)象元素是否橫跨所有列。
如：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é)果兩個(gè)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

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

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

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

• device-dpi –使用設(shè)備原本的 dpi 作為目標(biāo) dp。 不會(huì)發(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)放大。

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

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

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

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