HTML5學習總結

阿新 • • 發佈：2019-02-02

1 表格元素

table、thead、tbody、tfoot、tr、th、td、col、colgroup、caption

<th><td>均屬於單元格，包含兩個合併屬性：colspan、rowspan 等

--<caption>新增表格標題

<caption>這是一個人物表</caption>

--<colgroup>設定列

--<col>更靈活的設定列

<col>

</colgroup>

2 分組元素

p、div、blockquote、pre、hr、ul,ol、li、dl,dt,dd、figure、figcaption

--<blockquote>引用大段他出內容：包含了首尾縮排的功能

--<pre>展現格式化內容：編輯器怎麼排版的，原封不動的展現出來

--<ol><li>新增有序列表：ol 元素屬性：start、reversed：是否倒序排列、type：1、a、A、i、I

li 元素屬性:value:強行設定某個專案的編號。

--<dl><dt><dd>生成說明列表:這三個元素是一個整體，但<dt>:標題或<dd>:說明。並非都必須出現。

--<figure><figcaption>使用插圖：這兩個元素一般用於圖片的佈局。

<figcaption>這是一張圖</figcaption> //標題

<img src="img.png"> //圖片

</figure>

3 文件元素

h1~h6、header、footer、nav、section、article、address、aside、hgroup、details、summary

--<header>表示首部：這裡部分一般是頁面頭部，包括：LOGO、標題、導航等內容

--<hgroup>組合標題：

--<section>文件主題：這裡一般是存放文件主題內容。

--<nav>新增導航：這裡存放文件的導航

--<article>新增一個獨立成篇的文件：裡面可以包含頭、尾、主題等一系列內容

--<aside>生成註釋欄：專門為某一段內容進行註釋使用。

--<address>表示文件或article 元素的聯絡資訊。

--<details>元素生成詳情區域、<summary>元素在其內部生成說明標籤：由於大多數主流瀏覽器尚未支援，暫略

<h1>這裡是一個大標題</h1>

<h4>這裡是一個副標題</h4>

</hgroup>

<nav>這裡是一個導航</nav>

這裡存放網頁的標頭部分：LOGO，標題，導航等。

</header>

這裡是文件的主題部分。

</section>

4 嵌入元素

img、map、area、audio、video、iframe、embed、canvas、meter、object、param、progress、source、svg、track

--<img>嵌入影象：src、alt、width、height、ismap<建立伺服器端分割槽響應圖>、usemap<關聯<map>元素>

--<map>建立分割槽響應圖:

</map>

--<iframe>嵌入另一個文件:name 表示用於target 的名稱

<br>

<iframesrc="http://www.soso.com" width="800"height="600" name="in"></iframe>

--<embed>嵌入外掛內容：

<embedsrc="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf"type="application/x-shockwave-flash" width="800"height="600"></embed>

--<object>和<param>元素

--<progress>顯示進度：<progressvalue="30" max="100"></progress>

--<meter>顯示範圍裡的值：

<meter value="90"min="10" max="100" low="40" high="80"

optimum="60"></meter> ----low 表示小於它的值過低，high 表示大於它的值過高，optimum表示最佳值

5 音訊和視訊

video 視訊元素、audio 音訊元素

主流視訊容器支援的格式為：.avi、.flv、.mp4、.mkv、.ogg、.webm。

主流的音訊編解碼器：AAC、MPEG-3、Ogg Voribs，

視訊編解碼器：H.264、VP8、Ogg Theora

--video 視訊元素：主流的視訊為.webm，.mp4，.ogg 等

<sourcesrc="10anzhu.ogg">

</video>

（

屬性：src、width、height

--autoplay：設定後，表示立刻開始播放視訊

--preload：設定後，表示預先載入視訊

--controls：設定後，表示顯示播放控制元件

--loop：設定後，表示反覆播放視訊

--muted：設定後，表示視訊處於靜音狀態

--poster：指定視訊資料載入時顯示的圖片

）

--預載入設定：preload="...":preload屬性有三個值：none 表示播放器什麼都不載入；metadata 表示播放

之前只能載入元資料（寬高、第一幀畫面等資訊）；auto 表示請求瀏覽器儘快下載整個視訊。

--使用預覽圖:poster 屬性表示在視訊的第一幀，做一張預覽圖。

<videosrc="http://li.cc/test.webm" width="800"height="600" controls

poster="img.png"></video>

--相容多個瀏覽器:通過<source>元素引入多種格式的視訊，讓更多的瀏覽器保持相容。

===audio 音訊元素:主流的音訊格式有：.mp3，.m4a，.ogg，.wav。

（

屬性：src、autoplay、preload、controls

）

6 表單元素

form、input、textarea、select、option、optgroup、button、datalist、fieldset、legend、label、output

--<form>定義表單：action、method、name、target

（

屬性：

--enctype：表示瀏覽器對傳送給伺服器的資料所採用的編碼格式。有三

種：application/x-www-form-urlencoded（預設編碼，不能將檔案上傳到伺服器）、multipart/form-data（用於上傳檔案到伺服器）

、text/plain（未規範的編碼，不建議使用，不同瀏覽器理解不同）

--target：_blank、_parent、_self、_top

--autocomplete：設定瀏覽器記住使用者輸入的資料，實現自動完成表單。預設為on 自動完成，如果不想自動完成則設定off。

--novalidate：設定是否執行客戶端資料有效性檢查

--<input>表示使用者輸入資料：

（

屬性：

--autofocus：讓游標聚焦在某個input 元素上，讓使用者直接輸入

--disabled：禁用input 元素

--autocomplete：單獨設定input 元素的自動完成功能

--form：讓表單外的元素和指定的表單掛鉤提交

--type：input 元素的型別，內容較多

--name：定義input 元素的名稱，以便接收到相應的值

）

--聚焦游標：<input name="user"autofocus>

--禁用input：<inputname="user" disabled>

--禁止自動完成：<inputname="user" autocomplete="off">

--表單外的input：<formmethod="get" id="register">

...

</form>

--<label>新增說明標籤：<p><labelfor="user">使用者名稱：<input id="user"name="user"></label></p>

--<fieldset>對錶單進行編組：

（

屬性：

--name：給分組定義一個名稱

--form：讓表單外的分組與表單掛鉤

--disabled：禁用分組內的表單

）

---<legend>新增分組說明標籤：<legend>元素給分組加上一個標題

</fieldset>

--<button>新增按鈕：（type：submit、reset、button）

對於type 屬性為submit 時，按鈕還會提供額外的

（

屬性：】

--form：指定按鈕關聯的表單

--formaction：覆蓋form 元素的action 屬性

--formenctype：覆蓋form 元素的enctype 屬性

--formmethod：覆蓋form 元素的method 屬性

--formtarget：覆蓋form 元素的target 屬性

--formnovalidate：覆蓋form 元素的novalidate屬性

）

