H5C3总结
目錄
一、對于html基礎的了解????????
二、圖片、音視頻、鏈接和列表? ??
三、表格表單? ??
四、CSS的基礎認識（包含CSS樣式表、字體樣式、選擇器和外觀）????????
五、標簽的顯示模式、轉化
六、居中、三大特性和盒子模型
七、浮動、定位
八、CSS高級技巧（隱藏、界面樣式顯示、精靈圖和字體圖標）
九、C3部分特點（C3選擇器、顏色和背景）
十、漸變，轉換，過渡，動畫，媒體查詢和彈性布局
一、對于html基礎的了解????????
? ? ? ? 1.?五大主流瀏覽器
? ? ? ? ? 火狐：-Gecko
? ? ? ? ? IE：- Trident
? ? ? ? ? 谷歌：- Webkit ---Blink
? ? ? ? ? safari：Webkit
? ? ? ? ? 歐朋：-Presto--Webkit--Blink
??????????2.瀏覽器內核：
? ? ? ????????? 1、渲染引擎：如何將網頁中的內容和布局展示出來
? ? ? ????????? 2、js引擎：解析JavaScript代碼
????????? 3.web標準：不是單個標準而是一個標準的集合。
? ? ????????? 結構標準：統一規范了HTML
? ? ????????? 表現標準：統一規范了CSS
? ? ????????? 行為標準：統一規范了JS
????????HTML只是一種標記標簽語言，不是編程語言
?????????4.?標簽的分類與關系：
? ? ? ? ????????? 1、按照個數：
? ? ? ? ? ? ????????? ? 單標簽：只有開始標簽或者只有結束標簽 ?<meta>
? ? ? ? ? ? ????????? ? 雙標簽：不僅有開始標簽還有結束標簽 ?<html></html> ?
? ? ? ? ????????? 2、按照結構：
? ? ? ? ? ? ? ? ????????嵌套關系：（父子關系） head--title ? ?子標簽相對于父標簽縮進一個tab鍵位
? ? ? ? ? ? ? ????????? 并列關系：（兄弟關系） meta--title ? ? 對齊即可
? ? ? ? 5.字符集
????????? ? charset="utf-8" ?:UTF -8是目前最常用的字符集編碼方式防止出現亂碼
? ? ? ? 6.文檔類型
????????? ? 表明了當前的文檔是最標準的html5的文檔類型
????????????????<!DOCTYPE html>
??????? 7.結構化表現化標簽
????????????????1、加粗標簽 ?b ?strong
????????????????2、斜體標簽 ?i ?em
????????????????3、下劃線標簽 u ins
????????????????4、刪除線 s ?del
? ? ? ? 8.H5新增的結構化語義化元素
????????????????頭部區域標簽<header>?</header>
????????????????導航標簽<nav> </nav>
????????????????側導航標簽<section> </section>
????????????????文章標簽<article>?</article>
????????????????區間標簽<section>?</section>
????????????????進度條progress
????????????????底部區域標簽<footer>?</footer>
二、圖片、音視頻、鏈接和列表? ??
? ? ? ? 1.圖片標簽 img?
? ? ? ????????? 圖片的屬性
? ? ? ? ? ? ? ? ? ? ? ? ??1、src:路徑
? ? ? ? ? ? ? ? ? ? ? ? ? 2、width:寬度
? ? ????????????????? ? ? 3、height:高度
? ? ????????????????? ? ? 4、title：標題，當光標移入到圖片上時，顯示title的屬性值
? ? ????????????????? ? ? 5、alt:當圖片不顯示時，顯示alt的屬性值
? ? ????????????????? ? ? 6、border:邊框,默認是黑色的
????????2.圖片的路徑
? ? ? ? ? ????????? 1、線上路徑：直接寫服務器上的圖片地址即可
? ? ? ? ? ????????? 2、本地路徑
? ? ? ? ? ? ? ????????（1）相對路徑
? ? ? ? ? ? ????????? ? a、當圖片的位置與當前的html文件在同一目錄下，./圖片名稱
? ? ? ? ? ? ????????? ? b、當圖片的位置在當前的html文件的上一級目錄，../圖片名稱
? ? ? ? ? ? ? ????????? c、當圖片的位置在當前的html文件的下一級目錄，./文件夾名稱/圖片名稱??
? ? ? ? ????????? ? ? （2）絕對路徑
? ? ? ? ? ? ????????? ? 死路徑，不建議使用
? ? ? ? 3.插入音頻和視頻
????????????????1、音頻標簽 ?audio?
??????????????????????屬性；
? ????????????????? ? 控制器：control
? ????????????????? ? 靜音：muted
? ????????????????? ? 循環播放：loop
? ????????????????? ? 自動播放：autoplay
????????????????2、視頻 ?video
? ? ? ? 4.鏈接標簽
? ? ????????? ? ?1、href:跳轉的地址
? ? ? ????????? ? ? ? ? 線上地址
? ? ? ? ? ????????? ? ? 本地地址
? ? ? ? ? ? ????????? ? 未知地址
? ? ? ? ? ????????? 特點:文本自動添加下劃線且字體顏色發生改變
? ? ? ? ????????? 2、target:設置網頁窗口的打開方式
? ? ? ? ? ? ????????? ? ? _blank ? :在新的窗口中打開
? ? ? ? ? ? ? ????????? ? _self ? ?:在當前窗口中打開（默認）
? ? ? ? 5.錨點鏈接
????????? ? ? ? 讓錨點鏈接的a標簽的href屬性值與標題的id屬性值對應且加#號即可?
? ? ? ? 6.常用特殊字符
????????????????空格 ? ? ? ? ??大于 ?>? ? ? ? ? ?小于 ?<? ? ? ? ? ??版權 ©
? ? ? ? 7.列表標簽
? ? ????????? ?1、無序列表 ?ul>li ? ?重點
? ? ????????? ? 每個li前有默認的小點
? ? ????????? ??2、有序列表 ?ol>li
? ? ????????? ? 每個li前有默認的數字序號
? ? ????????? ? 3、自定義列表 dl>dd dt--dd ? 了解
三、表格表單? ??
????????1.表格：統計數據、展示數據
????????????????1.
????????????????表格標簽：table->tr
? ????????????????? ? 行標簽：tr->td
? ? ????????????????? 單元格：td
????????????????2.表格的特點：? ?
? ? ? ? ????????????????? 1、默認是沒有邊框的
? ? ? ? ????????????????? 2、添加邊框屬性后，有默認的邊框與邊框之間的距離
????????????????3.表格的屬性：????????????????
? ? ? ? ????????????????? 1、border:邊框
? ? ? ????????????????? ? 2、cellspacing:邊框與邊框之間的距離
? ? ????????????????? ? ? 3、cellpadding:內容與邊框之間的距離
? ? ????????????????? ? ? 4、align:水平位置 ? left/right/center
? ? ????????????????? ? ? 5、width:寬
? ? ? ????????????????? ? 6、height：高
????????????????4.表格的結構：
? ? ? ????????? ????????? 表格標題 caption
? ? ? ????????????????? ? 表頭:thead ? ?將td換成th ： 有自動加粗居中的效果
? ? ????????????????? ? ? 表格主體：tbody
? ? ? ????????????????? ? 表尾:tfoot (由于瀏覽器的兼容性，后期再說)
? ? 表格的注意事項
? ? ? ? ? table標簽中只能包含caption/thead/tbody/tfood/tr
? ? ????????? ?5.合并單元格的步驟
? ? ????????????????? ? ? 1、先確定是跨行合并還是跨列合并
? ? ? ????????????????? ? 2、跨行合并用rowspan，跨列合并用colspan屬性
? ? ? ????????????????? ? 3、將合并屬性寫在要合并的第一個單元格上
? ? ????????????????? ? ? 4、屬性值就是合并的單元格個數
? ? ? ????????????????? ? 5、將多余的單元格注釋掉
????????????????6.table布局的缺點是？
? ? ? ? ?????????????????a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。
????????????????????????b. 靈活性差，比如要將整個表格CSS設置border等屬性，是不行的，得通過td
????????????????????????c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異?；靵y
????????????????????????d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。
????????????????????????e. 不夠語義，頭部用header,底部用footer……
????????2.表單：用來驗證數據、提交數據
????????????????1.表單的組成部分
? ? ? ? ????????????????? 1、表單標簽 ?form
? ? ? ? ????????? ????????? ? action:表單提交的地址
? ? ? ? ????????? ????????? ? method:表單提交的方式
? ? ? ????????? ? ????????? ? name：沒有特殊含義，給表單起個名字
? ? ? ????????? ????????? 2、表單域
? ? ? ? ????????? ????????? ? a、普通輸入框： <input type="text">
? ? ? ? ????????? ????????? ? b、密碼框：<input type="password">
? ? ? ????????????????? ? ? ? c、單選框：<input type="radio">
? ? ? ????????? ????????? ? ? d、多選框：<input type="checkbox">
? ? ? ? ????????????????? ? ? e、選擇框：<select><option>
? ? ????????? ? ? ????????? ? f、多行文本框:<textarea>
? ? ? ????????? ????????? ? ? g、重置按鈕：<input type="reset">
? ? ? ? ????????????????? ? ? h、普通按鈕：<input type="button">
? ? ????????????????? ? ? 3、提交按鈕
? ? ? ????????????????? ? ? ? <input type="submit">
????????????????2.表單域中的屬性
? ? ? ? ? ????????????????? type:類型，當input控件的type的屬性值不同時，顯示不一樣的效果
? ? ? ????????????????? ? ? value:輸入框或者按鈕的默認的值
? ? ? ????????????????? ? ? name:名字
? ? ????????????????? ? ? ? checked:單選框、多選框的默認選中
? ? ? ? ????????????????? ? ??checked
? ????????? ? ? ????????? ? selected:選擇框的默認選中
? ? ? ????????????????? ? ? ? selected
? ? ????????? ? ????????? ? cols:寬度
? ? ? ? ? ????????????????? rows:高度
? ? ? ? ????????????????? ? disabled:按鈕禁用屬性
? ? ? ? ????????????????? ? ? disabled
????????3.H5新增的表單屬性
????????????????1.
????????????????????????<fieldset> 標簽可以將表單內的相關元素分組。
????????????????????????<fieldset> 標簽會在相關表單元素周圍繪制邊框。
????????????????????????<legend>標簽中文本會在邊框的左上角顯示。
????????????????2.?????新增的屬性：
? ? ????????????????? ? 1、placeholder 占位符 ?提示信息
????????? ????????? ? ? 2、autofocus ? ?頁面加載完成后，自動的獲取某個輸入框的焦點 (只寫屬性即可)
????????????????? ? ? ? 3、required：驗證條件，必填項(只寫屬性即可)在提交表單的時候驗證
????????????????? ? ? ? 4、novalidate ：關閉表單域中所有的驗證，用于表單元素
????????? ????????? ? ? 5、maxlenth:最大長度
????????????????? ? ? ? 6、minlenth:最小長度
????????4.H5新增的表單類型
????????????????1、郵箱 :提交表單時驗證輸入框中的文本是否包含@，且@符號右邊必須有文本? ? ? ? email
????????????????2、地址 ：提交表單時驗證輸入框中的文本是否包含http或者https? ? ? ? url
????????????????3、數字? ? ? ? number
????????????????4、搜索框：會在輸入欄的最右側顯示一個叉號，單擊叉號清空輸入框的內容? ? ? ? search
????????????????5、范圍? ? ? ? range
????????????????6、拾色器? ? ? ? color
????????????????7、時間? ? ? ? time
????????????????8、日期? ? ? ? date
????????????????9、月份? ? ? ? month
????????????????10、提交按鈕? ? ? ? submit
四、CSS的基礎認識（包含CSS樣式表、字體樣式、選擇器和外觀）????????
????????1.CSS初始與樣式表
????????????????1.為什么要使用CSS
? ? ? ????????????????? 1、為了美化網頁
? ? ????????????????? ? 2、標簽中的屬性不能滿足所有樣式的需求
? ? ????????????????? ? 3、標簽中的屬性使結構比較臃腫
? ? ? ????????????????? 4、為了實現結構與樣式的相分離
????????????????2.什么是CSS？
????????????????????????Cascding Style Sheets ?級聯樣式表、層級樣式表
????????????????3.如何使用CSS？
? ? ? ? ????????????????? 1、行內樣式表
? ? ? ????????????????????????? ? <開始標簽 style ='CSS屬性A:CSS屬性值A;CSS屬性B:CSS屬性值B;……'>
? ? ? ? ? ????????????????????????? ? 特點：a、只能適用于單個的元素
? ? ? ? ? ? ? ? ????????????????????????? ? b、沒有實現結構與樣式的相分離
? ? ????????????????? ? ? 2、內部樣式表
? ? ? ? ? ????????????????? ? ????????<style>
? ? ? ? ? ? ????????????????????????? ? 選擇器：{
? ? ? ? ? ? ????????????????????????? ? ?CSS屬性A:CSS屬性值A;
? ? ? ? ? ? ????????????????????????? ? ?CSS屬性B:CSS屬性值B；
? ? ? ? ? ????????????????????????? ? ? }
? ? ? ? ? ? ????????????????????????? </style>
? ? ? ? ? ? ????????????????? 特點：a、適用于選擇器相同的元素
? ? ? ? ? ? ? ? ? ???????????????????????b、部分實現了結構與樣式的相分離
? ? ? ????????????????? ? 3、外部樣式表
? ? ? ? ? ? ????????????????????????? ?<link rel="stylesheet" href="">
? ? ? ? ? ????????????????????????? ? ?rel:鏈接文件的類型
? ? ? ????????????????????????? ? ? ? ?href:鏈接文件的地址
? ? ? ? ???????????????????????特點：a、在整個站點都能適用
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??b、完全實現了結構與樣式的相分離
????????????????4、CSS的樣式
? ? ? ? ????????????????? 1、字體樣式
? ? ? ????????????????? ? 2、外觀樣式
? ? ? ? ????????????????? 3、背景樣式
? ? ? ? ????????????????? 4、尺寸樣式
? ? ? ????????????????? ? 5、盒子模型
? ? ? ????????????????? ? 6、浮動
? ? ? ????????????????? ? 7、定位
? ? ? ? ????????????????? 8、CSS3動畫、過渡、轉化、漸變
????????2.字體樣式屬性
????????????????1、字體大小屬性 ?font-size
? ? ????????????????????普通文本默認字體大小是16px
? ? ? ????????????????? 絕對單位：像素 px ? 一般最小設置12px
? ? ? ????????????????? 相對單位：em ? ? ? ?相對于父元素的大小
? ????????? ? 2、字體家族屬性 ?font-family
? ? ????????????????? ? 普通文本默認字體家族是宋體
? ????????????????? ? ? a、漢字 ?b、英文 ?c、Unicode碼
? ? ????????? 3、字體加粗屬性 ?font-weight
? ????????????????? ? ?普通文本默認字重是400
????????????????? ? ? ?bold--700--bolder
????????? ? ? 4、字體的傾斜屬性 font-style
? ? ????????????????? italic ?oblique
? ? ????????? 5、字體的綜合設置
????????????????? ? ? font: font-style ?font-weight ?font-size ?font-family;
????????3.選擇器
????????????????1、選擇器：通過特定的符號去選擇指定的元素 -->
????????????????2、CSS2選擇器：
? ? ? ? ? ????????? 基礎選擇器：通配符選擇器、標簽選擇器、類選擇器、多類名選擇器、ID選擇器
???????????????????????通配符選擇器 ? *
???????????????????????標簽選擇器 ?直接寫標簽名
???????????????????????類選擇器 ?.類名 ? ? 屬性值可以重復?
???????????????????????多類名選擇器
????????????????????????ID選擇器 ?#ID名 ? 屬性值不能重復，是唯一的
? ? ? ????????? ? ? 復合選擇器：
????????????????????????????????1.交集選擇器、 公共的部分 ? 標簽名.類名
? ? ? ? ? ? ? ????????????????????????????????? 1、一般只用于標簽名與類名的交集
? ? ? ? ? ? ? ????????????????????????????????? 2、不會讓id與其他選擇器進行交集，因為id是唯一的
? ? ? ? ? ? ????????????????????????????????? ? 3、通配符選擇器不與其他選擇器進行交集
?????????????????????????????????2. 并集選擇器
? ? ? ? ? ? ? ????????????????????????????????? ?選擇器1,
? ? ? ? ? ? ? ????????????????????????????????? ?選擇器2,
? ? ? ? ? ? ????????????????????????????????? ? ?選擇器3 {
? ? ? ? ????????????????????????????????????????? ? ? ? ? }
????????????????????????????????? 3.子代選擇器? 父選擇器>子選擇器{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
????????????????????????????????? 4.后代選擇器 ?祖先選擇器 后代選擇器
? ? ????????? ? ? ? 偽類選擇器：
????????????????????????????????a的偽類： :link/:hover/:active/:visited
????????????????????????????????非a標簽適用的偽類：:hover /:active
? ? ? ????????????????????????????????? 1.未連接
? ? ????????????????????????????????????????? ? a:link {
????????????????????????????????????????????????????????}
????????????????????????????????????????清除瀏覽器緩存的快捷鍵 ctrl+shift+del
? ????????????????????????????????? ? ? 2.鼠標移入時
????????????????????????????????????????? ? ? ? a:hover {
????????????????????????????????????????????????????????}
? ? ? ????????????????????????????????? 3.鼠標單擊時
? ????????????????????????????????????????? ? ? a:active {
????????????????????????????????????????????????????????}
? ????????????????????????????????? ? ? 4.訪問過
????????????????????????????????????????????????a:visited {
?????????????????????????????????????????????????????? ?}
????????????????3、類名與ID名規范
? ? ? ? ? ????????? 1、見名知意
? ? ? ? ? ????????? 2、駝峰命名法
? ? ? ? ? ????????? 3、一般英文名稱與下劃線、連接符、加數字結合 ? one_1 ?two-2
????????4.外觀屬性
????????????????1、文本顏色 color
? ? ? ????????????????? a、英文名稱 ?
? ? ????????????????? ? b、rgb ? ?0-255
? ? ????????????????? ? c、十六進制 ? #ffggbb ? ? 0-9 a-f
????????????????2、文本的描述 text-decoration
? ? ? ????????????????? ? 下劃線：underline
? ? ? ? ????????????????? 上劃線：overline
? ? ? ????????????????? ? 刪除線：line-through
????????????????3、首行縮進 text-indent ? ?em
????????????????4、文字間距 letter-spacing
????????????????5、文本相對于標簽的寬度水平居中 text-align ? ? ?center 居中 ?right靠右 ?left 靠左
????????????????6、文本相對于標簽的高度垂直居中 line-height ? height 的屬性值
????????????????7、尺寸屬性
? ????????????????? ? 1、寬度 width
? ????????????????? ? 2、高度 height
????????5.背景
?????????????1、背景色?
? ? ? ????????????????background-color: red;?
? ? ? ????????????????background-color:rgb(0,255,0)?
? ? ? ????????????????background-color:#0000ff
? ? ?????????2、背景圖?
? ? ? ????????????????background-image:url(./images/peiqi.jpeg);
? ????????? ?3、背景圖的平鋪重復屬性
? ? ????????????????? background-repeat: no-repeat;
? ????????? ? 4、背景圖的尺寸屬性 ? x軸 ?y軸?
? ? ? ????????????????background-size:900px 500px;?
? ????????? ? 5、背景圖的位置屬性
? ? ? ? ????????????????? 方位名詞
? ? ? ? ????????????????? 像素
? ? ? ????????????????? ? 百分比
? ????????????????????????? ? background-position: right top;
? ? ????????????????????????? background-position: left bottom;
? ????????????????????????? ? background-position: center;
? ????????????????????????? ? background-position: 400px -100px;
? ? ????????????????????????? background-position: 100% 100%;
五、標簽的顯示模式、轉化
????????1.標簽的顯示模式
?????????????????標簽==元素
?????????????????1.塊狀元素：???????????????????????????????????????????????????????????????????????????????????????????????????????hn/p/div/ol/ul/dl/dd/dd/li/table/caption/thead/tbody/tr/form/header/footer/section/article/nav/aside????????
? ? ? ? ? ? ? ? ? ? ? ??? 特點：
? ? ? ? ? ? ????????????????? 1、有默認的寬高，寬度是父元素的100%，高度是內容撐起來的高度（表格系列標簽除外）
? ? ? ? ? ????????????????? ? 2、寬高可以設置的
? ? ? ? ? ? ????????????????? 3、可以包含任意的元素（表格系列標簽除外、h標簽不能包含h標簽、p不能包含p）
? ? ? ? ? ? ????????????????? 4、獨占一行
????????????????? ? 2.行內元素：span/a/b/strong/i/em/u/ins/s/del
? ? ? ? ????????????????? ? 特點：
? ? ? ? ? ????????????????? ? 1、有默認的寬高，寬高都是內容所撐起來的
? ? ? ? ? ????????????????? ? 2、不能設置寬高
? ? ? ????????????????? ? ? ? 3、只能包含行內元素
? ? ? ? ? ????????????????? ? 4、相鄰的行內元素在同一行上顯示
? ????????????????? ? 3.行內塊元素：img/input/label/select/option/button/textarea
? ? ????????????????? ? ? ? 特點：
? ? ? ? ????????????????? ? ? 1、有默認的寬高
? ? ? ????????????????? ? ? ? 2、可以設置寬高
? ? ? ? ????????????????? ? ? 3、一般不去包含其他元素（select--option）
? ? ? ? ????????????????? ? ? 4、相鄰的行內塊元素在同一行上顯示
????????2.元素之間的轉換
? ? ????????????????? 1.轉換為塊狀元素?
? ? ? ?????????????????????????display: block;?
? ? ???????????????????????? 2.轉換為行內塊元素?
? ? ????????????????????????? display: inline-block;
? ????????????????? ? 3.轉換為行內元素?
? ? ????????????????????????? display: inline;
六、居中、三大特性和盒子模型
? ? ? ? 1.居中屬性
? ? ????????? 1.text-align:center
?????????1、讓塊狀元素中的文本內容、行內元素、行內塊元素相相對于塊狀元素的寬度水平居中
?????????2、不能讓塊狀元素中的塊元素水平居中
?????????3、行內元素設置此屬性無效
? ? ? ????????2.line-height:height的屬性值
?????????1、讓塊狀元素中的文本內容、行內元素、行內塊元素相相對于塊狀元素的高度垂直居中
?????????2、不能讓塊狀元素垂直居中
?????????3、行內元素設置此屬性無效
????????2.CSS的三大特性
????????????????1.層疊性
????????????????? 相同的CSS屬性，后邊的樣式覆蓋前邊的樣式
????????????????? ?長江后浪推前浪，前浪死在沙灘上
? ?????????????????就近元素
? ? ? ? ?????????2.繼承性
????????????????? ?1、后代元素都可以繼承祖先元素的樣式
????????????????? ?2、遵循親代就近優先繼承
????????????????? ?3、元素本身的樣式是大于繼承過來的樣式
????????????????? ?4、寬高是不能繼承的
? ????????? ? ??3.優先級
???????1、同一個元素中：統配符選擇器 < 標簽選擇器 < 類名選擇器 < ID選擇器 < style < !important
????????????????? ?2、權重性
? ? ? ? ?????????????????千位 百位 十位 ?個位
? ? ? ? ? ? ? ? ? ? ? ? ? 標簽 ?0 ? ?0 ? ?0 ? ?1
? ? ??????????????????????類名 ?0 ? ?0 ? ?1 ? ?0
? ? ????????????????????????id ? ?0 ? ?1 ? ?0 ? ?0
? ? ????????????????????????style 1 ? ?0 ? ?0 ? ?0
????????3.盒子模型之邊框
????????????????1.邊框屬性：border?
? ? ? ????????????????? 邊框的尺寸:px
? ? ????????????????? ? 邊框的樣式：實線solid ?虛線dashed ?點線dotted ?雙實線double
? ????????????????? ? ? 邊框的顏色：英文、十六進制、rgb
????????????????2.去掉邊框?
????????????????? ? ? border-bottom: none;
????????????????3.去掉表格邊框默認的距離?
? ? ????????????????? border-collapse: collapse;
????????????????4.
? ? ? ????????????????? 1.網頁布局的本質：拼接盒子的過程 -->
????????????????????????2.盒子模型：邊框、內邊框、外邊距 -->
????????????????????????3.邊框會影響盒子的尺寸
????????4.盒子模型之內外邊距
????????????????1.padding
????????????????????????內邊距：內容與邊框之間的距離?
? ?????????????????????????內邊距會影響盒子的尺寸
????????????????2.? ? ? ?* {
? ?????????????????? /* 清除所有元素默認的內外邊距 */
? ? ????????????????? margin: 0;
? ? ????????????????? padding: 0;
? ????????????????? }
????????????????3.
????????????????????????塊狀元素水平居中條件：
? ? ? ? ? ????????????????1、必須塊狀元素
? ? ? ? ? ????????????????2、必須設置寬度
????????????????4.margin
????????????????????????元素與其他元素或者瀏覽之間的距離?
? ???????????????????????外邊距不會影響盒子尺寸
????????????????5.相鄰塊狀元素的垂直外邊距合并（塌陷）
? ????????????????? ? 當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，
? ? ????????????????? 則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者
????????????????6.嵌套元素的垂直外邊距合并
? ? ? ????????????????對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及上邊框，
? ? ? ????????????????則父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者，
? ? ? ????????????????如何解決？
? ? ? ? ????????????????? 1、添加上邊框
? ? ? ? ????????????????? 2、添加上內邊距
? ? ? ? ????????????????? 3、給父元素添加overflow:hidden屬性
七、浮動、定位
????????1.浮動
????????????????1.標準流：元素按照本身的特性進行排列布局 -->
? ???????????????2.浮動：元素脫離標準流，移動的指定位置的過程 -->
? ???????????????3.浮動的分類：左浮動 float:left ? ?右浮動 float:right -->
? ???????????????4.浮動的初衷：為了實現文字環繞圖片的效果 -->
? ???????????????5.浮動的特點：
? ? ? ????????????????1、添加浮動的元素會漂浮在其他元素之上，不在同一平面上
? ? ? ? ? ????????? ??2、添加浮動的元素不占位置
? ? ? ????????????????3、同時添加浮動的多個元素在同一直線上展示，且在同一平面上
? ? ????????????????? 4、添加浮動的元素不會超出父元素的范圍
? ????????????????? ? 5、添加浮動的元素具有行內塊元素的特征
????????2.清除浮動
????????????????1.為什么要清除浮動？
? ? ? ????????????????浮動的影響，子元素撐不開父元素的高度，因為添加浮動的元素不占位置
?????????????????2.清除浮動：并不是清除浮動，而是清除浮動帶來的影響，也叫閉合浮動 -->
? ? ? ????????? ?3.清除浮動的方法：
? ? ? ????????????????1、額外標簽法：
? ? ? ????????????????? 給父元素添加額外的標簽 ?clear:left清除左浮動 ?clear:right清除右浮動 ?clear:both清除左右浮動
? ? ? ????????????????2、給父元素添加overflow:hidden屬性
? ????????????????? ? 3、偽元素清除
?????????????????????????????4.display: table:會發出BFC，BFC有清除浮動的功能
????????????????4.overflow：hidden的三個作用：
? ? ? ? ? ? ????????? 1、清除嵌套元素外邊距合并所帶來的影響
? ? ? ? ? ? ? ????????2、清除浮動
? ? ? ? ? ? ? ????????3、超出的內容隱藏掉
????????3.定位???????
????????????????定位：將元素固定在一個具體位置上?
????????????????定位的分類：相對定位、絕對定位、固定定位、靜態定位
????????????????邊偏移量：left/right/top/bottom
????????????????????????1.靜態定位 position: static;
????????????????靜態定位:無變化，相當于標準流?
????????????????????????2.相對定位 position: relative;
? ? ? ????????????????? 3.固定定位?position: fixed;
????????????????????????4.絕對定位?position: absolute;
四個方向考慮定位的特點：相對于誰定位、是否脫標、是否占位置、是否超出父元素的范圍?
????????相對定位的特點：
? ? ? ? ? ? ? ?1、相對于元素本身的位置
? ? ? ? ? ? ? ?2、不脫標
? ? ? ? ? ? ? ?3、占位置
? ? ? ? ? ? ? ?4、可以超出父元素的范圍，只跟元素原來的位置相關
????????固定定位的特點：
? ? ? ????????1、相對于瀏覽器定位
? ????????? ? 2、脫標
? ? ????????? 3、不占位置
? ? ? ????????4、可以超出父元素范圍，只跟瀏覽器相關
????????絕對定位的特點：
??????????????1、
? ? ? ? ????????a：如果父元素沒有定位相對于瀏覽器的視口（可視區域）定位
? ? ? ? ????????b: 如果父元素有相對定位，相對于父元素定位（子絕父相）
? ? ? ? ? ? ? 2、脫標
? ? ? ? ? ? ? 3、不占位置的
? ? ? ? ? ? ? 4、可以超出父元素的范圍
????????4.CSS樣式的書寫順序
? ? ? ?????????位置屬性：
? ? ? ? ????????????????position > float > margin
? ? ????????? ? 尺寸屬性：
? ? ? ? ????????????????width/height > border > padding
? ? ? ????????? 背景屬性：
? ? ? ? ????????????????backgroung-color/-image/-size/-repeat/-postion
? ? ????????? ? 外觀屬性：
? ? ? ????????????????? color/text-align/text-indent/text-decoration/line-height/list-style
? ? ????????? ? 字體屬性：
? ? ????????? ????????? font-size/-family/-weight/-style
八、CSS高級技巧（隱藏、界面樣式顯示、精靈圖和字體圖標）
????????1.元素的顯示與隱藏素? ? ?
????????????????元素隱藏
? ?????????????????1、?display: none;
? ? ? ????????????????? 特點：
? ? ? ? ? ????????????????? a.沒有并沒有被刪除掉，只是通過CSS樣式隱藏了
? ? ? ? ? ????????????????? b.不占位置
? ? ? ? ????????元素顯示?
? ? ? ? ?????????????display: block;
????????????????元素隱藏?
? ? ? ????????? ?2、visibility：hidden?
????????????????????????特點：
? ? ? ? ? ????????????????? a.沒有并沒有被刪除掉，只是通過CSS樣式隱藏了
? ? ? ? ? ????????????????? b.占位置
? ? ? ????????? ?元素顯示?
? ? ? ????????? ????????visibility: visible;
????????????????3、改變透明度
? ? ? ? ????????? 0-1 ?0完全透明 ?1完全不透明 ?0.5半透明
? ? ? ? ?????????????????opacity: 0;?
? ? ????????????????? ? background-color: rgba(255, 0, 0, 0);
?????????????????4、overflow:hidden ? 讓超出的子元素隱藏 *
????????2.溢出的文本隱藏
? ? ????????? ?1.?強制英文單詞換行,拆分單詞?
? ? ? ????????????????? word-break: break-all;
? ????????? ? ? 2.單行省略號
???????????????????????強制文本在同一行顯示?
? ? ? ????????????????????????? white-space: nowrap;
? ? ? ?????????????????溢出的文本隱藏掉?
? ? ? ????????????????????????? overflow: hidden;
? ? ? ? ? ? ? ?????????隱藏的部分顯示省略號?
? ? ? ? ????????????????????????text-overflow: ellipsis;
? ? ? ????????? 3.多行省略號
????????????????????????高度自適應
? ? ? ?????????????????????????height: auto;
????????????????????????在第幾行顯示省略號?
? ? ? ????????????????????????? -webkit-line-clamp: 2;
? ? ? ? ?????????????????設置當前盒子為彈性盒模型
? ? ? ????????????????????????? display: -webkit-box;
? ? ? ????????????????? 設置文本的排列方式?
? ? ? ????????????????????????? -webkit-box-orient: vertical;
? ????????????????? ? ? 溢出的文本隱藏掉
? ????????????????? ? ? ????????overflow: hidden;
????????3.用戶界面樣式
????????????????1、鼠標光標樣式
?????????????????????????? <li style="cursor: default">默認的小白</li>
? ? ? ? ? ? ?????? ????????<li style="cursor: pointer">小手</li>
? ? ? ? ? ? ?????????????? <li style="cursor: text">文本</li>
? ? ? ? ? ? ???????????????<li style="cursor: move">移動</li>
????????????????2、輪廓：是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用
????????????????????????去掉輪廓?
? ? ? ? ????????????????????????outline: none;
? ? ? ? ????????????????????????outline: 0;
?????????????????3、防止多行文本框拖拽
????????????????????????style="resize: none"
????????????????4、垂直居中：行內塊元素右側的文本內容或者右側的行內元素相對于行內塊元素垂直居中
????????????????????????style="vertical-align: middle"
?????????????????5、行內塊元素之間有默認的外邊距?如何去掉？
? ? ? ? ? ????????????????1、轉化為塊元素再浮動
? ? ? ? ? ????????????????2、給父元素添加font-size:0
????????????????6、給相鄰的其中一個行內塊元素添加向上外邊距，其余行內塊元素也會受到影響如何解決？
? ? ? ? ? ????????????????vertical-align:top
????????4.精靈圖
????????????????1、為什么使用精靈圖：為了減少服務器的壓力，提高加載速度 -->
? ? ? ? ?????????2、什么是精靈圖？將多張小圖拼接在一張大圖上，通過背景的位置屬性background-position改變位置即可
????????5.字體圖標
????????????????1.unicode引入字體圖標
????????????????????????第一步：引入生成的iconfont.css文件
????????????????????????第二步：挑選相應圖標并獲取字體編碼，應用于頁面
? ? ????????? ? 2.fontclass引入字體圖標
????????????????????????第一步：引入生成的iconfont.css文件
????????????????????????第二步：挑選相應圖標并獲取類名，應用于頁面：
? ????????? ? ? 3.symbol引入字體圖標
????????????????????????第一步：引入生成的iconfont.css文件
????????????????????????第二步：引入生成的iconfont.js文件????????
????????????????????????第三步：挑選相應圖標并獲取類名，應用于頁面
九、C3部分特點（C3選擇器、顏色和背景）
???? ?1.CSS3屬性選擇器
? ? ????????? ? 1.CSS2的選擇器有哪些？
? ? ? ? ? ????????? ? 基礎選擇器：通配符選擇器、標簽選擇器、類名選擇器、多類名選擇器、ID選擇器
? ? ? ? ? ????????? ? 復合選擇器：交集選擇器、并集選擇器、子代選擇器、后代選擇器
? ? ? ? ? ? ????????? 偽類選擇器：:link、:hover、:active、:visited
? ? ????????? ? 2.CSS3的選擇器有哪些？
? ? ? ? ? ? ? ????????屬性選擇器、偽類選擇器、偽元素選擇器
? ????????? ? ? 3.
? ? ? ? ? ? ????????? ? 1、[x] ?選擇所有帶有x屬性的元素 */
? ? ? ? ? ? ? ? ? ????????? ? [fristName] {
? ? ? ? ? ? ? ? ? ? ? ????????? ? ? ? ? background-color: red;
? ? ? ? ? ? ? ? ????????? ? ? }
? ? ? ? ? ? ????????? ? ? 2、[x='y'] 選擇屬性名x=屬性值y的元素
? ? ? ? ? ? ????????? ? ? ? ? [fristName='H'] {
? ? ? ? ? ? ? ? ? ? ????????? ? ? ? ? ? border: 20px solid blue;
? ? ? ? ? ? ????????? ? ? ? ? }
? ? ? ? ? ????????? ? ? ? 3、[x^='y'] 選擇以屬性值y開頭的屬性名為x的元素
? ? ? ? ? ? ? ? ????????? ? ? a[href^='https'] {
? ? ? ? ? ? ? ? ? ? ????????? ? ? ? ? ? background-color: aqua;
? ? ? ? ? ? ? ? ? ? ????????? ? ? ? ? ? font-size: 36px;
? ? ? ? ? ? ? ? ? ? ????????? ? ? ? ? ? font-weight: bolder;
? ? ? ? ? ? ? ????????? ? ? ? }
? ? ? ? ? ? ? ????????? ? 4、[x$='y'] 選擇以屬性值y結尾的屬性名為x的元素?
? ? ? ? ? ? ? ? ????????? ? ? p[href$='com'] {
? ? ? ? ? ? ? ????????? ? ? ? ? ? ? ? ? text-decoration: line-through;
? ? ? ? ? ? ? ????????? ? ? ? }
? ? ? ? ? ? ????????? ? ? 5、[x*='y'] 選擇x的屬性值中包含y?
? ? ? ? ? ? ? ? ????????? ? ? [href*='www'],
? ? ? ? ? ? ? ? ????????? ? ? .box,
? ? ? ? ? ? ? ? ? ????????? ? input[type='text'] {
? ? ? ? ? ? ? ? ? ????????? ? ? ? ? ? ? border: 3px dotted brown;
? ? ? ? ? ? ? ? ????????? ? ? }
? ? ? ? ? ? ? ????????? ? 6、[x|='y'] 屬性值以y-開頭的?
? ? ? ? ? ? ? ????????? ? ? ? [name|='get'] {
? ? ? ? ? ? ? ? ? ????????? ? ? ? ? ? ? background-color: blueviolet;
? ? ? ? ? ? ? ? ? ? ????????? }
????????2.CSS3偽類選擇器
? ? ? ? ????????1、el:last-child ?選擇el元素是其父元素的最后一個子元素
? ? ? ????????? 2、el:first-child 選擇el元素是其父元素的第一個子元素
? ? ? ? ????????3、el:nth-child(n) ?選擇el元素是其父元素的第n個子元素
? ? ? ? ????????4、el:nth-last-child(n) ?選擇el元素是其父元素的第n個子元素,從后往前數
? ? ? ????????? 5、el:nth-of-type(n) 選擇el元素是父元素的第n個el元素
? ? ????????? ? 6、el:nth-last-of-type(n) 選擇el元素是父元素的第n個el元素,從后往前數
????????3.CSS3偽元素選擇器
? ? ????????? ? 1、el::first-letter ?選擇el元素中文本的第一個漢字或者第一個字母
? ? ? ????????? 2、el::first-line 選擇el元素中第一行文本
? ? ? ????????? 3、::after 給當前元素添加子元素，在最后的位置
? ? ? ????????? 4、::before 給當前元素添加子元素，在開頭的位置
? ? ? ? 4.CSS3顏色
? ? ? ? ?????????hsl()
? ? ? ? ? ? ????????? ? ?h:hue 色相、色輪、色調 色相是在色輪上的程度（從0到360）-0（或360）是紅色的，120是綠色的，240是藍色的
? ? ? ? ? ? ? ????????? ? s:saturation 飽和度是一個百分比值; ?0％意味著灰色。100％的陰影是全彩
? ? ? ? ? ? ????????? ? ? l:lightness 亮度 也是一個百分點; ? 0％是黑色的，100％是白色的。
????????5.CSS3陰影
? ? ????????? ? 盒子陰影/文本陰影: box-shadow/text-shadow ? ? 水平陰影 垂直陰影 陰影的模糊距離 影子的顏色?
? ? ? ????????? ?默認陰影的方向是水平向右和垂直向下，改變正負值即可改變方向
????????6.CSS3圓角邊框
? ? ? ????????? border-radius:；
????????7.CSS3三角形
? ? ? ????????? 設置四條相同寬度的邊框（內容為空）
????????8.怪異盒模型
? ? ? ? ????????讓內邊框與邊框不會去影響盒子的尺寸?
? ? ? ? ? ? ????????? ? box-sizing: border-box;
? ????????? ? ? ? 默認值?
? ? ? ? ? ? ????????? ? box-sizing: content-box;
????????9.背景 ? ? ?
? ? ????????? ? 1.背景色的剪切屬性?
? ? ? ? ? ? ????????? ? 內容區域?
? ? ? ? ? ? ? ? ????????? ? ? ? background-clip: content-box;
? ? ? ? ? ? ????????? ? 內容+內邊距區域?
? ? ? ? ? ? ? ????????? ? ? ? ? background-clip: padding-box;
? ? ? ? ? ? ????????? ? 內容+內邊距+邊框區域（默認的）
? ? ? ? ? ? ? ? ? ????????? ? ? background-clip: border-box;
? ? ????????? ? ? 2.背景圖的剪切?
? ? ? ? ? ????????? ? ? 內容+內邊距+邊框區域?
? ? ? ? ? ? ? ? ? ? ????????? ? background-origin: border-box;
? ? ? ? ? ? ? ????????? 內容+內邊距區域（默認的）?
? ? ? ? ? ? ? ? ? ? ????????? ? background-origin: padding-box;
? ? ? ? ? ? ????????? ? 內容區域
? ? ? ? ? ? ? ? ? ? ????????? ? background-origin: content-box;
????????10.BFC
????????? ? ? ? BFC的特點：
? ? ? ? ? ? ???????? ? 1、默認BFC中的盒子垂直排列
? ? ? ? ? ? ? ????????? 2、解決外邊距合并，(overflow、display)
? ? ? ? ? ? ? ????????? BFC是一個獨立的容器，里邊的子元素不受外邊盒子的影響
十、漸變，轉換，過渡，動畫，媒體查詢和彈性布局
????????1.漸變
? ? ? ? ????????1.漸變
? ? ? ? ? ? ????????? ? 漸變：兩種或者多種顏色之間的平穩過渡?
? ? ????????? ? 2.漸變分類
? ? ? ? ? ? ? ????????? ?backgroud-image
? ? ? ? ? ? ????????? ? 線性漸變：linear-gradient ? ?向下/向上/向左/向右/對角方向 ? ? ? ?to top
? ? ? ? ? ? ? ????????? 徑向漸變：radial-gradient ? ?由圓心向四周發射 ? ? ? ?to top ? ? ? ?deg
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????? ? ? ? 默認是橢圓的 ?ellipse?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????? ? ? 圓形：circle
????????2.轉換
? ? ? ????????? 轉換transform：n
? ? ? ? ? ? ????????? 1.平移translate()：X軸：正右負左 ?Y軸：正下負上 ?Z軸：正外負里
? ? ? ? ? ????????? ? 2.旋轉rotate()：默認旋轉中心是盒子的正中心： 正順負逆
? ? ? ? ? ? ? ????????? ?rotateX() 沿著X軸旋轉
? ? ? ? ? ? ? ????????? ? rotateY() 沿著Y軸旋轉
? ? ? ? ? ? ????????? 3.扭曲skew()： X軸：正左負右 ?Y軸：正下負上
? ? ? ? ? ????????? ? 4.縮放拉伸scale()
????????eg：
? ? ????????? ? /* x軸,y軸 ? ? ? 參數是倍數 */
? ? ? ????????? ? ? ? ? transform: scale(0.5, 2);
? ? ? ????????? ? ? ? ? /* 寬度的放大縮小 */
? ? ? ? ? ? ????????? ? transform: scaleX(0.1);
? ? ? ? ? ????????? ? ? /* 高度的放大縮小 */
? ? ? ? ? ????????? ? ? transform: scaleY(2);
? ? ? ? ? ? ????????? ? /* x軸,y軸 ? ?參數是傾斜的度數 */
? ? ? ? ? ? ????????? ? transform: skew(30deg, 20deg);
? ? ? ? ? ? ????????? ? transform: skewX(30deg);
? ? ? ? ? ????????? ? ? transform: skewY(-45deg);
? ? ? ? ? ? ????????? ? /*x軸,y軸 ? ?參數是平移的像素 ? */
? ? ? ? ? ? ????????? ? transform: translate(100px, 100px);
? ? ? ? ????????? ? ? ? transform: translateX(-100px);
? ? ? ? ? ? ????????? ? transform: translateY(-100px);
? ? ? ????????? ? ? ? ? transform: translateZ(400px);
????????3.過渡：元素從一種樣式逐漸改變為另一種的效果
? ? ? ? ????????實現過渡條件：
? ? ? ? ? ? ? ????????? 1、設置過渡的CSS屬性 ? ? ? ?transition-property
? ? ? ? ? ? ? ????????? 2、設置過渡的時間周期 ? ? ? ?transition-duration
? ? ? ? ? ? ? ????????? 3、過渡的時間速度曲線 ? ? ? ?transition-timing-function
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????? ? ? ?ease:默認的 慢快慢 ? ? linear:勻速
? ? ? ? ? ????????? ? ? 4、過渡的延遲 ? ? ? ? ? ? ? ? ? ? ? ?transition-delay
? ????????? ? ? 綜合設置
? ? ? ? ? ? ????????? ? transition:CSS屬性 周期 曲線 延遲
????????4.動畫
? ? ? ????????? ? 設置CSS3動畫的過程
? ? ? ? ? ? ????????? ? ? 1、設置動畫屬性
? ? ? ? ? ? ? ? ? ? ? ????????? ? ? 動畫的名稱 ? ? ? ?animation-name
? ? ? ? ? ? ? ? ? ? ? ? ????????? ? 動畫的周期 ? ? ? ?animation-duration
? ? ? ? ? ? ? ? ? ? ? ? ? ????????? 動畫的時間速度曲線 ? ? ? ?animation-timing-function
? ? ? ? ? ? ? ? ? ? ? ? ????????? ? 動畫的延遲 ? ? ? ?animation-delay
? ? ? ? ? ? ? ? ? ? ? ? ? ????????? 動畫的次數 ? ? ? ?animation-iteration-count ? ? ? ?infinite無限
? ? ? ? ? ? ? ? ? ? ? ? ? ????????? 動畫的暫停 ? ? ? ?animation-play-state: paused;（給子集加個hover）
? ? ? ? ? ? ????????? ? ? 2、設置動畫開始
? ? ? ? ? ? ? ? ? ? ? ????????? ? ? @keyframes 動畫名稱
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????? ? ? 既可用from to，也可用百分比（指時間）
? ? ? ? ? ? ? ? ?????????3、animation-direction 規定動畫是否在下一周期逆向播放，默認是 "normal", ? ? ? ? alternate 逆播放
????????5.媒體類型：screen電腦屏幕，平板電腦，智能手機
? ? ? ????????? @media only screen and (max-width:npx/min-width:npx){
? ? ? ? ? ? ????????? 選擇器:{
? ? ? ? ? ? ? ? ????????? ? ? }
? ? ????????? ? ? ? }
? ? ? ? ?????????rem 相對單位 相當于根元素html字體的大小
????????6.彈性布局（flex） ? ? ? ?
????????????????1.容器：container，彈性布局的父元素 ? ? ? ?屬性
? ? ? ? ????????????????? 1、display:flex ? ?表明了當前的容器是彈性父容器
? ? ? ????????????????? ? 2、flex-direction:row（默認值） | row-reverse | column |column-reverse ? 設置項目排列方向（主軸的方向）
? ? ? ? ????????????????? 3、justify-content:flex-start（默認值） | flex-end | center |space-between | space-around | space-evenly ?設置項目在主軸方向上對齊方式
? ? ? ????????????????? ? 4、align-items:stretch（默認值） | center ?| flex-end | baseline | flex-start ?設置項目在交叉軸方向上對齊方式
? ? ? ? ????????????????? 5、flex-wrap:nowrap（默認值） | wrap | wrap-reverse ? ? 設置超出容器的項目是否換行
? ? ? ? ????????????????? 6、align-content:stretch（默認值） | flex-start | center |flex-end | space-between | space-around | space-evenly ?設置項目換行的對齊方式
????????????????2.項目：item，彈性布局的子元素 ? ? ? ? ? ? 屬性
? ? ? ? ????????????????? 1、order:設置項目沿主軸方向上的排列順序，數值越小，排列越靠前。屬性值為整數，默認是0。
? ? ? ????????????????? ? 2、
? ? ? ? ????????????????? 3、
? ? ? ? ????????????????? 4、 ? ? ? ?
? ? ? ????????????????? ? 5、
? ? ? ????????????????? ? 6、align-self:設置項目在行中交叉軸方向上的對齊方式，
????????????????3.單詞
? ? ? ? ????????????????? flex: v. ?彎曲; 屈伸，活動(四肢或肌肉，尤指為準備體力活動);
? ? ? ? ? ????????????????direction：n. ?方向; 方位; 趨勢; 動向; 方面; 目的; 用法說明; 管理; （電影導演的）指點，指示;
? ? ? ????????????????? ? reverse:v. ?顛倒; 徹底轉變; 使完全相反; 撤銷，廢除(決定、法律等); 使反轉; 使次序顛倒; 交換（位置或功能）; 承認錯誤; （使）倒退行駛; 打對方付費的電話;
? ? ? ????????????????? ? justify:vt. 證明正當; 證明…正確(或正當、有理); 對…作出解釋; 為…辯解(或辯護); 調整使全行排滿; 使每行排齊; 使齊行;
????????????????4.主軸：默認是水平方向
? ????????????????? ? ????????交叉軸：垂直主軸
????????????????5.
????????????????????????任何一個容器都可以指定為Flex布局。
?????????????????????????* .box{display:flex;}
?????????????????????????* 行內元素也可以使用Flex布局
?????????????????????????* .box{display:inline-flex;}
?????????????????????????* Webkit內核的瀏覽器，必須加上-webkit前綴。
?????????????????????????* .box{
?????????????????????????* ?display:-webkit-flex;
?????????????????????????* ?display:flex;
?????????????????????????* }
?????????????????* 注意，設為Flex布局以后，子元素的float，clear和vertical-align屬性失效。
?????????????????* 采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的
?????????????????* 所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
?????????????????* 容器的屬性
?????????????????* flex-direction屬性決定主軸的方向（即項目的排列方向）。row | row-reverse | column | column-reverse;
????????????????? ?flex-wrap屬性默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。 nowrap | wrap | wrap-reverse;
????????????????? ?flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。<flex-direction> || <flex-wrap>;
????????????????? ?justify-content屬性定義了項目在主軸上的對齊方式。flex-start | flex-end | center | space-between | space-around;
????????????????? ?align-items屬性定義項目在交叉軸上如何對齊。flex-start | flex-end | center | baseline | stretch;
? ?????????????????align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。flex-start | flex-end | center | space-between | space-around | stretch;
?????????????????* 項目的屬性
?????????????????* order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。值為<integer>;
????????????????? ?flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。值為<number>
????????????????? ?flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效。值為<number>
????????????????? ?flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間。值為<length>
? ?????????????????flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
????????????????? ?align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。auto | flex-start | flex-end | center | baseline | stretch;
?
總結
- 上一篇： php源码 网页聊天_php即时在线网页
- 下一篇： 数字图像处理 冈萨雷斯（第四版）韦伯比的