整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
標準盒子模型：寬度=內容的寬度（content）+ border + padding
低版本IE盒子模型：寬度=內容寬度（content+border+padding）
1. 如何理解CSS盒子模型標準盒子模型：寬度=內容的寬度（content）+ border + padding低版本IE盒子模型：寬度=內容寬度（content+border+padding）
2.BFC
1）什么是 BFC
BFC（Block Formatting Context）格式化上下文，是 Web 頁面中盒模型布局的 CSS渲染模式，指一個獨立的渲染區域或者說是一個隔離的獨立容器。
2）形成 BFC 的條件
* 浮動元素，float 除 none 以外的值
* 定位元素，position（absolute，fixed）
* display 為以下其中之一的值 inline-block，table-cell，table-caption
* overflow 除了 visible 以外的值（hidden，auto，scroll）
3）BFC 的特性
* 內部的 Box 會在垂直方向上一個接一個的放置。
* 垂直方向上的距離由 margin 決定
* bfc 的區域不會與 float 的元素區域重疊。
* 計算 bfc 的高度時，浮動元素也參與計算
* bfc 就是頁面上的一個獨立容器，容器里面的子元素不會影響外面元素。
代碼結構更加清晰
見名知意，沒有基礎的人也能知道這部分代碼是干嘛的
方便團隊開發維護，代碼可讀性更強
有利于SEO優化，爬蟲依賴于標簽來確定上下文關系
meta標簽提供關于html文檔的元數據，不會顯示在頁面，但是對于機器是可讀的，告訴瀏覽器怎么解析頁面，告訴搜索引擎關鍵字（SEO優化）
meta作用：告訴機器瀏覽器該如何解析該頁面，描述這個頁面的主要內容，可以設置服務器發送到瀏覽器的http頭部內容
charset="utf-8"設置頁面使用的字符編碼
viewport 設置視口，移動端的適配
這是因為渲染進程與js進程是互斥的，腳本會阻塞頁面的渲染，腳本之間的加載是同步進行的，按引入順序執行，但是以下兩個屬性會影響腳本執行與頁面渲染的順序
defer：不會阻塞渲染，這樣即使放在header內部，也不會阻塞頁面加載，不過js會先于document加載完成，并且也不會影響腳本之間的執行順序，按照引入順序執行
async：與defer一樣，都是解決阻塞渲染，但它是在document加載完成后才執行，并且它的執行順序是按照誰先加載完成執行誰，所以對于文件順序有要求，存在前后依賴的不要使用它
塊級元素：div，h1-h6，p，ul，ol，dl，li，hr，dt，dd，form，table
特性：塊元素獨占一行，寬高生效，默認寬和父元素一樣，內容撐開高度，margin，padding全部生效
行內元素：em，i，del，small，strong，ins，span，a
特性：寬高不生效，左右margin生效上下不生效，在一行排列，大小靠內容撐開，padding都生效
行內塊元素：img，input(表單元素，除去form)
特性：在一行排列，寬高生效，margin，padding生效
border-radius圓角
border-image 邊框圖片
border-image: url() top right bottom left
border-width: top right bottom left
box-shadow盒子陰影: x,y,size,opcity
text-shadow文字陰影linear-gradient 線性漸變
background: linear-gradient(to position , color,color,...,color)
radial-gradient 徑向漸變
background: radial-gradient(shap size at position ,
color,color,...,color)
2D/3D轉換 transform：rotate(旋轉) scale(縮放) translate(位移)
@media媒體查詢，根據屏幕寬度，設置，用來解決移動端適配,根據屏幕大小使相應的css生效
flex布局(彈性盒子)
display：none 不占位，源碼可見
opacity: 0 占位，源碼可見，透明度0
visibility: hidden 占位，源碼可見
position: top:-9999px,left:-9999px 利用定位將元素移出視窗
行內元素：text-align：center
塊元素: margin: 0 auto
position: left: 50%; transform: translate(-50%)
height = line-height
verticle-align: middle
position: top: 50%; transform: translate(0,-50%)
static 默認
relative 相對定位，不脫標，相對于自身位置進行偏離，不影響元素本身特性，z-index提升層級
absolute 絕對定位，脫標，相對于已有定位的父元素進行偏離，都沒有就相對于body進行偏離
fixed 固定定位，脫標，相對于視窗進行偏離
寬高固定 position: top:0,left:0,right:0,bottom:0,margin:auto
寬高固定 position：top: 50%, left: 50%, margin-left: -width/2px,margin
top: -height/2px
dispaly: flex; justify-content: center,align-items: center(極力推薦)
position: left: 50%,top: 50%; transform: translate(-50%,-50%)
不清楚浮動會發生高度塌陷：浮動元素父元素高度自適應（父元素不寫高度時，子元素寫了浮動后，父元素會發生高度塌陷）
* clear清除浮動（添加空div法）在浮動元素下方添加空div,并給該元素寫css樣式：
{clear:both;height:0;overflow:hidden;}
* 給浮動元素父級設置高度
* 父級同時浮動（需要給父級同級元素添加浮動）
* 父級設置成inline-block，其margin: 0 auto居中方式失效
* 給父級添加overflow:hidden 清除浮動方法
* 萬能清除法 after偽類 清浮動（現在主流方法，推薦使用）
.float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}- id選擇器
- 類選擇器
- 屬性選擇器
- 偽類選擇器
- 標簽選擇器
- 偽元素選擇器
- 通配符選擇器優先級：內聯樣式 > ID選擇器(100)> 類選擇器(10) = 屬性選擇器 = 偽類選擇器 > 元素選擇器(1) = 關系選擇器 = 偽元素選擇器 > 通配符選擇器(0)
!important
后代選擇器選全部
子代選擇器只選親孩子
1. float 布局
優點： 比較簡單，兼容性也比較好。只要清除浮動做得好，是沒有什么問題的缺點：浮動元素是脫離文檔流，要做清除浮動，這個處理不好的話，會帶來很多問題，比如高度塌陷等。
2. 絕對布局
優點：很快捷，設置很方便，而且也不容易出問題缺點：絕對定位是脫離文檔流的，意味著下面的所有子元素也會脫離文檔流，這就導致了這種方法的有效性和可使用性是比較差的。
3. flex 布局
優點：簡單快捷缺點：不支持 IE8 及以下
4. table布局
優點：實現簡單，代碼少缺點：當其中一個單元格高度超出的時候，兩側的單元格也是會跟著一起變高的，而有時候這種效果不是我們想要的。
5. grid布局
跟 flex 相似。
**新特性：**
HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
拖拽釋放(Drag and drop) API
語義化更好的內容標簽（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；
sessionStorage 的數據在瀏覽器關閉后自動刪除
表單控件，calendar、date、time、email、url、search
新的技術webworker, websocket, Geolocation
**移除元素：**
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
**h5新標簽兼容：**
IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]><script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"
</script>
<![endif]-->**如何區分：**
DOCTYPE聲明\新增的結構元素\功能元素
p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或復選框被選中。
1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，寬度 = 邊框 + padding + 內
容寬度； chrom、IE9+、(添加doctype) 使用標準盒模型， 寬度 = 內容寬度。
2. box-sizing : 為了解決標準黑子和IE盒子的不同，CSS3增添了盒模型屬性box-sizing，content-box(默認)，border-box 讓元素維持IE傳統盒子模型， inherit 繼承父盒子模型；
3. 邊界塌陷：塊元素的 top 與 bottom 外邊距有時會合并（塌陷）為單個外邊距（合并后最大的外邊距），這樣的現象稱之為 外邊距塌陷。
4. 負值作用：負margin會改變浮動元素的顯示位置，即使我的元素寫在DOM的后面，我也能讓它顯示在最前面。
調用localstorge、cookies等本地存儲方式
浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
1.使用空標簽清除浮動。
這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽。
2.使用after偽對象清除浮動
該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置 height:0，否則該元素會比實際高出若干像素；
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}3.設置overflow為hidden或者auto
4.浮動外部元素
The HTML canvas is used to draw graphics that include everything from simple lines to complex graphic objects.The <canvas> element is defined by:
HTML畫布用于繪制包含從簡單線到復雜圖形對象的所有圖形。
<canvas>元素定義如下：
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics (usually JavaScript).
<canvas>元素只是圖形的容器。 您必須使用腳本來實際繪制圖形（通常為JavaScript）。
The <canvas> element must have an id attributeso it can be referred to by JavaScript:
<canvas>元素必須具有id屬性，因此可以由JavaScript引用：
getContext() returns a drawing context on the canvas.
getContext（）返回畫布上的繪圖上下文。
The HTML canvas is a two-dimensional grid.The upper-left corner of the canvas has the coordinates (0,0).X coordinate increases to the right.Y coordinate increases toward the bottom of the canvas.
3 繪制 Drawing Shapes
ThefillRect(x, y, w, h) method draws a "filled" rectangle, in which w indicates width and h indicates height. The default fill color is black. A black 100*100 pixel rectangle is drawn on the canvas at the position (20, 20):
fillRect（x，y，w，h）方法繪制一個“填充”矩形，其中w表示width，h表示height。 默認填充顏色為黑色。
畫布上的黑色100 * 100像素矩形繪制在位置（20,20）處：
The fillStyleproperty is used to set a color, gradient, or pattern to fill the drawing.Using this property allows you to draw a green-filled rectangle.
fillStyle屬性用于設置顏色，漸變或圖案以填充圖形。
使用此屬性可以繪制一個綠色填充的矩形。
The canvas supports various other methods for drawing:
Draw a LinemoveTo(x,y): Defines the starting point of the line.lineTo(x,y): Defines the ending point of the line.
Draw a CirclebeginPath(): Starts the drawing.arc(x,y,r,start,stop): Sets the parameters of the circle.stroke(): Ends the drawing.
GradientscreateLinearGradient(x,y,x1,y1): Creates a linear gradient.createRadialGradient(x,y,r,x1,y1,r1): Creates a radial/circular gradient.
Drawing Text on the CanvasFont: Defines the font properties for the text.fillText(text,x,y): Draws "filled" text on the canvas.strokeText(text,x,y): Draws text on the canvas (no fill).There are many other methods aimed at helping to draw shapes and images on the canvas.
畫布支持各種其他繪圖方法：
畫一條線
moveTo（x，y）：定義行的起始點。
lineTo（x，y）：定義行的終點。
畫一個圓
beginPath（）：啟動繪圖。
arc（x，y，r，start，stop）：設置圓的參數。
stroke（）：結束繪圖。
漸變
createLinearGradient（x，y，x1，y1）：創建線性漸變。
createRadialGradient（x，y，r，x1，y1，r1）：創建一個徑向/圓形漸變。
在畫布上繪制文字
字體：定義文本的字體屬性。
fillText（text，x，y）：在畫布上繪制“填充”文本。
strokeText（text，x，y）：在畫布上繪制文本（輪廓）。
還有許多其他方法旨在幫助在畫布上繪制形狀和圖像。
天小編給大家帶來了一本適用于web前端開發各個階段的超級好書——《響應式web設計》pdf電子版。文末附獲取方式
本書堪稱學習響應式Web設計的難得佳作。它不僅全面、細致、圖文并茂地介紹了響應式設計相關的技術，比如媒體查詢、流式布局、彈性媒體和彈性字體等，還把近幾年來Web設計領域公認的最佳設計理念有機地融入到了實例當中，比如移動先行（Mobile First）、漸進增強、平穩退化、無障礙設計等。更加難得的是，本書以設計跨屏幕的網頁（響應式設計）為出發點，以點帶面，把如今Web設計領域兩大標準的最新版本HTML5和CSS3也納入其中，讀者在掌握先進設計方法的同時也能掌握最新的設計技術（比如使用新的HTML5結構化語義標記、嵌入媒體、響應式視頻，以及CSS3的新選擇器、特效、過渡、變形和動畫等），從而可以免除重復學習新標準之苦，讓自己一步跨入Web設計領域的最前沿。無論你想學習響應式Web設計，還是學習HTML5和CSS3的實際應用，本書都能滿足你的需要，是毋庸置疑的明智之選。
說到底，響應式Web設計并非一門獨立的技術，而只是現有技術的一個組合應用。只要有一點HTML和CSS基礎的讀者都能順利地掌握它。對于中、高級的前端設計和開發人員，翻閱本書也有助于理清自己的知識脈絡，對這個新的設計理念獲得更全面、深入的理解和把握。
目錄
第1章 HTML5、CSS3及響應式設計入門 1
1.1 為什么智能手機很重要（而老版的IE不再重要） 2
1.2 響應式設計一定是最佳選擇嗎 3
1.3 響應式網頁設計的定義 3
1.4 為什么要在響應式設計上停滯不前 4
1.5 響應式網頁設計示例 4
1.5.1 下載視口調試工具 4
1.5.2 在線創意源泉 11
1.6 為什么HTML5很優秀 12
1.6.1 省時省力 12
1.6.2 新增了語義化標簽元素 13
1.7 CSS3為響應式設計和更多創新奠定了基礎 13
1.7.1 底線：CSS3不破壞任何東西 14
1.7.2 CSS3如何解決日常設計問題 14
1.8 看吶，不用圖片 17
1.9 HTML5和CSS3現在就能用嗎 20
1.10 響應式網頁設計不是靈丹妙藥 20
1.11 引導客戶：網站不必在所有瀏覽器中表現一致 21
1.12 小結 22
第2章 媒體查詢：支持不同的視口 23
2.1 現在就能使用媒體查詢 23
2.2 為什么響應式設計需要媒體查詢 24
2.2.1 媒體查詢語法 24
2.2.2 媒體查詢能檢測那些特性 26
2.2.3 用媒體查詢改造我們的設計 27
2.2.4 加載媒體查詢的最佳方法 27
2.3 我們的第一個響應式設計 27
2.3.1 我們的設計是固定寬度的，不要驚訝 28
2.3.2 響應式設計中要保證圖片盡可能精簡 32
2.3.3 小視口下的內容剪切 33
2.4 阻止移動瀏覽器自動調整頁面大小 34
2.5 針對不同視口寬度修正設計 37
2.6 響應式設計中內容始終優先 38
2.7 媒體查詢只是必要條件之一 42
2.8 小結 42
第3章 擁抱流式布局 43
3.1 固定布局經不起未來考驗 43
3.2 為什么響應式設計需要百分比布局 44
3.3 將網頁從固定布局修改為百分比布局 44
3.3.1 需要牢記的公式 45
3.3.2 設置百分比元素的上下文 47
3.3.3 必須時刻牢記上下文 52
3.4 用em替換px 54
3.5 彈性圖片 56
3.5.1 讓圖片隨視口縮放 56
3.5.2 為特定圖片指定特定規則 58
3.5.3 給彈性圖片設置閾值 59
3.5.4 超級全能的max-width屬性 61
3.6 為不同的屏幕尺寸提供不同的圖片 61
3.7 流動網格布局和媒體查詢的默契配合 66
3.8 CSS網格系統 66
3.9 小結 72
第4章 響應式設計中的HTML5 73
4.1 HTML5的哪些部分現在就能用 73
4.1.1 大多數網站可以用HTML5編寫 74
4.1.2 膩子腳本和Modernizr 74
4.2 如何編寫HTML5網頁 75
4.2.1 HTML5的精簡之道 76
4.2.2 HTML5標簽的合理寫法 76
4.2.3 偉大的<a>標簽萬歲 77
4.2.4 HTML的廢棄零件 77
4.3 HTML5的全新語義化元素 78
4.3.1 <section> 78
4.3.2 <nav> 79
4.3.3 <article> 79
4.3.4 <aside> 79
4.3.5 <hgroup> 79
4.3.6 <header> 81
4.3.7 <footer> 81
4.3.8 <address> 81
4.4 HTML5結構元素的實際用法 81
4.5 HTML5的文本級語義元素 87
4.5.1 <b> 88
4.5.2 <em> 88
4.5.3 <i> 88
4.5.4 在頁面中應用文本層語義元素 88
4.6 遵循WAI-ARIA實現無障礙站點 90
4.7 在HTML5中嵌入媒體 93
4.8 用HTML5的方法為頁面添加視頻或音頻 93
4.8.1 提供備用的媒體源文件 95
4.8.2 針對老版本瀏覽器的備用方案 95
4.8.3 和標簽的用法基本一致 96
4.9 響應式視頻 96
4.10 離線Web應用 99
4.10.1 離線Web應用概述 99
4.10.2 讓網頁可離線使用 99
4.10.3 理解manifest文件 100
4.10.4 頁面被自動加載到離線緩存 101
4.10.5 版本注釋的用途 101
4.10.6 離線訪問網站 101
4.10.7 離線Web應用的故障診斷 102
4.11 小結 103
第5章 CSS3：選擇器、字體和顏色模式 104
5.1 CSS3給前端開發人員帶來了什么 104
5.1.1 Internet Explorer 6到8對CSS3的支持 105
5.1.2 使用CSS3設計和開發頁面 105
5.2 CSS規則解析 105
5.3 私有前綴及其用法 106
5.4 快速而有效的CSS技巧 108
5.4.1 CSS3多欄布局 108
5.4.2 文字換行 110
5.5 CSS3的新增選擇器及其用法 111
5.5.1 CSS3屬性選擇器 111
5.5.2 CSS3結構偽類 113
5.5.3 對偽元素的修正 122
5.6 自定義網頁字體 123
5.6.1 @font-face規則 124
5.6.2 使用@font-face嵌入網頁字體 124
5.7 幫幫我，標題模糊怎么辦 127
5.8 新的CSS3顏色格式和透明度 129
5.8.1 RGB顏色 130
5.8.2 HSL顏色 131
5.8.3 針對IE6、IE7和IE8提供備用顏色值 132
5.8.4 透明通道 132
5.9 小結 134
第6章 用CSS3創造令人驚艷的美 135
6.1 文字陰影 136
6.1.1 HEX、HSL或RGB顏色都可以 136
6.1.2 px、em或rem都行 136
6.1.3 取消文字陰影 138
6.1.4 制作浮雕文字陰影效果 139
6.1.5 多重文字陰影 140
6.2 盒陰影 140
6.2.1 內陰影 141
6.2.2 多重陰影 142
6.3 背景漸變 143
6.3.1 線性背景漸變 144
6.3.2 徑向背景漸變 147
6.3.3 重復漸變 149
6.4 背景漸變圖案 151
6.5 CSS3的響應性 153
6.6 組合使用CSS3屬性 155
6.7 多重背景圖片 159
6.7.1 背景圖片大小 161
6.7.2 背景圖片位置 161
6.7.3 背景屬性的縮寫語法 161
6.8 更多CSS特性 162
6.9 可縮放圖標：響應式設計中的完美選擇 162
6.10 小結 163
第7章 CSS3過渡、變形和動畫 164
7.1 什么是CSS3過渡以及如何使用它 164
7.1.1 過渡相關的屬性 166
7.1.2 響應式網站中的有趣過渡 168
7.2 CSS3的2D變形 169
7.3 嘗試CSS3的3D變形 174
7.3.1 分析3D變形效果 176
7.3.2 3D變形尚未成熟 178
7.4 CSS3動畫效果 179
7.5 小結 185
第8章 用HTML5和CSS3征服表單 186
8.1 HTML5表單 186
8.1.1 理解HTML5表單中的元素 188
8.1.2 placeholder 189
8.1.3 required 189
8.1.4 autofocus 190
8.1.5 autocomplete 191
8.1.6 list（及對應的datalist元素） 191
8.1.7 HTML5的新輸入類型 192
8.1.8 日期和時間輸入類型 198
8.2 如何給不支持新特性的瀏覽器打補丁 203
8.3 使用CSS3美化HTML5表單 204
8.4 小結 210
第9章 解決跨瀏覽器問題 211
9.1 漸進增強與優雅降級 215
9.2 該不該修復老版本IE 216
9.2.1 統計數據（再看看世界的變化） 216
9.2.2 個人選擇 216
9.3 前端的瑞士軍刀：Modernizr 217
9.3.1 使用Modernizr輔助修正樣式問題 219
9.3.2 使用Modernizr讓老版本IE支持HTML5元素 221
9.3.3 給IE6、7、8追加min/max媒體查詢功能 222
9.3.4 使用Modernizr按需加載資源 223
9.4 必要時將導航鏈接轉換為下拉菜單 225
9.5 高分辨率設備（未來趨勢） 228
9.6 小結 231
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