--表單外關聯提交：<button type="submit"form="register">提交</button>

7 input 元素的type 彙總

--type型別:text、password、search、submit、reset、button、number、range、checkbox、radio、image、color、

email、tel、url、date、month、time、week、datetime、datetime-local、hidden、file

==<input type="text">：

（

屬性：

--list：指定為文字框提供建議值的datalist元素，其值為datalist 元素的id 值

--maxlength、

--pattern：用於輸入驗證的正則表示式

--placeholder：輸入字元的提示

--readonly：文字框處於只讀狀態

--disabled：文字框處於禁用狀態

--size：設定文字框寬度--<inputtype="text" size="50">

--value：設定文字框初始值

--required：表明使用者必須輸入一個值，否則無法通過輸入驗證：必須輸入值

）

==<input type="password">：

（

屬性：

--maxlength：設定密碼框最大字元長度

--pattern：用於輸入驗證的正則表示式

--placeholder：輸入密碼的提示

--readonly：密碼框處於只讀狀態

--disabled：文字框處於禁用狀態

--size：設定密碼框寬度

--value：設定密碼框初始值

--required：表明使用者必須輸入一個值

）

==type 為number、range 時：

（

屬性：

--list：指定為文字框提供建議值的datalist元素，其值為datalist 元素的id 值

--min：設定可接受的最小值

--max：設定可接受的最大值

--readonly、required、value

--step：指定上下調節值的步長

）

==type 為date 系列時：

--目前還是推薦使用jQuery等前端庫來實現日曆功能。額外屬性和number 一致。

==type 為color 時：<inputtype="color">

==type 為checkbox、radio 時：

（

屬性：

--checked：設定複選框、單選框是否為勾選狀態

--required：表示使用者必須勾選，否則無法通過驗證

--value：設定複選框、單選框勾選狀態時提交的資料。預設為on

）

==type 為image 時：

（

屬性：

--src、alt、width、height、提交額外屬性：formaction、formenctype、formmethod、formtarget和formnovalidate

）

==type 為email、tel、url 時：都應遵循相應的格式。

==type 為hidden 時：生成一個隱藏控制元件，一般用於表單提交時關聯主鍵ID 提交，而這個資料作為隱藏存在。

==type 為file 時：生成一個檔案上傳控制元件，用於檔案的上傳--<input type="file">

（

屬性:

--accept:指定接受的MIME 型別

--required:表明使用者必須提供一個值，否則無法通過驗證

accept="image/gif, image/jpeg,image/png"

）

==<input type="text"list="abc" required>

<optionvalue="1">蘋果</option>

<optionvalue="2">桔子</option>

<optionvalue="3" label="香蕉">

<optionvalue="菠蘿">

</datalist>

8 表單資料驗證和其他元素

==其他元素：select、optgroup、option、textarea、output

--生成下拉列表select屬性：name、disabled、form：將表單外的下拉列表與某個表單掛鉤、size、multiple、autofocus、required

selected

==多行文字框</textarea>：

（

屬性：name、readonly、disabled、maxlength、autofocus、rows、cols

--form：將表單外的多行文字框與某個表單掛鉤

--placeholder：設定輸入時的提示資訊

--wrap：設定是否插入換行符，有soft 和hard 兩種

--required：設定必須輸入值，否則無法通過驗證

）

==計算結果：

</form>

==輸入驗證：

--必須填寫一個值：<inputtype="text" required>

--限定在某一個範圍內：<inputtype="number" min="10" max="100">

--使用正則表示式：<input type="text"placeholder="請輸入區號+座機" required

pattern="^[\d]{2,4}\-[\d]{6,8}$">

--禁止表單驗證：<formaction="http://li.cc" novalidate>

9 全域性屬性和其他

==實體：HTML 實體就是將有特殊意義的字元通過實體程式碼顯示出來。

（

實體與結果顯示： 

--<空格【<】、>【>】、&【&】、"【"】、'【'】、¢【分】、£【£鎊】、¥【¥日圓】

--€【€歐元】、§【§小節】、©【©版權】、®【®註冊商標】、™【™商標】、×【×乘號】、

--÷【÷除號】

）

==元資料：<meta>元素可以定義文件中的各種元資料，而且一個HTML 頁面可以包含多個<meta>元素。

--指定名/值元資料對：

--宣告字元編碼：<metacharset="utf-8">

--模擬HTTP 標頭欄位：

==5 秒跳轉到指定URL：<metahttp-equiv="refresh" content="5;http://li.cc">

==另一種宣告字元編碼：<metahttp-equiv="content-type" content="text/htmlcharset=utf-8">

==全域性屬性：id、class、hidden

--accesskey 屬性：快捷鍵操作，windows 下alt+指定鍵，前提是瀏覽器alt並不衝突。

--contenteditable 屬性：讓文字處於可編輯狀態，設定true 則可以編輯，false 則不可編輯。或者直接設定屬性。

<p contenteditable="true">我可以修改嗎</p>

--dir 屬性：讓文字從左到右（ltr），還是從右到左（rtl）--<pdir="rtl">文字到右邊了</p>

--lang 屬性：可以區域性設定語言。<plang="en">HTML5</p>

--title 屬性：對元素的內容進行額外的提示。

--tabindex 屬性：表單中按下tab 鍵，實現獲取焦點的順序。如果是-1，則不會被選中。

--style 屬性：設定元素行內CSS 樣式

10 CSS入門

--建立CSS 樣式表有三種方式：1.元素內嵌樣式；2.文件內嵌樣式；3.外部引入樣式。

==文件內嵌樣式：<styletype="text/css"></style>

==外部引用樣式：<linkrel="stylesheet" type="text/css"href="style.css">

@charset "utf-8"表明設定CSS 的字元編碼，如果不寫預設就是utf-8。

==層疊和繼承：優先順序從低到高

(1).瀏覽器樣式（元素自身攜帶的樣式）；

(2).外部引入樣式（使用<link>引入的樣式）；

(3).文件內嵌樣式（使用<style>元素設定）；

(4).元素內嵌樣式（使用style 屬性設定）。

==強行設定最高優先順序：color:green !important;

==強制繼承：inherit：@charset"utf-8";

p {

color: green;

font-style: italic;

}

11 CSS選擇器

分為基本選擇器、複合選擇器和偽元素選擇器。

==選擇器：*、<type>、#<id>、.<class>、[attr]系【屬性選擇器】、s1,s2,s3...【分組選擇】、s1 s2【後代選擇器】、

s1 > s2【子選擇器】、s1 + s2【相鄰兄弟選擇器】、s1 ~ s2【普通兄弟選擇器】、

偽元素選擇器：::first-line【選擇塊級元素文字的首行】、::first-letter【選擇塊級元素文字的首字母】

::before【選擇元素之前插入內容】、::after【選擇元素之後插入內】

--屬性選擇器：[href]、[type="password"]、

