前端開發(fā)入門教程，web前端零基礎(chǔ)html5 +css3+前端項目視頻教程
?HTML筆記：
1. !+Enter；快速新建
2. 注釋：ctrl+/ ；再按一次取消；<!--?-->
3.結(jié)構(gòu)?
<html>
<head><title>標題</title>
</head>
<body></body>
</html>
4. 標題標簽：<h1>一級標題</h1>；
1-6級標題，重要程度依次遞減，寫在<body>里
文字加粗，變大
5. 按住alt+標簽里的字：整體刪改標簽
6. 段落標簽：<p>文字</p>
段落之間存在空隙，空隙之間的大小用CSS改變
獨占一行
7. vscode -> 查看 -> 自動換行：實現(xiàn)代碼的長段字符自動換行
8. <br>讓文字強制換行顯示，單標簽
9. 水平線：<hr>
10. 文本格式化標簽：用右邊的突出重要性的強調(diào)語境（語義化）
b：加粗 strong：加粗
u：下劃線 ins：下劃線
i：傾斜 em：傾斜
s：刪除線 del：刪除線
11. 圖片標簽：<img src="" alt="" title="">，單標簽
對標簽的屬性進行設(shè)置：src和alt就是屬性，
src是屬性名，引號是屬性值
./是當前，./img.jpg
一個標簽可以存在多個屬性，屬性之間以空格隔開
屬性有默認值
alt：替換文本，當圖片加載失敗，顯示alt的文本
title：當鼠標懸停時顯示的文本
width和height：只需要設(shè)置一個，另一個自動等比例縮放
12. 絕對路徑、相對路徑：絕對路徑是從盤符開始的路徑：D:/…
一般用相對路徑：從當前文件出發(fā)找目標文件的過程：
同級目錄<img src="目標圖片.gif">或者<img src="./目標圖片.gif">
下級目錄<img src="images/目標圖片.gif">
上級目錄<img src="../目標圖片.gif">；../回到上級目錄
13. 音頻標簽：<audio src="./music.mp3" controls></audio>雙標簽
常見屬性：src音頻的路徑，支持的格式：MP3、Wav、Ogg
controls顯示播放的控件
autoplay自動播放（部分瀏覽器不支持）
loop循環(huán)播放
14. 視頻標簽：<video src="./video.mp4" controls></video>雙標簽：MP4、WebM、Ogg
src視頻的路徑
controls顯示播放的控件
autoplays自動播放（谷歌需配合muted實現(xiàn)靜音播放，即兩個屬性一起寫）
loop循環(huán)播放
15. 鏈接標簽：點擊之后跳轉(zhuǎn)到另一個頁面<a href="./目標網(wǎng)頁。html">超鏈接文本</a>
雙標簽，內(nèi)部可以包裹內(nèi)容
如果需要a標簽點擊之后去指定頁面，需要設(shè)置a標簽的href屬性
當我們寫了超鏈接，但還沒有決定去除，在href里寫#（空鏈接）
href=跳轉(zhuǎn)地址，可以寫自己的html、http網(wǎng)站、或者#
16. 如果要實現(xiàn)打開新的網(wǎng)頁：
target屬性，目標網(wǎng)頁的打開形式；_self默認值，在當前窗口跳轉(zhuǎn)（覆蓋原網(wǎng)頁）
_blank在新窗口跳轉(zhuǎn)（保留原網(wǎng)頁）
17. 命名：index.html首頁
18. 列表標簽：無序列表、有序列表、自定義列表
沒有順序的新聞：無序列表
<ul>表示無序列表的整體，用于包裹li標簽
<li>表示無序列表的每一項，用于包含每一行的內(nèi)容
ui標簽中只允許包含li標簽，li標簽可以包含任意內(nèi)容
顯示特點：列表的每一項前默認顯示圓點標識
<ul><li>內(nèi)容1</li><li>內(nèi)容2</li></ul>
有明確排序的排行榜：有序列表
<ol><li>內(nèi)容</li></ol>
列表的每一項前默認顯示序號
有結(jié)構(gòu)的，最下面幫助中心等等：自定義列表
dl表示自定義列表的整體，用于包裹dt/dd標簽
dt表示自定義列表的主題
dd表示自定義列表的針對主題的每一項內(nèi)容，dd前默認縮進，css可以設(shè)計
<dl><dt>幫助中心</dt>
<dd>內(nèi)容1</dd>
</dl>
19. 表格標簽：
table 表格整體，可用于包裹多個
tr表示每行，可用于包裹td
td表示單元格，可用于包裹內(nèi)容
標簽的嵌套關(guān)系：table > tr > td
border 數(shù)字 邊框?qū)挾?/p>
width 數(shù)字 表格寬度，height 數(shù)字 表格高度，但一般在css里設(shè)置
caption 表格大標題，寫在table內(nèi)部；th 表頭單元格，表示一列小標題
thead表格頭部，tbody表格主體，tfoot表格底部，在table內(nèi)部，在tr外面
合并單元格（水平或垂直多個單元格合并成一個單元格）
跨行合并（垂直合并成一個）
跨列合并（水平合并成一個）
1. 明確合并哪幾個單元格
2. 通過左上原則，確定保留誰刪除誰（上下-留上刪下）
3. 給保留的單元格設(shè)置：跨行rowspan跨列colspan
4. 只有同一個結(jié)構(gòu)標簽中的單元格才能合并
例子：
<table border="1" width="500" height="300">
<caption><h3>表格大標題</h3></caption>
<thread>表格頭部
<tr>
<th>內(nèi)容</th>
</tr></thread>
<tbody>表格主體
<tr>
<td colspan="3">合并</td>
<td rowspace="2">合并<td>
</tr></thread>
</tbody>
<tfoot>表格底部
</tfoot>
</table>
20. 表單標簽：登錄注冊、搜索功能
1. input系列標簽：收集用戶信息，如登錄頁、注冊頁
text 文本框，用于輸入單行文本
//placeholder 占位符。提示用戶輸入內(nèi)容
password 密碼框，用于輸入密碼
radio 單選框，用于多選一
//name 分組。有相同name屬性值的單選框，只能選一個
//checked默認選中
checkbox 多選框，用于多選多
file 文件選擇，用于之后上傳文件
//multiple選擇多個文件上傳
submit 提交按鈕，用于提交
//默認文本是提交，用value改按鈕上的字
reset 重置按鈕，用于重置
button 普通按鈕，默認無功能，配合js添加功能
2. 表單預(yù)標簽：<form action="">，input的父級
3. button按鈕標簽：在網(wǎng)頁中顯示用戶點擊的按鈕，同input按鈕系列
submit，reset，button
谷歌瀏覽器中button默認是提交按鈕
button標簽是雙標簽，便于包裹其他內(nèi)容（文字、圖片等）
4. select下拉菜單標簽：提供多個選項的下拉菜單表單控件
select標簽：下拉菜單的整體
option標簽：下拉菜單的每一項
selected：下拉菜單的默認選中<option selected></option>
<select><option>選項1</option></select>
5. textarea文本域標簽：提供可輸入多行文本的表單控件
標簽名：textarea
常見屬性：cols規(guī)定可見寬度，rows規(guī)定可見行數(shù)（用css設(shè)置）
特點：右下角拖拽改變大小
6. label系列：用于綁定內(nèi)容與表單標簽的關(guān)系
使用方法1：使用label標簽把內(nèi)容包裹；
在表單標簽添加id屬性；
在label標簽的for屬性中設(shè)置對應(yīng)的id屬性值
<input tyoe="radio" name="sex" id="nan"><label for="nan">男</label>
使用方法2：直接使用label標簽把內(nèi)容和表單標簽一起包裹起來；
需要把label標簽的for屬性刪除即可
<label><input type="radio" name="sex">女</label>
21. 語義化標簽
1. 沒有語義的布局標簽-div和span（頻繁使用）（都是雙標簽）
div標簽：一行只顯示一個
span標簽：一行顯示多個
2. 有語義的布局標簽：手機端網(wǎng)頁制作
header網(wǎng)頁頭部；nav網(wǎng)頁導(dǎo)航；footer網(wǎng)頁底部；
aside網(wǎng)頁側(cè)邊欄；section網(wǎng)頁區(qū)塊；article網(wǎng)頁文章
22. 字符實體：通過字符實體展示特殊符號，結(jié)構(gòu)：&英文
空格  ，等等
/////////////////////////////////////////////////////////////////////////////////////////////
CSS筆記：層疊樣式表，決定樣式
1. css寫在style標簽中，style標簽中，style一般寫在head標簽里，
<head><style>p{css屬性}</style></head>
p{color：red;
font-size：30px;
background-color:green//背景顏色
width:400px;height:400px}
選擇器：查找標簽
2. CSS引入方式：
1. 內(nèi)嵌式：CSS寫在style標簽中，在head標簽中（當前頁面，小案例）
2. 外鏈式：寫在.css文件中，通過link標簽在網(wǎng)頁中引入（多個頁面，項目中）
格式：在css文件中p{CSS屬性}，
html文件head里<link rel="stylesheet" href="./my.css">
stylesheet：關(guān)系式樣式表
3. 行內(nèi)式：CSS寫在標簽的style屬性里（當前標簽，配合js使用）
格式<div style="CSS屬性">
3. 基礎(chǔ)選擇器：
1.?標簽選擇器：標簽名{css屬性名：屬性值；}以標簽名命名的選擇器
選中所有的這個標簽都生效css
<body><p>內(nèi)容</p></body>
2. 類選擇器：.類名{css屬性名：屬性值；}類：定義和使用才能生效
<div class=“類名”>類名只由數(shù)字、字母、下劃線、中劃線組成
不能以數(shù)字或中劃線開頭；
一個標簽可以同時有多個類名，類名之間空格隔開
3. id選擇器：結(jié)構(gòu)：#id屬性值{css屬性名：屬性值；}
<div id="css屬性名">
配合js加動畫/互動的，只能單獨使用
4. 通配符選擇器：*{css屬性名：屬性值}找到頁面中所有的標簽，設(shè)置樣式
使用極少，只有極特殊情況才會使用
*可以用來設(shè)置字體、默認行間距等
5. 字體和文本樣式：
字體大?。簩傩悦篺ont-size，取值：數(shù)字+px
谷歌瀏覽器默認文本16px
字體粗細：屬性名：font-weight，
取值：關(guān)鍵字：normal正常、bold加粗；
純數(shù)字100~900整百數(shù)，400正常，700加粗
字體傾斜：font-style，
取值：正常（默認值）normal，傾斜italic
字體系列：font-family，
取值：具體字體（微軟雅黑）、字體系列（sans-serif）
渲染規(guī)則：按順序查找，若電腦未安裝，顯示下一個字體
字體系列不需要引號包裹
（1）無襯線字體sans-serif：黑體、Arial（網(wǎng)頁最常用）
（2）襯線字體：宋體、Times New Roman
（3）等寬字體：Consolas、fira code（每個字寬度相等）
font-family:微軟雅黑，黑體，sans-serif
意思是若用戶沒有微軟雅黑，則用黑體；若無黑體，用任意無襯線字體
*樣式的層疊問題：給同一個標簽設(shè)置了相同的樣式，樣式會層疊（覆蓋），最下面生效
*CSS層疊樣式表，即疊加，表示樣式可以一層一層層疊覆蓋
字體font相關(guān)屬性的連寫：font（復(fù)合屬性）
取值：font：style weight size family；
只能省略前兩個，省略為默認值
同時設(shè)置單獨和連寫：單獨寫在連寫下面，或單獨樣式寫在連寫里面
*復(fù)合屬性：一個冒號后面書寫多個值的寫法，空格隔開
文本縮進：text-indent，取值：數(shù)字+px；數(shù)字+em
（1em=當前標簽的font-size的大?。?/p>
文本水平對齊方式：text-align 取值：left左對齊、center居中對齊、right右對齊
*text-align：center能讓文本、span標簽、a標簽、input標簽、img標簽水平居中，
*如果需要以上元素水平居中，text-align：center需要給以上元素的父元素設(shè)置
文本修飾：text-decoration，
取值：underline下劃線（常用）、
line-through刪除線（不常用）、
overline上劃線（幾乎不用）、
none無裝飾線（常用）
行高：line-height控制一行的上下行間距
*行高：上間距+文本高度+下間距
取值：數(shù)字+px、倍數(shù)（當前標簽font-size，即自己字號的倍數(shù)）
應(yīng)用：1. 讓單行文本垂直居中可以設(shè)置line-height：文字父元素高度
2.網(wǎng)頁精準布局時，會設(shè)置line-height：1. 可以取消上下間距
行高與font連寫的注意點：
如果同時設(shè)置了行高和font連寫，注意覆蓋問題
font：style weight size/line-height family;
*注意字號和行高之間是斜線
4. Chrome調(diào)試工具：鼠標右鍵空白位置->檢查，或者F12
左邊elements：標簽，右邊是CSS；鼠標放在左邊，看右邊會顯示對應(yīng)CSS
可以調(diào)試的錯誤：1. 層疊覆蓋；2. 語法錯誤；
3. 鼠標放在CSS的值上，用方向鍵上下調(diào)整，確定好返回去改代碼
4. 按一下tab鍵，可以換行，換行后可以調(diào)試新的代碼，可以用代碼提示
5. CSS每一行前面有√，可以調(diào)試去掉效果
6. 刪除線：注釋、覆蓋
5. 拓展 顏色常見取值：
屬性名：如文字顏色color，背景顏色background-color
屬性值：
顏色表示方式 表示含義 屬性值
關(guān)鍵詞 預(yù)定義的顏色名 red
rgb表示法 ??紅綠藍三原色，每項取值范圍0~255 rgb(0,0,0)
rgba表示法 紅綠藍三原色+a表示透明度，取值范圍0-1 rgba(255,255,255,0.5)
十六進制表示法 #開頭，將數(shù)字轉(zhuǎn)換成十六進制表示???#000000
6. 標簽水平居中方法總結(jié)margin：0 auto（復(fù)合屬性）
如果需要讓div、p、h（大盒子）水平居中？
可以通過margin：0 auto；實現(xiàn)
*注意：1. 如果需要讓div、p、h（大盒子）水平居中，直接給當前
2. margin：0 auto一般針對于固定寬度的盒子
7. 綜合案例：
1. 新聞網(wǎng)頁案例：
<style>div{
width:800px; height:600px; background-color:pink; margin:0 auto;}
h1{
text-align:center;}
.color1{…}
a{text-decoration:none;}
首行段落縮進.suojin{text-indent:2em;}
</style>
/////////////////////////////////////////
<body><h1>標題</h1>
<p class="center"><span class="color1">內(nèi)容</span></p>
<a href="#">超鏈接</a>
<p class="縮進">文章內(nèi)容</p>
</body>
2. 小米官網(wǎng)卡片案例：圖片的設(shè)置
<style>body{background-color:#f5f5f5;}
<!-- div用來網(wǎng)頁布局，一個頁面可能用無數(shù)次，
原則：如果使用div，盡量使用類名控制樣式 -->
.goods{
width:234px;height:300px;background-color:#fff;margin:0 auto;text-align:center}
<!--給父級加 text-align:center居中-->
<!--標簽居中是margin，內(nèi)容居中是text-align>
img{
width:168px;}
.title{ont-size:14px;line-height:25px}
.info{color:#ccc;font-size:12px;line-height:30px;}
.money{color:#ffa500;}
</style>
<body>
<div class="goods">商品圖片</div>
<div class="title">商品名</div>
<div class="info">商品描述</div>
<div class="money">金額</div>
</body>
/////////////////////////////////////////////////////////////
8. 選擇器進階：
1. 后代選擇器：空格
作用：根據(jù)HTML標簽的嵌套關(guān)系，選擇父元素 后代中 滿足條件的元素
選擇器語法：選擇器1 選擇器2{css}
結(jié)果：在選擇器1所找到標簽的所有后代中，
例子：<div><p>這是div的兒子p</p><div>
div p{color:red;}
2. 子代選擇器：>
作用：根據(jù)HTML標簽的嵌套關(guān)系，選擇父元素 子代中 滿足條件的元素
選擇器語法：選擇器>選擇器2（css）
結(jié)果：在選擇器1所找到標簽的子代（兒子）中，找到滿足選擇器2的標簽，設(shè)置樣式
注意：子代只包括兒子，子代選擇器中，選擇器與選擇器之前通過>隔開
例子：<div><a href="#">這是div里面的a</a>
<p><a href="#">這是p里面的a</a></p></div>
div a{color:red;}（兩個a都執(zhí)行）
div>a{color:red;}（只有第一個a執(zhí)行）
3. 并集選擇器：，
作用：同時選擇多組標簽，設(shè)置相同的樣式
選擇器語法：選擇器1，選擇器2{css}
4. 交集選擇器：緊挨著
作用：選中頁面中 同時滿足 多個選擇器的標簽
選擇器語法：選擇器1選擇器2{css}，出現(xiàn)類名在前面加“.”
結(jié)果：（既又原則）找到頁面中既被選擇器1選中，又被選擇器2選中的標簽
注意：交集選擇器中的選擇器之間是緊挨著的，沒有東西分隔
交集選擇器中如果有標簽選擇器，必須寫在最前面
5. hover偽類選擇器：
作用：選中鼠標懸停在元素上的狀態(tài)，設(shè)置樣式
選擇器語法：選擇器:hover{css}
注意點：偽類選擇器選中的元素的某種狀態(tài)
例子：<a href="#">超鏈接</a>
a:hover{color:red;background-color:green}
<!--懸停時出現(xiàn)效果-->
6. Emmet語法：
作用：通過簡寫語法，快速生成代碼
語法：類似于剛剛學(xué)習(xí)的選擇器的寫法
////////////////////////////////////////////////////
記憶 示例 效果
標簽名 div <div></div>
類選擇器 .red <div class="red"><.div>
id選擇器 #one <div id="one"><div>
交集選擇器 p.red#one <p class="red" id="one"></p>
子代選擇器 ul>li <ul><li></li><ul>
內(nèi)部文本 ul>li{li的內(nèi)容} <ul><li>li的內(nèi)容</li></ul>
創(chuàng)建多個 ul>li*3 <ul><li></li><li></li><li></li><ul>
////////////////////////////////////////////////////
9. 背景相關(guān)屬性：
背景顏色background-color（bgc）：關(guān)鍵字、rgb、rgba、十六進制
注意：背景顏色默認透明
背景圖片background-image（bgi）：url（“圖片路徑”）；
注意：可以省略引號，默認在水平和垂直方向平鋪
背景平鋪background-repeat（bgr）：repeat（水平和垂直方向都平鋪）、
no-repeat（不平鋪）、repeat-x（水平方向平鋪）、repeat-y（垂直…）
背景位置background-position（bgp）：水平方向位置 垂直方向位置
屬性值： 1. 方位名詞（最多只能表示9個位置）
（水平方向left、center、right）
（垂直方向top、center、bottom）
2. 數(shù)字+px（坐標）
（坐標系：原點(0,0)盒子的左上角、x軸（水平向右）、y軸（垂直向下））
（操作：將圖片左上角與坐標點重合即可）
背景相關(guān)屬性連寫background（bg）：單個屬性值的合寫，取值之間以空格隔開
推薦順序：color image repeat position
注意：設(shè)置單獨樣式：連寫的下面/里面
*img標簽和背景圖片的區(qū)別：
需求：需要在網(wǎng)頁中展示一張圖片的效果？
方法一：直接寫上img標簽即可（不設(shè)置寬高默認原尺寸）
方法二：div標簽+背景圖片（需要設(shè)置div的寬高，背景圖不能撐開div標簽）
10. 元素顯示模式：
1. 塊級元素：
顯示特點：
1. 獨占一行（一行只能顯示一個）
2. 寬度默認是父元素的寬度，高度默認由元素撐開
3. 可以設(shè)置寬高
代表標簽：div、p、h系列、ul、li、dl、dt、dd、form、header
2. 行內(nèi)元素：
顯示特點：
1. 一行可以顯示多個
2. 寬度和高度默認由內(nèi)容撐開
3. 不可以設(shè)置寬高
代表標簽：a、span、b、u、i、s、strong、ins、em、del……
3. 行內(nèi)塊元素：
顯示特點：
1. 一行可以顯示多個
2. 可以設(shè)置寬高
代表標簽：input、textarea、button、select…
特殊情況：img標簽有行內(nèi)塊元素特點，但是Chrome調(diào)試工具中顯示是inline
4. 元素顯示模式轉(zhuǎn)換：
目的：改變元素默認的顯示特點，讓元素符合布局要求
語法：
屬性 效果 使用頻率
display:block 轉(zhuǎn)換成塊級元素 較多
display:inline-block 轉(zhuǎn)換成行內(nèi)塊元素 較多
display：inline 轉(zhuǎn)換成行內(nèi)元素 極少
*HTML嵌套規(guī)范注意點：
塊級元素一般作為大容器，可以嵌套：文本、塊級元素、行內(nèi)元素、行內(nèi)塊元素…
但是：p標簽中不要嵌套div、p、h等塊級元素
a標簽內(nèi)部可以嵌套任何元素
但是：a標簽不能嵌套a標簽
11. CSS特性：
1. 繼承性：子元素有默認繼承父元素樣式的特點
可以繼承的常見屬性（文字控制屬性都可以繼承）
1. color、font、text、line-height…?
不是控制文字的都不能繼承、標簽有自帶屬性不能被繼承
2. 層疊性：選擇器優(yōu)先級相同時，才能通過層疊性判斷結(jié)果
*******************************
12. 綜合案例1
<style>w100+h500+bgc</style>
<body>a*5
//alt+shift+鼠標左鍵，選多行加內(nèi)容刪除
</body>
13. 綜合案例2
display: inline-block//轉(zhuǎn)行內(nèi)塊
*******************************
3. 優(yōu)先級：不同選擇器具有不同的優(yōu)先級，優(yōu)先級高的選擇器樣式會覆蓋優(yōu)先級低選擇器樣式
優(yōu)先級公式：（誰更精準，優(yōu)先級越高）
**繼承<通配符選擇器<標簽選擇器<類選擇器<id選擇器<行內(nèi)樣式<important
注意：
1. !important寫在屬性值的后面，分號的前面
2. !important不能提升繼承的優(yōu)先級，繼承優(yōu)先級最低
3. 實際開發(fā)中不建議使用!important
4. 權(quán)重疊加計算：
場景：如果是復(fù)合選擇器，此時需要通過權(quán)重疊加計算方式，判斷最終哪個選擇器優(yōu)先級最高會生效
權(quán)重疊加計算公式：（每一級之間不存在進位）
（0,0,0,0）
（行內(nèi)個數(shù)，id個數(shù)，類個數(shù)，標簽個數(shù)）
14.?PxCook的基本使用：測量工具，創(chuàng)建->拖入圖片->測量
- 盒子模型：
- 盒子模型的介紹
- 盒子的概念
- 頁面中的每一個標簽，都可看作是一個盒子，通過盒子的視角布局
- 瀏覽器在渲染（顯示）網(wǎng)頁時，會將網(wǎng)頁中的元素看做是一個個矩形區(qū)域
- 盒子模型：CSS中規(guī)定每個盒子分別由內(nèi)容區(qū)域（content）、內(nèi)邊距區(qū)域（padding）、邊框區(qū)域（border）、外邊距區(qū)域（margin）構(gòu)成
- 例子：
- div{文本屬性，邊框線border屬性，內(nèi)邊距padding屬性，外邊距margin屬性}
- 在Chrome調(diào)試工具中，CSS的Computed中可以看到所有尺寸
- 內(nèi)容區(qū)域
- 寬度和高度：width、height
- 邊框border：
- 屬性名：border（復(fù)合屬性）
- 屬性值：10px solid red（粗細、線條樣式、線條顏色）dashed虛線、dotted點線
- 快捷鍵：bd+tab
- 單方向設(shè)置：border-方位名詞：屬性值
- 單個屬性設(shè)置：粗細border-width，樣式border-style，顏色border-color
- border會撐大盒子的尺寸
- 布局順序：從上到下，從外到內(nèi)，先寬高背景色，放內(nèi)容，調(diào)節(jié)內(nèi)容的位置，控制文字細節(jié)
- 內(nèi)邊距padding：
- 會撐大盒子的尺寸
- padding：50px
- 可當做復(fù)合屬性，單獨設(shè)置某個方向的內(nèi)邊距：
- padding：1px 2px 3px 4px（上右下左）順時針
- 三個值：上 左右 下
- 兩個值：上下 左右
- 自動內(nèi)減：給盒子設(shè)置屬性box-sizing：border-box
- 外邊距margin：和內(nèi)邊距一樣
- 清除默認內(nèi)外邊距：
- *{margin：0；padding：0；box-sizing：border-box}
- （在開發(fā)項目中一定要加的代碼！）
- 版心居中：網(wǎng)頁的有效內(nèi)容居中
- margin：0 auto；//上下為0，左右為自動
- 外邊距折疊現(xiàn)象：
- 合并現(xiàn)象：垂直布局的塊級元素，上下的margin會合并（兩者距離為較大值-避免）
- 塌陷現(xiàn)象：互相嵌套得到塊級元素，子元素的margin-top會影響父元素
- 給父級設(shè)置border：如果設(shè)計沒有border-top
- 給父元素設(shè)置overflow：hidden：最好的解決方法
- 轉(zhuǎn)換成行內(nèi)塊元素
- 設(shè)置浮動
- 行內(nèi)元素的內(nèi)外邊距的問題：margin padding
- 如果想要通過margin或padding改變行內(nèi)標簽的垂直位置，無法生效
- 行內(nèi)標簽的margin-top和bottom不生效
- 行內(nèi)標簽的padding-top和bottom不生效
- 解決方法：加行高：line-height：100px
- 結(jié)構(gòu)偽類：能夠使用結(jié)構(gòu)偽類選擇器在HTML中定位元素
- 作用與優(yōu)勢：
- 作用：根據(jù)元素在HTML中的結(jié)構(gòu)關(guān)系查找元素
- 優(yōu)勢：減少對于HTML中類的依賴，有利于保持代碼整潔
- 場景：常用于查找某父級選擇器中的子元素
- 選擇器 說明
- E：first-child{}：匹配父元素中第一個子元素，并且是E元素
- E：last-child{}：最后一個子元素
- E：nth-chil（n）{}：n為數(shù)字，找第n個子元素
- E：nth-last-child（n）{}：找倒數(shù)第n個子元素
- 注意：n可以填常見公式，n為0、1、2、3、4、5……
- 偶數(shù)：2n、even
- 奇數(shù)：2n+1、2n-1、odd
- 找到前五個：-n+5
- 找到從第五個往后：n+5
- 四的倍數(shù)：4n
- 偽元素：能夠使用偽元素在網(wǎng)頁中創(chuàng)建內(nèi)容
- 偽元素：一般頁面中的非主體內(nèi)容可以使用偽元素
- 區(qū)別：
- 元素：HTML設(shè)置的標簽
- 偽元素：CSS設(shè)置的標簽
- 偽元素 作用：裝飾性的不重要的小圖
- .父類::before：在父元素內(nèi)容的最前添加一個偽元素
- ::after：在父元素內(nèi)容的最后添加一個偽元素
- 注意：
- 在偽元素CSS中必須有content屬性才能生效
- 偽元素默認是行內(nèi)元素
- 標準流：
- 又稱為文檔流，是瀏覽器在渲染顯示網(wǎng)頁內(nèi)容時默認采用的一套排版規(guī)則，規(guī)定了應(yīng)該以何種方式排列元素
- 常見標準流排版規(guī)則
- 塊級元素：從上往下，垂直布局，獨占一行
- 行內(nèi)元素/行內(nèi)塊元素：從左往右，水平布局，空間不夠自動折行
- 浮動
- 浮動的作用：
- 圖文環(huán)繞
- img{float：left}
- 網(wǎng)頁布局：塊在一行排列
- 一個float：left；一個float：right
- 浮動的特點：
- 浮動元素會脫離標準流，在標準流中不占位置（相當于從地面票到空中）
- 浮動元素比標準流高半個級別，可以覆蓋標準流中的元素
- 浮動找浮動，下一個浮動元素會在上一個浮動元素后面左右浮動
- 浮動的標簽頂對齊，用margin-top往下
- 浮動元素特殊的顯示效果
- 一行可以顯示多個
- 可以設(shè)置寬高
- 具有行內(nèi)塊特點
- 浮動的元素不能通過text-align：center或者margin:0 auto 居中，盒子無法水平居中
- *要在版心居中之后在里面浮動
- CSS書寫順序：瀏覽器執(zhí)行效率更高
- 浮動/display
- 盒子模型：margin border padding 寬高背景色
- 文字樣式
- 導(dǎo)航欄：div>ul>li（display）
- 清除浮動：清除浮動帶來的影響
- 影響：如果子元素浮動了，此時子元素不能撐開標準流的塊級父元素
- 原因：子元素浮動后脫標-> 不占位置
- 目的：需要父元素有高度，從而不影響其他元素
- 方法：
- 直接設(shè)置父元素高度
- 優(yōu)點：簡單、方便
- 缺點：有些布局中不能固定父元素高度，如新聞列表、京東推薦模塊
- 額外標簽法
- 操作：在父元素內(nèi)容的最后添加一個塊級元素，給添加的塊級元素設(shè)置clear:both（class=“clearfix”）（清除左右兩側(cè)的浮動的影響）
- 缺點：會在頁面中添加額外的標簽，讓頁面的HTML結(jié)構(gòu)變得復(fù)雜
- 單偽元素清除法
- 操作：用偽元素替代額外標簽
- 基本寫法：
- .clearfix::after{content:'';sidplay:block;clear:both}
- 補充：height:0;visibility:hidden;
- 解釋：偽元素添加的行內(nèi)，要求塊，要加display:block轉(zhuǎn)為塊元素；瀏覽器解析的兼容性不同，visibility:hidden，在高版本不受印象
- 優(yōu)點：項目中使用，直接給標簽加類即可清除浮動
- 單偽元素法和額外標簽法的原理相同
- 雙偽元素清除法
- 操作：.clearfix::before，::clearfix::after{content:'';display:table;}.clearfix::after{clear:both;}
- 優(yōu)點：項目中使用，直接給標簽加類即可清除浮動
- .clearfix::before作用是解決外邊距塌陷問題。
- 給父元素設(shè)置overflow:hidden
- 操作：直接給父元素設(shè)置
- 優(yōu)點：方便
- 定位：
- 網(wǎng)頁常見布局方式：
- 標準流：
- 塊級元素獨占一行->垂直布局
- 行內(nèi)元素/行內(nèi)塊元素一行顯示多個->水平布局
- 浮動：可以讓原本垂直布局的塊級元素變成水平布局
- 定位：
- 可以讓元素自由擺放在網(wǎng)頁的任意位置
- 一般用于盒子之間的層疊情況
- 定位的常見應(yīng)用場景：
- 可以解決盒子與盒子之間的層疊問題
- 可以讓盒子始終固定在屏幕中的某個位置
- 定位的步驟：
- 設(shè)置定位方式：
- 屬性名position
- 定位方式 ：屬性值
- 靜態(tài)定位：static
- 相對定位relative
- 絕對定位：absolu
- 固定定位：fixed
- 設(shè)置偏移量
- 偏移值設(shè)置分為兩個方向，水平和垂直方向各選一個使用即可
- 選取的原則一般是就近原則
- left、right、top、bottom：數(shù)字+px
- 如果left和right都有，以left為準；top和bottom都有，以top為準
- 相對定位：自戀型
- 介紹：相對于自己之前的位置進行移動
- 代碼：position:relative;
- 特點：
- 需要配合方位屬性實現(xiàn)移動
- 占有原來的位置（不脫標）
- 仍然具體標簽原有的顯示模式特點
- 相對于自己原來位置進行移動
- 應(yīng)用場景：
- 配合絕對定位組CP（子絕父相）
- 用于小范圍的移動
- 備注：絕對定位查找父級的方式：就近找定位的父級，如果逐層查找不到這樣的父級，就以瀏覽器窗口為參照進行定位
- 絕對定位：拼爹型
- 相對于非靜態(tài)定位的父元素進行定位移動
- 代碼：position:absolute;
- 特點：
- 需要配合方位屬性實現(xiàn)移動
- 默認相對于瀏覽器可視區(qū)域進行移動
- 在頁面中不占位置->已經(jīng)脫標
- 改變標簽的顯示模式特點
- 應(yīng)用場景：
- 配合絕對定位組CP（子絕父相）
- 備注：
- 先找已經(jīng)定位的父級，如果有父級，以父級為參照物進行定位
- 如果父級沒有定位，則以瀏覽器窗口為參照進行定位
- *父級相對定位，子級絕對定位
- 固定定位：死心眼型
- 介紹：相對于瀏覽器進行定位移動
- 代碼：position:fixed;
- 特點：
- 需要配合方位屬性實現(xiàn)移動
- 相對于瀏覽器可視區(qū)域進行移動
- 在頁面中不占位置->已經(jīng)脫標
- 具備行內(nèi)塊特點
- 應(yīng)用場景：讓盒子固定在屏幕中的某個位置
- 元素的層級關(guān)系：
- 元素層級問題：
- 標準流<浮動<定位
- 相對、絕對、固定默認層級相同
- 此時HTML中寫在下面的元素層級更高，會覆蓋上面的元素
- z-index：整數(shù)；取值越大，顯示順序越考上，z-index默認值為0，必須配合定位才生效
- 裝飾：
- 垂直對齊
- 認識基線：瀏覽器文字類型元素排版中存在用于對齊的基線（baseline）
- 文字對齊問題：當圖片和文字在一行中顯示時，底部不對齊（解決行內(nèi)/行內(nèi)塊元素垂直對齊問題），默認基線對齊
- 屬性名：vertical-align
- 屬性值：效果
- baseline：默認，基線對齊
- top：頂部對齊
- middle：中部對齊（行內(nèi)塊對齊）
- bottom：底部對齊
- 備注：
- 父子級對齊：給子級寫對齊代碼/變?yōu)樾袃?nèi)塊：display:block
- 光標類型：設(shè)置鼠標在光標在元素上時顯示的樣式
- 屬性名：cursor
- 常見屬性值：
- default：默認值，通常是箭頭
- pointer：小手效果，提示用戶可以點擊
- text：工字型，提示用戶可以選擇文字
- move：十字光標，提示用戶可以移動
- 邊框圓角：讓盒子四個角變得圓潤，增加頁面細節(jié)，提升用戶體驗
- 屬性名：border-radius
- 常見取值：數(shù)字+px、百分比
- 原理：半徑取值
- 賦值規(guī)則：從左上角開始賦值，然后順時針賦值，沒有賦值的看對角
- 常見應(yīng)用：
- 畫一個正圓：
- 盒子必須是正方形
- 設(shè)置邊框圓角為盒子寬高的一半：50%
- 膠囊按鈕：
- 盒子要求是長方形
- 設(shè)置border-radius為盒子高度的一半
- overflow溢出部分顯示效果
- 溢出部分：指的是盒子內(nèi)容部分所超出盒子范圍地區(qū)域
- 場景：控制內(nèi)容溢出部分的顯示效果，如顯示、隱藏、滾動條
- 屬性名：overflow
- 場景屬性值：
- visible：默認值，溢出部分可見
- hidden：溢出部分隱藏
- scroll：無論是否溢出，都顯示滾動條
- auto：根據(jù)是否溢出，自動顯示或隱藏滾動條
- 元素本身隱藏
- 場景：讓某元素本身在屏幕中不可見，如鼠標：hover之后元素隱藏（子菜單）
- 常見屬性：
- vidibility：hidden（占位隱藏）
- display：none（不占位隱藏）
- 元素整體透明度：
- 場景：讓某元素整體（包括內(nèi)容）一起變透明
- 屬性名：opacity
- 屬性值：0-1之間的數(shù)字（1完全不透明0完全透明）
- 注意點：opacity會讓元素整體透明，包括里面的內(nèi)容
- 精靈圖：
- 介紹：多張小圖片合并成一張大圖片
- 優(yōu)點：減輕服務(wù)器壓力
- 使用步驟：
- 創(chuàng)建一個盒子，設(shè)置盒子的尺寸和小圖尺寸相同
- 將精靈圖設(shè)置為盒子的背景圖片
- 修改背景圖位置（取負值設(shè)置給盒子的background-position：x y）
- 精靈圖的標簽都用行內(nèi)標簽，span，b，i
- 背景圖片大?。篵ackground-size：寬度 高度
- 取值：
- 數(shù)字+px
- 百分比：盒子自身的寬高百分比
- contain：包含，等比例縮放，盒子>圖片
- cover：覆蓋：將背景圖片等比例縮放，圖片超出盒子
- 盒子陰影：box-shadow
- h-shadow：必須，水平偏移量，允許負值
- v-shadow：必須，垂直偏移量，允許負值
- blur：可選，模糊度
- spread：可選，陰影擴大
- color：可選，陰影顏色
- inset：可選，將陰影改為內(nèi)部陰影
- 過渡：
- 作用：讓元素的樣式慢慢的變化，常配合hover使用，增強網(wǎng)頁交互體驗
- 屬性名：transition
- 常見取值：
- 過渡的屬性：all：所有能過渡的屬性都過渡、具體屬性名如width：只有width有過度
- 過度的時長：數(shù)字+s（秒）
- 注意點：
- 過度需要：默認狀態(tài)和hover狀態(tài)樣式不同，才能有過渡效果
- transition屬性給需要過渡的元素本身加
- transition屬性設(shè)置在不同狀態(tài)中，效果不同的
- 給默認狀態(tài)設(shè)置，鼠標移入移出都有過渡效果
- 給hover狀態(tài)設(shè)置，鼠標移入有過渡效果，移出沒有過渡效果
