互聯網 - 大數據

　　說來慚愧自認為對css了解，但在項目中卻很少有正確的使用css，如果面向對象的css吧，其實也不是不想用而是css天生就是面向對象的，高度可重用，但是如果把每個都單獨提取，難免會有過多的class以及自己也比較懶。

　　你要干嘛就選擇什么樣的標簽，命名也一樣。從內容本質出發，它是干什么的。

　　微型格式，如果某些內容需要的標簽沒有，可以使用class來代替 class="vcard"聯系信息。

　　通過需求和流程圖可以事先考慮如何布局使用什么元素。

標簽的使用：
　　ul無序列表
　　ol有序列表
　　dl>dt+dd描述內容 可以用在商品之類的描述上
　　blockquote描述,q短描述 cite引用 可以用在用戶評論上
　　em強調

css屬性
　　用outline替代border這樣就不用再減border的值了或者使用box-sizing:border-box;

　　又想設置高度有想高度自適應可以使用min-height

　　box-sizing
　　　　表示width寬度包含哪些,默認值是content-box表示width只包括內容寬度

媒體查詢

　　@media screen and (min-width:640px)
　　　　screen屏幕(width:xx)包括瀏覽器滾動條

　　　　only對不支持該語法的瀏覽器隱藏此規則
　　　　not如果瀏覽器不滿足設置的條件可以通過not來設置

• 通過device-width可以獲取設備寬和高不包括瀏覽器滾動條。
• 通過orientation特性可以根據屏幕的寬度和高度的比較設計不同樣式。orientation:landscape當瀏覽器寬度大于高度的時候會被匹配成功，而portrait則相反。我們可以用它來實現響應式的導航。
• touch-enabled可以匹配觸摸屏

通過媒體查詢和rem實現響應式字體大小

html{
　　font-size:10px;
}
@media only device-width and (min-width:360px) {
　　html{
　　　　font-size: 11px!important;
　　}
}
@media only device-width and (min-width:400px) {
　　html{
　　　　font-size: 13px!important;
　　}
}
@media only device-width and (min-width:1000px) {
　　body{
　　　　max-width:640px;
　　　　margin:0 auto;
　　}
}

　　iPhone、iPad，和Android等設備會通過四個屏幕側邊中較短的一對去測量device-width。也就是說，給定尺寸為320×480的設備，不管是以縱向還是橫向模式去查看，device-width都會是320px。

網頁字體

　　@font-face定義字體規則

　　@font-face{
　　　　font-family:字體名;
　　　　src:local('字體名'),url('你要導入的字體路徑') format('字體類型')
　　}

local使用源字體的名稱去檢查字體是否已經安裝在用戶的機器上；url提供一個指向字體的路徑，當字體在本地不可用時使用；而format指定字體的類型

通過font-family:字體名,來使用，并且可以覆蓋字符。

兼容IE9以下

src:url('xx.eot')；
ie9以下支持eot格式，不支持local

為了兼容強制下載所定義的字體
local('☺')

可以指定多個url路徑以,分割達到兼容的效果。

更簡單的兼容方法

@font-face{
　　font-family:name;
　　src:url('filename.eot?') format(eot),
　　url('filename.woff') format('woff'),
　　url('filename.otf') format ('opentype'),
　　url('filename.svg#filename') format('svg');
}

　　@font-face生成器（http://www.fontsquirrel.com/fontface/generator/）。只要簡單上傳你要使用的字體文件，@font-face生成器就會將其轉化為所有相關的格式——而且還可以生成需要在頁面中使用的CSS。

font-stretch屬性，它告訴瀏覽器顯示的字體風格要比當前更窄一些。

使用font-size-adjust屬性。該屬性可以動態修改font-size屬性。

文本效果

　　text-shadow:x y blur-radius color
　　文字陰影,支持多重陰影用，分割

　　-webkit-text-stroke:width color
　　描邊

　　-webkit-text-fill-color:color
　　填充，對字符的輪廓進行描邊

　　text-overflow:ellipsis
　　用省略號替換超出的文字
　　white-space:nowrap;
　　防止文本被折疊成多行

　　注意還需要加overflow:hidden;并且寬度。

　　resize:both;
　　改變元素大小

　　text-align:justify;
　　文本兩端對齊
　　text-align-last
　　設置最后一段文本的對齊方式

多列布局

　　column-count:number
　　要分成幾列

　　column-width:單位
　　根據屏幕寬度自動分列

　　column-gap:單位
　　邊界間隔

　　column-rule:1px solid red;
　　分界線

背景

　　一個元素支持多個背景圖片以,分割

　　background-size
　　對背景圖片進行縮放

　　background-clip:border-box、content-box、padding-box
　　背景裁剪,它會設置盒模型的那一部分成為背景（顏色或圖片）顯示的界限

　　background-origin:border-box、content-box、padding-box
　　設置背景開始計算的點

　　background-repeat:space、round
　　space:平鋪且不被裁剪或縮放的最大數量的圖片，并且在顯示時會有空白區域出現在它們中間
　　round:水平和垂直填充包含元素的圖片的最大完整數量

　　background-image:image-rect(url,top,right,bottom,left)
　　背景圖片裁剪,解決圖片精靈問題

　　mask:url repeat x y;
　　遮罩

　　border-radius

　　邊框

　　border-image
　　邊框圖片

　　box-shadow:inset x y radius spread color
　　盒子陰影,radius:模糊半徑,spread:陰影擴散的距離

　　rgba值只能應用到它指定的元素上,所以子元素可以否決所有的繼承。

　　currentColor表示當前color顏色值

　　appearance:button、radio-button、password...
　　使用來自操作系統的不同地方的顏色。

2D變換-transform

　　允許多重變換以空格隔開 transform:rotate(10deg) skew();

　　transform:rotate(10deg);
　　旋轉

　　transform-origin:x y;
　　改變原點,transform屬性中默認的原點是水平垂直中心

　　translate(x,y)
　　平移,該函數可將元素從它的默認位置進行移動

　　translate非常類似于使用相對定位以及left和top屬性，但請記住，經過變換的元素會保留它的位置，只是從顯示上看起來像被移動過，被變換的是元素的圖像，而不是元素本身。

　　skew(x,y)
　　傾斜

　　scale(x,y)
　　縮放

　　matrix
　　矩陣

　　box-reflect:direction offset image;
　　反射

　　transition:property time ease、linear、ease-in、ease-out、ease-in-out delay

　　過渡

動畫
　　@keyframes聲明關鍵幀

@keyframes 'name'{
　　keyframes{
　　　　property:value;
　　}
}

　　通過animation來調用

　　animation:name time ease、linear、ease-in、ease-out、ease-in-out delay count direction
　　名字 持續時間 運動方式 延遲 執行次數(infinite重復播放) 方向(normal或者alternate反向播放)

　　播放狀態
　　animation-play-state:running|paused
　　running表示動畫正在播放，而paused表示動畫未在播放

　　允許多重動畫。

3D變換
　　transform-style:preserve-3d;

　　perspective
　　透視

　　perspective-origin

　　transform-origin
　　變換原點