[href^="http"]：屬性值開頭匹配的屬性選擇器。

[href$=".com"]：屬性值結尾匹配的屬性選擇器。

[href*="baidu"]：屬性值包含指定字元的屬性選擇器

[class~="edf"]：屬性值具有多個值時，匹配其中一個值的屬性選擇器。

[lang|="en"]：屬性值具有多個值且使用“-”號連線符分割的其中一個值的屬性選擇器。比如<i lang="en-us">HTML5</i>。

p::first-line {color: red;}

p::first-letter {color: red;}

a::before {content: '點選';}

a::after {content: '搜尋';}

12 CSS樣式之偽類選擇器

（HTML5 中CSS 選擇器中的偽類選擇器，和偽元素選擇器一樣，面向某種共同特徵來選擇元素。）

==偽類選擇器總彙---偽類選擇器分為四種類型：結構性偽類、UI 偽類、動態偽類和其他偽類選擇器

（

《子元素選擇器》:root【根元素選擇器】、:first-child【子元素選擇】、:last-child【子元素選擇】、

:only-child【子元素選擇器，選擇元素中唯一子元素】

:only-of-type【子元素選擇器，選擇指定型別的唯一子元素】、:nth-child(n)【子元素選擇器，選擇指定N 個子元素】

《UI 選擇器》：:enabled【選擇啟用狀態的元素】、:disabled【選擇禁用狀態的元素】、:checked【選擇被選中input 勾選元素】

:default【選擇預設元素】、:valid【驗證有效選擇input 元素】、:invalid【驗證無效選擇input 元素】

:required【有required 屬性選擇元素】、:optional【無required 屬性選擇元素】

《動態選擇器》：:link【未訪問的超連結元素】、:visited【已訪問的超連結元素】、:hover【懸停在超連結上的元素】

:active【啟用超連結上的元素】、:foucs【獲取焦點的元素】

《其他選擇器》：:not【否定選擇的元素】、:empty【選擇沒有任何內容的元素】、:lang【選取包含lang 屬性的元素】、

:target【選取URL 片段標識指向元素】

）

==結構性偽類選擇器

--子元素選擇器：ul >li:first-child【選擇第一個子元素】

==ul > li:last-child【選擇最後一個子元素】 ul > li:only-child【選擇只有一個子元素的那個子元素】

==div > p:only-of-type【選擇只有一個指定型別的子元素的那個子元素】

--:nth-child(n)系列：ul >li:nth-child(2)【選擇子元素的第二個元素】

ul> li:nth-last-child(2)【選擇子元素倒數第二個元素】 div >p:nth-of-type(2)【選擇特定子元素的第二個元素】

div > p:nth-last-of-type(2)【選擇特定子元素的倒數第二個元素】

--其他偽類選擇器：

:not【否定選擇器，反選】 :empty【匹配沒有任何內容的元素】

:lang(en)【選擇包含lang 屬性，屬性值字首為en 的元素。和屬性選擇器匹配結果一致】

:target【定位到錨點時，選擇此元素】 ::selection【】

13 顏色和度量單位

==顏色表方案：

black、silver【銀灰色】、gray【灰色】、white、maroon【栗色】、栗色、purple【紫色】、fuchsia【紫紅】、green、lime【閃光綠】、olive【橄欖色】、yellow

navy【海軍藍】、blue、teal【水鴨色】、aqua【淺綠色】

十進位制表示方法就比較多樣化：

rgb(r,g,b)--用 RGB 模型表示顏色--rgb(0,128,128)

rgba(r,g,b,a)--同上， a 表示透明度 0~1 之間--rgba(0,128,128,0.5)

hsl(h,s,l)--用 HSL 模型（色相、飽和度和透明度）來表示顏色--hsl(120,100%,30%)

hsla(h,s,l,a) --同上， a 表示透明度 0~1 之間--hsla(120,100%,30%,0.5)

==度量單位

絕對長度單位：in【英寸】 cm【釐米】 mm【毫米】 pt【磅】 pc【pica】

相對長度單位：em【與元素字號掛鉤】 ex【與元素字型的“x 高度”掛鉤】 rem【與根元素的字號掛鉤】 px【畫素，與解析度掛鉤】 %【相對另一值的百分比】

14 CSS文字樣式

@charset "utf-8";

==字型總彙：font-size、

--font-variant：設定英文字型是否轉換為小型大寫

--font-style：設定字型是否傾斜

--font-weight：設定字型是否加粗

--font-family：設定 font 字型

--font：設定字型樣式複合寫法

[email protected]：設定 Web 字型

==設定字型大小。每個值從小到大的固定值。

x-small

small

medium

large

x-large

xx-large

smaller

larger

X+px X+%

==font-style:設定字型是否傾斜。normal、italic、oblique

==font-variant：設定字型是否以小型大寫字母顯示：normal、small-caps

==font-weight：設定字型是否加粗。normal、bold、bolder、lighter、100 ~ 900 之間的數字：600 及之後是加粗，之前不加粗

==font-family：備用字型font-family: 楷體,微軟雅黑,宋體;

==font：字型設定簡寫組合方式。格式如下：[是否傾斜|是否加粗|是否轉小型大寫] 字型大小字型名稱

==Web 字型：//伺服器提供字型

@font-face {

font-family: abc;

src: url('BrushScriptStd.otf');

}

p {

font-size: 50px;

font-family: abc;

}

15 CSS文字樣式[下]

==文字總彙：

text-decoration：裝飾文字出現各種劃線。

text-transform：將英文文字轉換大小寫

text-shadow：給文字新增陰影

text-align：給文字新增陰影

white-space：排版中的空白處理方式

letter-spacing：設定字母之間的間距

word-spacing：設定單詞之間的間距

line-height：設定行高

word-wrap：控制段詞

text-indent：設定文字首行的縮排

==文字樣式：CSS 文字樣式有三種：文字裝飾、英文大小寫轉換和文字陰影

--text-decoration：設定文字出現下劃線：none、underline、overline【讓文字的頭部出現一條上劃線】、

--line-through【讓文字的中部出現一條刪除劃線】、blink【讓文字進行閃爍，基本不支援了】

--text-transform：none、capitalize、uppercase、lowercase

--text-shadow：給文字新增陰影。text-shadow: 5px 5px 3px black;其中四個值，第一個值：水平偏移；第二個值：垂直偏移；第

三個值：陰影模糊度（可選）；第四個值：陰影顏色（可選）

==文字控制：

--text-align：left、right、center、justify【內容兩端對齊】、start【讓文字處於開始的邊界】、end【讓文字處於結束的邊界】

--white-space：處理空白排版方式。normal、nowrap【空白符被壓縮，文字不換行】、pre【空白符被保留，遇到換行符則換行】

pre-line【空白符被壓縮，文字會在排滿或遇換行符換行】、pre-wrap【空白符被保留，文字會在排滿或遇換行符換行】

