CSS(3)常用屬性
css3新單位vw、vh、vmin、vmax
vh: 相對於視窗的高度, 視窗被均分為100單位的vh;
vw: 相對於視窗的寬度, 視窗被均分為100單位的vw;
vmax: 相對於視窗的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax;
vmin: 相對於視窗的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin;
視區所指為瀏覽器內部的可視區域大小， 即window.innerWidth/window.innerHeight大小，不包含任務欄標題欄以及底部工具欄的瀏覽器區域大小。
擴展學習：《CSS單位em、rem、vh和vw等及CSS3的calc()以及line-height百分比》
css3中calc動態計算元素長度
calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。
注意點：
- 用於動態計算長度值。
- 需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
- 任何長度值都可以使用calc()函數進行計算；
- calc()函數支持 “+”, “-“, “*”, “/” 運算；
- calc()函數使用標准的數學運算優先級規則；
例如：
calc(100vh - 10px) 表示整個瀏覽器窗口高度減去10px的大小
calc(100vw - 10px) 表示整個瀏覽器窗口寬度減去10px的大小
一般用來設置流式布局寬高，當然，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值
詳細了解可參考：《CSS3 calc實現滾動條出現頁面不跳動》。
css3布局：box-flex（伸縮盒最老版本）
設置或檢索伸縮盒對象的子元素如何分配其剩余空間。
<ul id="box"> <li>a</li> <li>b</li> <li>c</li> </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;}
誤區：注意box-flex只是動態分配父元素的剩余空間，而不是整個父元素的空間。
詳細可參考《CSS3布局之box-flex的使用》
css3布局：flex
Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex布局。
例如：讓一個box盒子中的兩個p元素在box中平分寬度，並且垂直居中。如下代碼：
<div class="box"> <p>這是一段內容1</p> <p>這是一段內容2</p> </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讓內容平均分配
<nav> <a href="#">a</a> <a href="#">b</a> <a href="#">c</a> </nav>
css代碼：
nav{display:-webkit-flex;display:flex;} a{-webkit-flex:1;flex:1;}
容器的屬性：
1.flex-direction： 決定主軸的方向（即項目的排列方向）
- row（默認值）：主軸為水平方向，起點在左端。
- row-reverse：主軸為水平方向，起點在右端。
- column：主軸為垂直方向，起點在上沿。
- column-reverse：主軸為垂直方向，起點在下沿。
2.flex-wrap：默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
- nowrap（默認）：不換行。
- wrap：換行，第一行在上方。
- wrap-reverse：換行，第一行在下方。
3.flex-flow：flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
.box { flex-flow: <flex-direction> || <flex-wrap>; }
4.justify-content：定義了項目在主軸上的對齊方式。
可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項目之間的間隔都相等。
- space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
5.align-items：定義項目在交叉軸上如何對齊。
它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
6.align-content：定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
- flex-start：與交叉軸的起點對齊。
- flex-end：與交叉軸的終點對齊。
- center：與交叉軸的中點對齊。
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
- space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認值）：軸線占滿整個交叉軸。
項目的屬性：
以下6個屬性設置在項目上。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1.order屬性
order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。
.item { order: <integer>; }
2.flex-grow屬性
flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
.item { flex-grow: <number>; /* default 0 */ }
如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。
3.flex-shrink屬性
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
.item { flex-shrink: <number>; /* default 1 */ }
如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
負值對該屬性無效。
4.flex-basis屬性
flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
.item { flex-basis: <length> | auto; /* default auto */ }
它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間。
5.flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
6.align-self屬性
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
詳細參考：《Flex 布局語法教程》
css3多列布局：columns
columns語法：columns：[ column-width ] || [ column-count ]
其中：[ column-width ]：設置或檢索對象每列的寬度；[ column-count ]：設置或檢索對象的列數。
<h1>列數及列寬固定:</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>列寬固定，根據容器寬度液態分布列數:</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; }
結果如圖所示：
以下列出column運用的常用相關屬性：
1.column-width：<length> | auto 設置或檢索對象每列的寬度
如：-moz-column-width:200px;
2.column-count：<integer> | auto 設置或檢索對象的列數
如：-webkit-column-count:3;
3.column-gap：<length> | normal 設置或檢索對象的列與列之間的間隙
如：column-gap:normal;column-gap:40px;
4.column-rule：[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]設置或檢索對象的列與列之間的邊框。復合屬性。相當於border屬性
如：column-rule:10px solid #090;
5.column-span：none | all 設置或檢索對象元素是否橫跨所有列。
如：column-span:all;
詳細參考：《CSS3布局之多列布局columns詳解》
box-shadow陰影
box-shadow 屬性用於在元素的框架上添加陰影效果 ，該屬性可設置的值包括，X偏移，Y偏移，陰影模糊半徑，陰影擴散半徑，和陰影顏色並以多個逗號分隔。
如下語法：
box-shadow:[inset] x-offset y-offset blur-radius spread-radius color
box-shadow屬性的參數設置取值：
- 陰影類型：此參數可選。如不設值，默認投影方式是外陰影；如取其唯一值“inset”，其投影為內陰影；
- X-offset：陰影水平偏移量，其值可以是正負值。如果值為正值，則陰影在對象的右邊，其值為負值時，陰影在對象的左邊；
- Y-offset：陰影垂直偏移量，其值也可以是正負值。如果為正值，陰影在對象的底部，其值為負值時，陰影在對象的頂部；
- 陰影模糊半徑：此參數可選，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
- 陰影擴展半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；
- 陰影顏色：此參數可選。如不設定顏色，瀏覽器會取默認色，但各瀏覽器默認取色不一致。
代碼實例語法：
/* x偏移量 | y偏移量 | 陰影顏色 */ box-shadow: 60px -16px teal; /* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色 */ box-shadow: 10px 5px 5px black; /* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* 插頁(陰影向內) | x偏移量 | y偏移量 | 陰影顏色 */ box-shadow: inset 5em 1em gold; /* 任意數量的陰影，以逗號分隔 */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* 全局關鍵字 */ box-shadow: inherit; box-shadow: initial; box-shadow: unset;
兼容寫法：
.box-shadow{
//Firefox4.0-
-moz-box-shadow:投影方式 X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色;
//Safariand Google chrome10.0-
-webkit-box-shadow:投影方式 X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色;
//Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;
}
單邊效果實現：
.box-shadow-6{
box-shadow:-10px 0 10px red, /*左邊陰影*/
10px 0 10px yellow, /*右邊陰影*/
0 -10px 10px blue, /*頂部陰影*/
0 10px 10px green; /*底邊陰影*/
}
擴展實例，例如有時候我們需要一個容器，只有內側有圓角，邊框或者描邊的四個角在外部仍然保持直角形狀，如圖所示：
使用的就是outline屬性跟box-shadow相結合，代碼如下：
div {
outline: .6em solid #655;
box-shadow: 0 0 0 .4em #655;
max-width: 10em;
border-radius: .8em;
padding: 1em;
margin: 1em;
background: tan;
}
其中css的outline屬性的定義為：（輪廓）是繪制於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。outline 簡寫屬性在一個聲明中設置所有的輪廓屬性。可以按順序設置如下屬性：
- outline-color
- outline-style
- outline-width
例如設置4 個邊框的樣式：
p{
outline:#00FF00 dotted thick;
}
參考連接：
CSS相關題目
<div class="red blue">123</div> <div class="blue red">123</div>
CSS:
.red { color: red } .blue { color: blue }
結果為什么：
答案：結果兩個div的顏色值顯示都為blue
標准W3C盒子模型和IE盒子模型
CSS盒子模型組成：外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）。
CSS盒子模型分為：標准W3C盒子模型，IE盒子模型，注意在兩種模型中寬（width）和高（height）包括屬性的不同。
W3C模型中：
- CSS中的寬（width）=內容（content）的寬
- CSS中的高（height）=內容（content）的高
IE盒子模型：
- CSS中的寬（width）=內容（content）的寬+（border+padding）*2
- CSS中的高（height）=內容（content）的高+（border+padding）*2
移動端安卓低版本設置target-densitydpi
target-densitydpi 這個私有屬性，它表示目標設備的密度等級，作用是決定css中的1px代表多少物理像素
target-densitydpi 值可以為一個數值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個
- device-dpi –使用設備原本的 dpi 作為目標 dp。 不會發生默認縮放。
- high-dpi – 使用hdpi 作為目標 dpi。 中等像素密度和低像素密度設備相應縮小。
- medium-dpi – 使用mdpi作為目標 dpi。 高像素密度設備相應放大， 像素密度設備相應縮小。 這是默認的target density.
- low-dpi -使用mdpi作為目標 dpi。中等像素密度和高像素密度設備相應放大。
特別說明的是，當 target-densitydpi=device-dpi 時， css中的1px會等於物理像素中的1px。因為這個屬性只有安卓支持，並且安卓已經決定要廢棄 target-densitydpi 這個屬性了，盡量避免使用這個屬性。
邏輯像素大小（device-width）
device-width的計算公式：設備的物理分辨率/(devicePixelRatio * scale)，在scale為1的情況下，device-width = 設備的物理分辨率/devicePixelRatio 。
devicePixelRatio稱為設備像素比，每款設備的devicePixelRatio都是已知，並且不變的，目前高清屏，普遍都是2，不過還有更高的，比如2.5, 3 等，魅族note的手機的devicePixelRatio就是3。
其它實例
等比例縮放的盒子利用padding-bottom
根據不同屏幕大小等比縮放頁面中的元素。
實現原理：padding-bottom 有一個讓人很容易忽略的特性是當它的值是百分比形式時，百分比的基數是其所在元素的父元素的寬度而不是高度。
div{
float: left;
width: 20%;
padding-bottom: 20%;
margin: 0 3% 0 0;
background: blue;
}
該實例在實際工作中應該應用少，只是為了記錄該小的知識點。