第17章 與背景和邊框相關的樣式
與背景相關的新增屬性
background-clip指定背景的顯示範圍 background-origin指定繪製背景影象時的起點 background-size指定背景中影象的尺寸 background-break指定內聯元素的背景影象進行平鋪時的迴圈方式 在firefox瀏覽器需要加「-moz-」 safari瀏覽器需要加「-webkit-」
background-clip的值有border（背景範圍包括邊框區域）和padding（背景範圍包括padding區域，不包括邊框）「-webkit-」「-moz-」
background-origin值有border padding content（從不同部位的左上角開始繪製）「-webkit-」「-moz-」
background-size 寬度 高度，如果想要維持影象的縱橫比例，可以將另乙個引數設定為auto
background-break值有bounding-box（在整個內聯元素中進行平鋪） each-box（在每一行中進行平鋪） continuous（下一行緊接著上一行），在使用firefox瀏覽器時，需要寫成「-moz-background-inline-policy」
圓角邊框的繪製
border-radius 半徑（水平方向） 半徑（垂直方向）屬性「-webkit-」「-moz-」「-o-」
四個角度都不同：border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-left-radius
border-top-left-image border-top-right-image border-bottom-left-image border-bottom-right-image是沒有展示的，相當於盲點，所以有必要將4部分影象進行平鋪或拉伸
除了border-width屬性來設定邊框寬度，還可以border-image:url(路徑) a b c d/border-width設定
指定四條邊中影象的顯示方法border-image:url(路徑) a b c d/border-width topbottom leftright topbottom表示上下 leftright表示左右 可以設定的值為repeat（平鋪） stretch（拉伸） round（完整平鋪）三種
第18章 css3中的變形處理
transform功能
用以實現四種文字或影象的變形處理，旋轉 縮放 傾斜 移動「-webkit-」「-moz-」「-o-」
縮放scale(0.5,2)，表示水平縮小50%，垂直放大1倍，可以有兩個引數前乙個為水平，後乙個為垂直（2為放大1倍）
傾斜skew(30deg,30deg)，水平傾斜30°垂直傾斜30°
移動translate(50px,50px)，水平移動30畫素，垂直移動30畫素
旋轉transform:rotate(45deg)順時針旋轉45°
綜合運用
-webkit-transform:translate(150px,200px) rotate(45deg) scale(1.5);
不同的書寫順序得到的結果也不同
指定變形的基準點
是以元素的中心點為基準點進行的，使用transform-origin屬性改變基準點「-webkit-」「-moz-」「-o-」
transform-origin屬性有兩個位置，水平和垂直left center right top center bottom
第19章 css3中的動畫功能
transition:property（哪個屬性） duration（多長時間） timing-function（什麼方式）「-webkit-」「-moz-」「-o-」
-o-transition:background-color 1s linear;
也可以分開寫成類似-o-transition-property:background;形式
同時指定多個平滑過渡-o-transition:background-color 1s linear,color 1s linear;
animations功能
它與transitions功能不同在於transitions指定動畫的開始和結束值，之間採用平滑過度，只能實現較簡單的動畫，animations則是定義多個關鍵幀以及定義每個關鍵幀元素的屬性值來實現複雜動畫效果
1）開始幀（0%） 2）動畫到（40）%時，有一處關鍵幀 3）動畫到（70）%時，有一處關鍵幀 4）結束幀（100%）
@-webkit-keyframe 關鍵幀集合名
40%在建立好關鍵幀集合後，在元素中使用該關鍵幀的集合
div:hover
實現動畫的方式（timing-function）
第20章 布局相關樣式
多欄布局
css3之前使用float、position屬性時，有時會使浮動的兩個div底部不對齊，css3中使用column-count屬性來使用多欄顯示，column-width屬性設定每欄的寬度，column-gap設定每欄的間隔，column-rule在欄與欄之間增加間隔線，可以設定顏色寬度等
盒布局box屬性
box-flex屬性使盒布局變為彈性盒布局，高寬都會變化（相當於auto），在firefox中-moz-box-flex，chrome中-webkit-box
改變元素的顯示順序，box-ordinal-group屬性「-webkit-」「-moz-」 -moz-box-ordinal-group:1;
改變元素的排列方向，box-orient「-webkit-」「-moz-」vertical（垂直方向排列）horizontal（水平方向）
對多個元素使用box-flex屬性時，多個元素都會獲得相同的寬高，box-flex後的數值代表（如圖）
指定水平方向與垂直方向的對齊方式
使用box-pack屬性及box-align屬性來指定元素中文字、影象及子元素水平方向或垂直方向的對齊方式
HTML5與css3權威指南筆記
doctype 宣告 是html檔案中必不可少的。它位於檔案第一行。html4 html5對檔案的字符集編碼推薦使用utf 8 不允許寫結束標記的元素有 area,base,br,col,command,embed,hr,img,input,keygen,link,media source,trac...
HTML5與CSS3權威指南 pdf9
第21章 media queries相關樣式 該模組中允許新增 查詢 media query 表示式，用以指定 型別，根據 型別來選擇使用的樣式 顯示器 便攜裝置 電視機 使用方法 media 裝置型別 and 裝置特性 大部分裝置特性的指定值接受min max的字首，表示大於等於或小於等於的邏輯 ...
《HTML5與CSS3權威指南》知識整理（1）
1 新增標籤 新增語義化標籤。定義 section 或 page 的頁首。定義導航鏈結。定義 section 或 page 的頁尾 定義 section。定義文章。定義頁面內容之外的內容。下面用乙個圖示來說明其用法。語義化標籤的好處 1 對搜尋引擎友好，有利於 seo2 便於程式設計師進行 閱讀和維...