--letter-spacing：設定文字之間的間距。normal、長度值

--word-spacing：設定英文單子之間的間距。normal、長度值

--line-height：設定段落行高

--word-wrap：讓過長的英文單詞斷開。normal、break-word

--text-indent：設定文字首行的縮排normal、長度值

16 CSS盒模型[上]

==元素尺寸：width、height、min-width、min-height、max-width、max-height

==元素內邊距：padding-top、padding-bottom、padding-left、padding-right、padding

==元素外邊距：margin-top、margin-bottom、margin-left、margin-right、margin

==處理溢位：overflow-x、overflow-y、overflow【auto、hidden《溢位的內容，直接剪掉》、scroll《都會出現滾動條》、visible《預設值，不管是否溢位，都顯示內容》】

17 CSS盒模型[下]

==元素可見性:visibility【visible、hidden、collapse《元素不可見，隱藏表格的行與列，如果不是表格，則和 hidden 一樣》】

==元素盒型別：塊級元素、行內元素、行內-塊元素、隱藏元素

--塊級元素：<div>、<p>

--行內元素：<span>、<b>

--行內-塊元素：<img> 》》display【block【盒子為塊級元素】、inline【盒子為行內元素】、inline-block【盒子為行內-塊元素】、none【盒子不可見，不佔位】】

==元素的浮動：float【left、right、none】

==clear 屬性來處理取消元素的浮動情況：float【clear：none《允許兩邊均可浮動》、left/right【左/右邊界不得浮動】、both】

18 CSS 邊框和背景

==宣告邊框:三個屬性設定：border-width、border-style【樣式，必選】、border-color

==邊框樣式：none、dashed【破折線】、dotted【圓點線】、double【雙線】、groove 【槽線】、inset【使元素內容具有內嵌效果】

outset【使元素內容具有外凸效果】、ridge【脊線】、solid【實線】

==邊框寬度取值表：長度值、百分數、使用長度名稱的預設寬度。這三個值的具體意義由瀏覽器來定義，從小到大依次增大【thin、medium、thick】

==圓角邊框：使用border-radius 屬性進行設定

（

屬性：

--border-radius：四條邊角

--border-top-left-radius：左上邊角

--border-top-right-radius：右上邊角

--border-bottom-left-radius：左下邊角

--border-bottom-right-radius：右下邊角

）

19 CSS 邊框與背景[下]

《盒模型的尺寸可以通過兩種方式實現可見性，一種就是之前的邊框，還有一種就是背景。》

==設定背景：

（

屬性：

--background-color、

--background-image：none 或url

--background-repeat：背景圖片的樣式

--background-size：背景影象的尺寸

--background-position：背景影象的位置【位置座標】

--background-attachment：背景圖片的滾動

--background-clip：背景圖片的裁剪

--background-origin：背景圖片起始點

--background：背景圖片簡寫方式

）

==background-color：顏色/transparent

==background-image：none【如果多個div 批量設定了背景，而其中某一個不需要背景，可以單獨設定none值取消背景】、url

==background-repeat：repeat-x、repeat-y、repeat、no-repeat

==background-position：top、left、right、bottom、center、長度值【偏移圖片的位置】、百分數【偏移圖片的位置】

--background-position: top left;【置於左上方偏移】 --background-position: 20px 20px;【左邊、上邊偏移】

==background-size：

（

屬性：長度值、百分比

--auto：預設值，影象以本尺寸顯示

--cover：等比例縮放影象，使影象至少覆蓋容器，但有可能超出容器

--contain：等比例縮放影象，使其寬度、高度中較大者與容器橫向或縱向重合

）

使用cover 相當於100%，全屏鋪面一張大圖，這個值非常實用。body {background-image: url(loading.gif);background-size: cover;}

使用contain 表示，儘可能讓圖片完整的顯示在元素內。background-size: 240px 240px;

==background-attachment：scroll【預設值，背景固定在元素上，不會隨著內容一起滾動】

fixed 【背景固定在視窗上，內容滾動時背景不動】

==background-origin：border-box【在元素盒子內部繪製背景】 padding-box【在內邊距盒子內部繪製背景】

content-box【在內容盒子內部繪製背景】

==background-clip： border-box【在元素盒子內部裁剪背景】 padding-box【在內邊距盒子內部裁剪背景】

content-box【在內容黑子內部裁剪背景】

20 CSS 表格與列表

==表格樣式

（

--border-collapse：邊框樣式，相鄰單元格的邊框樣式

--border-spacing：相鄰單元格邊框的邊距，長度值

--caption-side：表格標題的位置【位置名稱】

--empty-cells：空單元格是否顯示邊距【顯示值】

--table-layout：指定表格的佈局樣式【佈局樣式】

==border-collapse：separate【預設值，單元格邊框獨立】、collapse【單元格相鄰邊框被合併】

border-collapse: collapse;//單元格相鄰的邊框被合併。

==border-spacing：長度值 0表示間距，其他使用CSS 長度值

border-spacing:10px;【border-collapse: separate;的狀態下才有效。因為要設定間距，不能合併。】

==caption-side：top【預設值，標題在上方】 bottom【標題在下方】

==empty-cells：show【預設值，顯示邊框】 hide【不顯示邊框】

==empty-cells: hide;【單元格內容為空時隱藏邊框。】

==table-layout：auto【預設值，內容過長時，拉伸整個單元格】、fixed【內容過長時，不拉伸整個單元格】

）

==列表樣式

列表有四種獨有樣式：list-style-type【型別值，列表中的標記型別】 list-style-image【none 或url影象作為列表標記】

list-style-position【位置值，排列的相對位置】 list-style【列表的簡寫形式】

==list-style-type：

（

屬性：none【沒有標記】、disc【實心圓】、circle【空心圓】、square【實心方塊】、decimal【阿拉伯數字】、lower-roman【小寫羅馬數字】

upper-roman【大寫羅馬數字】、lower-alpha【小寫英文字母】、upper-roman【大寫英文字母】

）

==list-type-position：outside【預設值，標記位於內容框外部】、inside【標記位於內容框內部】

==list-type-image：none【不使用影象】、url【通過url 使用影象】list-style-image: url(bullet.png);//使用圖片作為字首的標記

==list-style：簡寫形式 ul {list-style: lower-alpha insideurl(bullet.png);}

==其他功能：

《在<table>中<td>單元格，我們可以使用text-align 屬性水平對齊，但是垂直對齊就無法操作了。CSS 提供了vertical-align 屬性用於垂直對齊》

（

--baseline：內容物件與基線對齊

--top：內容物件與頂端對齊

--middle：內容物件與中部對齊

--bottom：內容物件與底部對齊

）

==上下標功能：sub【垂直對齊文字的下標】、super【垂直對齊文字的上標】b{vertical-align: super;}

==長度值【設定上下的偏移量，可以是負值】百分比【同上】 vertical-align: -200px;

負值往下，正值往上。如果預設基線在上面，用負數。如果預設基線在下面，用正值。

21 CSS 其他樣式

：包括顏色、透明度、盒子的陰影輪廓以及游標的樣式。

==顏色和透明度：color【設定文字前景色】 opacity【0 ~ 1：設定元素的透明度】

==盒子陰影和輪廓：box-shadow【一個非常實用的效果樣式，就是陰影效果】

（

屬性：

--hoffset：陰影的水平偏移量，是一個長度值，正值表示陰影向右偏移，負值表示陰影向左偏移。

--voffset：陰影的垂直偏移量，是一個長度值，正值代表陰影位於元素盒子的下方，負值代表陰影位於元素盒子上方。

--blur：（可選）指定模糊值，是一個長度值，值越大盒子的邊界越模糊。預設值為0，邊界清晰

--spread：（可選）指定陰影延伸半徑，是一個長度值，正值代表陰影向盒子各個方向延伸擴大，負值代表陰影沿相反方向縮小

--color：（可選）設定陰影的顏色，如果省略，瀏覽器會自行選擇一個顏色

--inset：（可選）將外部陰影設定為內部陰影。

==【box-shadow: 5px 4px10px 2px gray; ||box-shadow: 5px 4px 10px 2px gray inset;】

）

==outline：輪廓樣式，它和邊框一樣，只不過它可以在邊框的外圍再加一層。

（

屬性：

--outline-color：【顏色，外圍輪廓的顏色】

--outline-offset：【長度，輪廓距離元素邊框邊緣的偏移量】

--outline-style：【樣式，輪廓樣式，和border-style一致】

--ontline-witdh：【輪廓寬度】

--outline：<顏色> <樣式> <寬度> outline: 10px double red;

）

==游標樣式cursor：auto,default,none,context-menu,help,pointer,progress,wait,cell,crosshair,text,verticaltext,

alias,copy,move,no-drop,not-allowed,e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize

,ew-resize,ns-resize,nesw-resize,nwse-resize,col-resize,row-resize,all-scroll

22 CSS3 字首和rem

==CSS3 字首：

（瀏覽器，廠商名稱

--Chrome、Safari：-webkit-

--Opera：-o-

--Firefox：-moz-

--Internet Explorer：-ms-

）

//實驗階段的寫法

div {

-webkit-border-radius: 50px;

-moz-border-radius: 50px;

-o-border-radius: 50px;

-ms-border-radius: 50px;

border-radius: 50px;

}

//字首寫法寫在標準後面，且值不一樣，就會出現問題

div {

border-radius: 50px;

-webkit-border-radius: 100px;

}

==長度單位rem：

《這裡重點推薦一個：rem 或者成為(根em)。目前主流的現代瀏覽器都很穩定的支援。它和em、百分比不同的是，

它不是與父元素掛鉤，而是相對於根元素<html>的文字大小來計算的，這樣能更好的統一整體頁面的風格。》

1em=10px; em:【靈活】它掛鉤的是它父元素所以，W3C 推出了直接基於根元素單位：rem：【與根元素掛鉤】

23 CSS3 文字效果

==文字陰影：

//正值陰影

text-shadow: 1px 1px 1px red;

//負值陰影

text-shadow: -1px -1px 1px red;

//多重陰影疊加

text-shadow:0px 0px 0 rgb(188,178,188),

1px 0px 0 rgb(173,163,173)...

==文字裁剪：

《CSS3 提供了text-overflow 屬性來控制文字的溢位部分，它的作用是對溢位的部分裁剪掉，然後判定是否新增省略號。》

---text-overflow：clip【預設值，裁剪文字時不新增“...”省略號】

ellipsis【裁剪文字時新增“...”省略號】

//必須不換號和使用overflow 控制溢位

p {

width: 160px;

white-space: nowrap;

background: silver;

/*text-overflow: clip;*/

text-overflow: ellipsis;

overflow: hidden;

}

==文字描邊：

《CSS3 提供了描邊屬性，即text-stroke、text-stroke-width、text-stroke-color。目前只有webkit

引擎的瀏覽器支援，並且必須加上-webkit-字首才能有效。》

//實驗階段的產物，瞭解即可

p {

font-size: 50px;

-webkit-text-stroke:1px red;

}

//修改描邊的顏色和厚度

p {

font-size: 50px;

-webkit-text-stroke:1px red;

-webkit-text-stroke-color: orange;

-webkit-text-stroke-width: 2px;

}

==文字填充：

《CSS3 提供了一個文字顏色填充功能：text-fill-color，感覺和color 屬性很像。其實在配合其他屬性才能達到不一樣的效果。》

//不配合背景樣式時，和color 屬性沒區別

p {

font-size: 150px;

-webkit-text-fill-color: red;

}

//和CSS3 背景的新特性搭配產生漸變文字

p {

font-size: 150px;

font-family: 黑體;

background:

-webkit-linear-gradient(top,#eee,#aaa50%,#333 51%,#000);

-webkit-background-clip:text;

-webkit-text-fill-color: transparent;

}

24 CSS3 漸變效果

《HTML5 中CSS3 背景漸變功能，主要有兩種漸變方式：線性漸變和徑向（放射性）漸變。》

==線性漸變linear-gradient：CSS3 提供了linear-gradient屬性實現背景顏色的漸變功能。linear-gradient(方位, 起始色, 末尾色)

方位：to top、to topright、to right、to bottom、to bottom left、toleft、to top left。

起始色：必選引數，顏色值

末尾色：必選引數，顏色值

//可以使用以角度單位的數值來設定方位。比如0度（0deg）相當於to top；角度會沿逆時針方向隨著你的角度的增加而增加。

//通過角度設定方位，0 ~ 360 度之間，可以是負值

background-image:linear-gradient(45deg,orange,green);

//多色線性漸變

background-image:linear-gradient(-45deg,orange,green,blue,red);

//通過百分比設定多色線性位置

background-image: linear-gradient(-45deg,orange 0%, green 20%, blue 40%,red 100%);

//結合背景，並使用透明漸變實現強大層次感

background-color: red;

rgba(0,0,0,0));

//重複漸變屬性值

background-image:repeating-linear-gradient(to top, orange 10px, green

30px);

==徑向漸變radial-gradient：

《CSS3 提供了徑向漸變，也叫做放射性漸變：radial-gradient 屬性值。它是從一個點向四周發散的方式擴充套件。》

==radial-gradient(方位, 起始色, 末尾色)

方位：可選引數，徑向的方位。可以使用的值有：畫素、百分比、固定值，或複合搭配使用：

起始色：必選引數，顏色值

末尾色：必選引數，顏色值

//兩個必選引數

//如果想設定第一個可選引數，有一種做法是設定為：cirlce(圓形)或ellipse(橢

圓形)。預設是橢圓形。

//不單單可以設定形狀，還可以設定形狀的發散方向：top、left、right、bottom、center

//也可以複合方向，比如右下方

//可以設定發散的距離，即圓的半徑長度：

（

關鍵字說明：closest-side【指定徑向漸變的半徑長度為從圓心到離圓心最近的邊】

closest-corner【指定徑向漸變的半徑長度為從圓心到離圓心最近的角】

farthest-side【指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊】

farthest-corner【指定徑向漸變的半徑長度為從圓心到離圓心最遠的角】

）

//關鍵字有點拗口，可以用畫素表示半徑，但不接受百分比

//同樣，也有重複背景方式

background-image:repeating-radial-gradient(circle 50px, orange,green);

//相容模式

//兩個重複背景只要加上字首就是相容模式了

25 CSS3 邊框圖片效果

==屬性解釋：

《CSS3 提供了一個新的屬性集合，用這幾個屬性可以嵌入圖片形式的邊框。這樣，邊框就可以自定義了。》

（

屬性：

--border-image-source：引入背景圖片地址

--border-image-slice：切割引入背景圖片

--border-image-width：邊框圖片的寬度

--border-image-repeat：邊框背景圖片的排列方式

--border-image-outset：邊框背景向外擴張

--border-image：上面五個屬性的簡寫方式

）

==屬性解釋

顯示排列方式:border-image-repeat

(

屬性：

--stretch：指定用拉伸方式填充邊框背景圖。預設值。

--repeat：指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時，如果超過則被截斷。

--round：指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小，直至正好可以鋪滿整個邊框。

--space：指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的之間的間距，直至正好可以鋪滿整個邊框。

)

//另一個按鈕的小例子

div {

width: 400px;

height: 40px;

border-image-source: url(button.png);

border-image-width: 10px;

border-image-slice: 10 fill;

border-image-repeat: stretch;

}

border-image-source: url(border.png);

border-image-width:27px;

border-image-slice:27;

border-width:20px;

border-image-repeat:round;

==簡寫和版本:border-image:url(border.png) 27/27px round;

26 CSS3 變形效果[上]

《HTML5 中CSS3 的變形效果，通過變形效果，可以平移、縮放和旋轉元素的功能。》

==transform：

《CSS3 提供了元素變形效果，也叫做變換。它可以將元素實現旋轉、縮放和平移的功能。屬性有兩個：transform 和transform-origin。》

--transform：指定應用的變換功能

--transform-origin：指定變換的起點

（

於transform 的屬性值：none、

--translate、translateX、translatY(長度值或百分數值)【平移】：在水平方向、垂直方向或兩個方向上平移元素。

--scale、scaleX、scaleY(數值)【縮放】：在水平方向、垂直方向或兩個方向上縮放元素

--rotate(角度)【旋轉】：旋轉元素

--skew、skewX、skewY(角度)【傾斜】：在水平方向、垂直方向或兩個方向上使元素傾斜一定的角度

--matrix(4~6 數值，逗號隔開)：指定自定義變換。

transform: scale(1.5,1.5);

/*旋轉*/：transform:rotate(-45deg);

/*通過六個值自定義矩形*/：transform:matrix(1, 0, 0, 1, 30, 30);

/*多個屬性值空格隔開*/transform:rotate(45deg) scale(1.5);

）

==transform-origin：《可以設定變換的起點。預設情況下，使用元素的中心作為起點。》

（

屬性：

--百分數值：指定元素x 軸或y 軸的起點

--指定x 軸的位置：left、center、right

--指定y 軸的位置：top、center、bottom

//預設值，以中心點變形

transform-origin: center center;

transform-origin: 50% 50%;

//以左上角為基準點變形

transform-origin: left top;

transform-origin: 0px 0px;

）

==瀏覽器版本：相容完整版==新增代表各個瀏覽器的字首

27 CSS3 變形效果[下]

《HTML5 中CSS3 的變形效果，主要接著上節課的2D 平面變形轉換到3D立體變形。》

==3D 變形簡介

（

3D 變形的屬性值表：

--translate3d(x,y,z)：3D 方式平移元素，設定x、y 和z 軸

--translateZ(z)：設定3D 方式平移元素的z 軸【平移】

--scale3d(x,y,z)：設定3D 方式縮放元素的z 軸

--scaleZ(z)：設定3D：方式縮放元素的z 軸【縮放】

--rotate3d(x,y,z,a)：3d 方式旋轉元素

--rotateX(a)、rotateY(a)、rotateZ(a)：分別設定3D 方式的旋轉元素的x、y 和z 軸【旋轉】

--perspective(長度值)：設定一個透視投影矩陣

--matrix3d(多個值)：定義一個矩陣

）

//相容版本完整形式

==transform-style：是指定巢狀元素如何在3D空間中呈現。

（

屬性：flat：預設值，表示所有子元素在2D 平面呈現。

preserve-3d：表示子元素在3D 空間中呈現。

）

==perspective：perspective 是3D 變形的重要屬性，該屬性會設定檢視者的位置，並將可視內容對映

到一個視錐上，繼而投放到一個2D 平面上。

（

屬性：none：預設值，表示無限的角度來看3D 物體，但看上去是平的。

長度值：接受一個長度單位大於0 的值，其單位不能為百分比。值越大，角度出現的越遠，就好比你人離遠一點看物體。值越小，正相反。

）

==perspective-origin 屬性來設定3D 變形中的源點角度。該屬性預設值為50% 50%也就是center center。

（

--百分數值：指定元素x 軸或y 軸的起點

--長度值：指定距離

--指定x 軸的位置：left、center、right

--指定y 軸的位置：top、center、bottom

）

28 CSS3 過渡效果

==過渡簡介：過渡效果一般是通過一些簡單的CSS動作觸發平滑過渡功能，比如：:hover、:focus、:active、:checked 等。

CSS3 提供了transition 屬性來實現這個過渡功能，主要屬性如下表：

（

--transition-property：指定過渡或動態模擬的CSS屬性

--transition-duration：指定完成過渡所需的時間

--transition-timing-function：指定過渡的函式

--transition-delay：指定過渡開始出現的延遲時間

--transition：簡寫形式，按照上門四個屬性值連寫

）

==transition-property：none【沒有指定任何樣式】、all【預設值，指定元素所支援transition-property屬性的樣式】、

指定樣式【指定支援transition-property的樣式】

==transition-proerty 支援的樣式有哪些：【background-color、background-image、background-position、border-bottom-color、border-bottom-width、border-color

border-left-color、border-left-width、border-right-color、border-right-width、border-spacing、border-top-color、border-top-width、border-width

bottom、color、crop、font-size、font-weight、grid-*、height、left、letter-spacing、line-height、margin-bottom、margin-left、margin-right、margin-top

max-height、max-width、min-height、min-width、opacity、outline-color、outline-offset、outline-width、padding-bottom、padding-left、padding-right、padding-top

right、text-indent、text-shadow、top、vertical-align、visibility、width、word-spacing、z-index、zoom】

==transition-duration：設定過渡的樣式--transition-duration:1s;

==transition-timing-function：當過渡效果執行時，比如產生緩動效果

（

--ease：預設值，元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢。(0.25, 0.1,0.25, 1.0)

--linear：終止狀態速度是恆速等同於貝塞爾曲線(0.0,0.0, 1.0, 1.0)

--ease-in：速度越來越快，呈一種加速狀態等同於貝塞爾曲線(0.42, 0,1.0, 1.0)

--ease-out：速度越來越慢，呈一種減速狀態等同於貝塞爾曲線(0, 0, 0.58,1.0)

--ease-in-out：先加速，再減速。等同於貝塞爾曲線(0.42,0, 0.58, 1.0)

）

//恆定速度

transition-timing-function: linear;

以上五種都是設定好的屬性值，我們也可以自定義這個緩動。使用 cubic-bezier()屬性值，裡面傳遞四個引數 p0,p1,p2,p3，值在 0~1 之間。

//自定義緩動

transition-timing-function:cubic-bezier(0.25, 0.67, 0.11, 0.55);

==transition-delay：這個屬性可以設定一個過渡延遲效果，就是效果在設定的延遲時間後再執行。

//設定延遲效果如果有多個樣式效果，可以設定多個延遲時間，以空格隔開

transition-delay: 0s, 1s, 0s;

29 CSS3動畫效果

==動畫簡介：

animation 實現動畫效果主要由兩個部分組成：

1.通過類似 Flash 動畫中的關鍵幀宣告一個動畫；

2.在 animation 屬性中呼叫關鍵幀宣告的動畫。

==CSS3 提供的 animation 是一個複合屬性，它包含了很多子屬性：

--animation-nam：用來指定一個關鍵幀動畫的名稱，這個動畫名必須對應一個@keyframes 規則。CSS 載入時會應用 animation-name 指定的動畫，從而執行動畫。

--animation-duration：用來設定動畫播放所需的時間

--animation-timing-function：用來設定動畫的播放方式

--animation-delay：用來指定動畫的延遲時間

--animation-iteration-count：用來指定動畫播放的迴圈次數

--animation-direction：用來指定動畫的播放方向

--animation-play-state：用來控制動畫的播放狀態

--animation-fill-mode:用來設定動畫的時間外屬性

--animation:以上的簡寫形式

==屬性詳解:

@keyframes://建立動畫的第一步，先宣告一個動畫關鍵幀。

@keyframes myani {

0% {

background-color: white;

margin-left:0px;

}

50% {

background-color: black;

margin-left:100px;

}

100% {

background-color: white;

margin-left:0px;

}

//或者重複的，可以並列寫在一起

@keyframes myani {

0%, 100% {

background-color: white;

margin-left:0px;

}

50% {

background-color: black;

margin-left:100px;

}

==animation-name://呼叫@keyframes 動畫--animation-name:myani;

--none:預設值，沒有指定任何動畫

--INDEX:是由@keyframes 指定建立的動畫名稱

==animation-duration://設定動畫播放的時間--animation-duration:1s;

==animation-timing-function://設定緩動--animation-timing-function:ease-in;【ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier】

==animation-delay：//設定延遲時間-----animation-delay: 1s;

==animation-iteration-count：//設定迴圈次數---animation-iteration-count:infinite;【次數，預設值為 1、infinite：表示無限次迴圈】

==animation-direction：//設定緩動方向交替--animation-direction:alternate;【normal：預設值，每次播放向前、alternate：一次向前，一次向後，一次向前，一次向後這樣交替】

==animation-play-state//設定停止播放動畫--animation-play-state:paused;

==animation-fill-mode//設定結束後不在返回--animation-fill-mode:forwards;【none：預設值，表示按預期進行和結束、forwards：動畫結束後繼續應用最後關鍵幀位置，即不返回

backforwards：動畫結束後迅速應用起始關鍵幀位置，即返回、both：根據情況產生 forwards 或 backforwards 的效果】

==簡寫和版本：

//簡寫形式完整版

animation: myani 1s ease 2 alternate 0sboth;

30 CSS 傳統佈局[上]

==佈局模型:

--從最低解析度1024 * 768 設計即可。當然，也有一些網站在近兩年講最低解析度設定為1280 減去滾動條寬度，因為大顯示器逐步主流。

--剛才所說的固定長度的佈局，還有一種是流體佈局，就是佈局的長度為百分比，比如100%。不管你是什麼解析度，它都能全屏顯示，

--當然，侷限性也特別大，只適合一些單一頁面，複雜的頁面，會隨著不同瀏覽器產生各種閱讀障礙。

==表格佈局:

--表格佈局，就是通過設定固定的單元格，去除表格邊框和填充實現的佈局。當然這個佈局非常不建議使用，只是教學瞭解。

--表格應該用它最為語義的地方，就是二維表的資料顯示。

==固定佈局://CSS 部分

body {margin:0;}

table {margin:0 auto;width:960px;border-spacing: 0;}

==流體佈局:表格的固定佈局改成流體佈局非常簡單，只需要設定table 為100%即可。table {width: 100%;}

==浮動佈局:浮動佈局主要採用float和clear 兩個屬性來構建。【固定佈局、流體佈局】【float: left;、float:right;、clear:both;】

流體佈局只要更改body 元素的限定長度為auto 或100%。然後左右兩列分別設定20%和80%即可。

31 CSS 傳統佈局[下]

==定位佈局：position 屬性來實現元素的絕對定位和相對定位。

（

屬性：

--static：預設值，無定位。

--absolute：絕對定位，使用top、right、bottom、left進行位移。【脫離文件流，z-index判定層次關係】

--relative:相對定位，使用top、right、bottom、left進行位移。【佔位偏移】

--fixed:以視窗參考定位，使用top、right、bottom、left 進行位移。【脫離文件流】

）

==//絕對定位，脫離文件流，以視窗文件左上角0,0為起點【absolute】

--所謂脫離文件流的意思，就是本身這個元素在文件流是佔位的。如果脫離了，就不佔有s文件的位置，好像浮在了空中一般，有了層次感。

--由於絕對定位脫離了文件流，出現層次概念。那麼每個元素到底在那一層，會不會衝突覆蓋。這時通過z-index 屬性來判定它們的層次關係。

（z-index：auto【預設層次】、數字【設定層次，數字越大，層次越高】

）

==//以視窗參考定位，脫離文件流，會隨著滾動條滾動而滾動【fixed】

==//相對定位，不脫離文件流，佔位偏移：既要脫離文件流、以父元素為參考點、還必須是絕對定位。

//第一步，將需要設定參考點的父元素設定為相對，且不設定座標【佔位】

body {position: relative;}

//第二步，如果父元素設定了參考點，子元素的絕對定位將以它為基準

header {position: absolute;top: 0px;left:0px;}

==box-sizing：

《我們瞭解到元素盒子如果加入了內邊距padding 和邊框border後，它的總長度會增加。那麼如果這個元素用於非常精確的佈局時，

我們就需要進行計算增減。這其實是比較煩人的操作，尤其是動態設定頁面佈局的時候。》

==CSS3 提供了一個屬性box-sizing，這個屬性可以定義元素盒子的解析方式，從而可以選擇避免掉佈局元素盒子

增加內邊距和邊框的長度增減問題。

（box-sizing

--content-box：預設值，border 和padding 設定後用於元素的總長度。

--border-box：border 和padding 設定後不用於元素的總長度。

）

//設定border-box 讓border 和padding 不在額外增加元素大小

aside {

width: 200px;

height: 500px;

background-color: purple;

padding: 10px;

border: 5px solid red;

box-sizing: border-box; 【不在額外增加元素大小】

float: left;

}

==box-sizing 是CSS3 推出的，各個廠商在實現時設定了私有字首。

//完整形式

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

==resize：CSS3 提供了一個resize 屬性，來更改元素尺寸大小。

（

屬性：

--none：預設值，不允許使用者調整元素大小。

--both：使用者可以調節元素的寬度和高度。

--horizontal：使用者可以調節元素的寬度。

--vertical：使用者可以調節元素的高度。

）

一般普通元素，預設值是不允許的。但如果是表單類的textarea 元素，預設是允許的。

而普通元素需要設定overflow:auto，配合resize 才會出現可拖拽的圖形。

//允許修改

aside {

resize: both;

overflow:auto;

}

32 CSS3 多列布局

【流體多列布局】【columns】

《HTML5 中CSS3 提供的多列布局，通過多列布局我們方便的建立流體的多列布局。》

//如果想用浮動和定位實現流體三列，基本不可能。所以，CSS3 提供了多列布局屬性columns 來實現這個動態變換的功能。

==屬性及版本：CSS3 提供了columns 多列布局屬性等7 個屬性集合，具體如下：

（

--columns：整合column-width 和column-count兩個屬性。

--column-width：定義每列列寬度

--column-count：定義分分列列數

--column-gap：定義列間距

--column-rule：定義列邊框

--column-span：定義多列布局中子元素跨列效果，firefox不支援

--column-fill：控制每列的列高效果，主流瀏覽器不支援

）

《由於column 屬性集尚未納入標準，大多數瀏覽器必須使用廠商字首才能訪問，好在主流的瀏覽器都可以很好的支援了。》

//完整形式

-webkit-columns: 150px 4;

-moz-columns: 150px 4;

columns: border-box;

==屬性解釋：

--columns：包含columns-width 和columns-count這兩種簡寫--//分成四列，每列寬度自適應：-moz-columns: auto 4;

--column-width：用於設定每列的寬度---moz-column-width:200px;【auto、長度值】

這裡設定了200px，有點最小寬度的意思。當瀏覽器縮放到小於200 大小時，將變成1

列顯示。而如果是auto，則一直保持四列。

--column-count：用於設定多少列。//設定列數：-moz-column-count:4;【auto：預設值，表示就1 列。||數值：設定列數】

--column-gap：column-gap 屬性，用於設定列間距//設定列間距-moz-column-gap:100px;【】

--column-rule：設定每列中間的分割線--//設定列邊線-moz-column-rule:2px dashed gray;

（

--column-rule：<寬度> <樣式> <顏色>的邊框簡寫形式。

--column-rule-width：單獨設定邊框寬度

--column-rule-style：單獨設定邊框的樣式。

--column-rule-color：單獨設定邊框的顏色。

《列邊線不會影響到佈局，它會根據佈局的縮放自我調整是否顯示。如果我們把頁面縮放到只能顯示一列時，它自動消失了。》

）

--column-span：設定跨列大標題【none：預設值，表示不跨列。、all：表示跨列。】

//跨列標題，由於火狐尚未支援，固使用webkit---webkit-column-span:all;

（

例項：@charset "utf-8";

div {

-webkit-column-width: 150px;

-webkit-column-count:3;

-webkit-column-gap:50px;

-webkit-column-rule:2px dashed gray;*/

}

h1 {

text-align:center;

-moz-column-span:all;

-webkit-column-span:all;

column-span:all;

}

）

33 CSS3 彈性伸縮佈局[上]

==佈局簡介：CSS3 提供一種嶄新的佈局方式：Flexbox佈局，即彈性伸縮佈局模型(Flexible Box)。用來提供一個更加有效的方式實現響應式佈局。

在發展中，可能還有各種改動，瀏覽器的相容性還存在問題。

div {

display: -moz-box;

display: -webkit-box;

display: box;

}

//通過以上設定，在除了IE 瀏覽器外，佈局實現了水平分佈。

==舊版本:

如果屬性和屬性值為：display:box.屬於舊版本。

--容器屬性display：【box：將容器盒模型作為塊級彈性伸縮盒顯示（舊版本）、inline-box：將容器盒模型作為內聯級彈性伸縮盒顯示（舊版本）】

//塊級它是佔用整行的，類似<div>元素，而內聯級不佔用整行，類似<span>元素。

//設定彈性，以火狐為例

div {

display: -moz-box;

}

==box-orient 屬性：主要實現盒子內部元素的流動方向。

（

屬性：

--horizontal：伸縮專案從左到右水平排列

--vertical:伸縮專案從上到下垂直排列

--inline-axis:伸縮專案沿著內聯軸排列顯示

--block-axis:伸縮專案沿著塊軸排列顯示

）

//設定垂直流動:div{-webkit-box-orient: vertical;}

==box-direction 屬性:主要是設定伸縮容器中的流動順序。【normal：預設值，正常順序、reverse：逆序】

--div {-moz-box-direction: reverse;}

==box-pack屬性：用於伸縮專

HTML5學習總結

1 表格元素

2 分組元素

3 文件元素

4 嵌入元素

5 音訊和視訊

6 表單元素

7 input 元素的type 彙總

8 表單資料驗證和其他元素

9 全域性屬性和其他

10 CSS入門

11 CSS選擇器

12 CSS樣式之偽類選擇器

13 顏色和度量單位

14 CSS文字樣式

15 CSS文字樣式[下]

16 CSS盒模型[上]

17 CSS盒模型[下]

18 CSS 邊框和背景

19 CSS 邊框與背景[下]

20 CSS 表格與列表

21 CSS 其他樣式

22 CSS3 字首和rem

23 CSS3 文字效果

24 CSS3 漸變效果

25 CSS3 邊框圖片效果

26 CSS3 變形效果[上]

27 CSS3 變形效果[下]

28 CSS3 過渡效果

29 CSS3動畫效果

30 CSS 傳統佈局[上]

31 CSS 傳統佈局[下]

32 CSS3 多列布局

33 CSS3 彈性伸縮佈局[上]

相關推薦