HTML基礎(chǔ)使用
一、Web前端介紹
1. 什么是網(wǎng)頁(yè)
網(wǎng)頁(yè)是基于瀏覽器的應(yīng)用程序霉咨，是數(shù)據(jù)展示的載體.
2. 網(wǎng)頁(yè)的組成
- 瀏覽器
- 代替用戶向服務(wù)器發(fā)請(qǐng)求
- 接收并解析數(shù)據(jù)展示給用戶
- 服務(wù)器
- 存儲(chǔ)數(shù)據(jù)
- 處理并響應(yīng)請(qǐng)求
- 協(xié)議
- 規(guī)范數(shù)據(jù)在傳輸過(guò)程中的打包方式
3. 開(kāi)發(fā)前的準(zhǔn)備
- 運(yùn)行環(huán)境：瀏覽器，設(shè)置chrome為默認(rèn)瀏覽器整份，作為網(wǎng)頁(yè)文件的運(yùn)行環(huán)境腹泌。
- 調(diào)試工具：瀏覽器自帶的調(diào)試工具，使用快捷鍵"F12"或右鍵"檢查"打開(kāi)疮胖。
- 開(kāi)發(fā)工具：不限，選用個(gè)人習(xí)慣的即可（VSCode闷板、EditPlus澎灸、PyCharm等）。
二遮晚、 HTML語(yǔ)法介紹
1. HTML介紹
超文本標(biāo)記語(yǔ)言（HyperText Markup Language）瀏覽器能夠識(shí)別和解析的語(yǔ)言性昭，通過(guò)標(biāo)簽的形式構(gòu)建頁(yè)面結(jié)構(gòu)和填充內(nèi)容
2. 標(biāo)簽
標(biāo)簽也稱為標(biāo)記或元素，用于在網(wǎng)頁(yè)中標(biāo)記內(nèi)容
-
語(yǔ)法：標(biāo)簽使用< >為標(biāo)志县遣，在< >內(nèi)部寫(xiě)標(biāo)簽名和標(biāo)簽屬性
- 注釋語(yǔ)法：
<!-- 此處為注釋 -->- 標(biāo)簽名不區(qū)分大小寫(xiě)糜颠，推薦小寫(xiě)表示
-
分類：
- 雙標(biāo)簽：成對(duì)出現(xiàn)，包含開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽萧求。例：
<html> <!-- 內(nèi)容或其他標(biāo)簽 --> </html>- 單標(biāo)簽：只有開(kāi)始標(biāo)簽其兴，沒(méi)有結(jié)束標(biāo)簽，可以手動(dòng)添加“/”表示閉合夸政。例：
<br> <br/> 標(biāo)簽屬性：
- 標(biāo)簽屬性書(shū)寫(xiě)在開(kāi)始標(biāo)簽中元旬，使用空格與標(biāo)簽名隔開(kāi)，用于設(shè)置當(dāng)前標(biāo)簽的顯示內(nèi)容或者修飾顯示效果守问。由屬性名和屬性值組成匀归，屬性值使用雙引號(hào)表示。例：
<meta charset="utf-8">
- 同一個(gè)標(biāo)簽中可以添加若干組標(biāo)簽屬性酪碘，使用空格間隔朋譬。例：
<a target="_blank">達(dá)內(nèi)慕課網(wǎng)</a>
3. 使用
創(chuàng)建網(wǎng)頁(yè)文件盐茎，使用.html或.htm作為文件后綴
-
添加網(wǎng)頁(yè)的基本結(jié)構(gòu)
<!doctype html> <html> <head> <title>網(wǎng)頁(yè)標(biāo)題</title> <meta charset="utf-8"> </head> <body> 網(wǎng)頁(yè)主體內(nèi)容 </body> </html>專業(yè)的開(kāi)發(fā)工具支持HTML代碼補(bǔ)全功能兴垦，如VSCode中，創(chuàng)建好HTML頁(yè)面以后可以輸入英文感嘆號(hào)(!)然后按tab鍵補(bǔ)全頁(yè)面基本結(jié)構(gòu)(不同的開(kāi)發(fā)工具補(bǔ)全的基本結(jié)構(gòu)有細(xì)微的差別字柠，可以忽略)探越。
-
標(biāo)簽嵌套
在雙標(biāo)簽中書(shū)寫(xiě)其他標(biāo)簽，稱為標(biāo)簽嵌套- 嵌套結(jié)構(gòu)中窑业，外層元素稱為父元素钦幔，內(nèi)層元素稱為子元素；
- 多層嵌套結(jié)構(gòu)中常柄，所有外層元素統(tǒng)稱為祖先元素鲤氢，內(nèi)層元素統(tǒng)稱為后代元素
- 平級(jí)結(jié)構(gòu)互為兄弟元素
三搀擂、常用標(biāo)簽介紹
1. 基本結(jié)構(gòu)解析
<!-- 文檔類型聲明，便于瀏覽器正確解析標(biāo)簽及渲染樣式 -->
<!doctype html>
<!-- HTML文檔開(kāi)始的標(biāo)志 -->
<html>
<!-- 頭部設(shè)置卷玉，可在head中設(shè)置網(wǎng)頁(yè)標(biāo)題哨颂，網(wǎng)頁(yè)選項(xiàng)卡圖標(biāo)，引入外部的資源文件相种，設(shè)置網(wǎng)頁(yè)相關(guān)信息等 -->
<head>
<!-- 設(shè)置網(wǎng)頁(yè)標(biāo)題威恼，顯示在網(wǎng)頁(yè)選項(xiàng)卡上方 -->
<title>網(wǎng)頁(yè)標(biāo)題</title>
<!-- 設(shè)置網(wǎng)頁(yè)字符編碼 -->
<meta charset="utf-8">
</head>
<!-- 網(wǎng)頁(yè)主體部分，顯示網(wǎng)頁(yè)主要內(nèi)容 -->
<body>
網(wǎng)頁(yè)主體內(nèi)容
</body>
</html><!-- 文檔結(jié)束-->
2. body中常用標(biāo)簽
-
文本標(biāo)簽
- 標(biāo)題標(biāo)簽：自帶加粗效果寝并，從h1到h6字體大小逐級(jí)遞減
<h1>一級(jí)標(biāo)題</h1> <h2>二級(jí)標(biāo)題</h2> <h3>三級(jí)標(biāo)題</h3> <h4>四級(jí)標(biāo)題</h4> <h5>五級(jí)標(biāo)題</h5> <h6>六級(jí)標(biāo)題</h6>- 段落標(biāo)簽：
<p>段落文本</p>- 普通文本標(biāo)簽：
<span>行分區(qū)標(biāo)簽箫措，用于對(duì)特殊文本特殊處理</span>- 格式標(biāo)簽：
瀏覽器會(huì)忽略代碼中的換行和空格，只顯示為一個(gè)空格衬潦。想要實(shí)現(xiàn)頁(yè)面中的換行斤蔓，需要借助于換行標(biāo)簽。
<br>- 字符實(shí)體：
某些情況下别渔，瀏覽器會(huì)將一些特殊字符按照HTML的方式解析附迷，影響顯示結(jié)果。此時(shí)需要將這類字符轉(zhuǎn)換為其他的形式書(shū)寫(xiě)
例：
使用 < 在頁(yè)面中呈現(xiàn) "<" 使用 > 在頁(yè)面中呈現(xiàn) ">" 使用 在頁(yè)面中呈現(xiàn)一個(gè)空格 使用 © 在頁(yè)面中呈現(xiàn)版權(quán)符號(hào)"?" 使用 ¥ 在頁(yè)面中呈現(xiàn)人民幣符號(hào)"￥" -
容器標(biāo)簽
常用于頁(yè)面結(jié)構(gòu)劃分哎媚，結(jié)合CSS實(shí)現(xiàn)網(wǎng)頁(yè)布局<div id="top">頁(yè)面頂部區(qū)域</div> <div id="main">頁(yè)面主體區(qū)域</div> <div id="bottom">頁(yè)面底部區(qū)域</div> -
圖片與超鏈接標(biāo)簽
-
圖片標(biāo)簽 <img src="">：用于在網(wǎng)頁(yè)中插入一張圖片喇伯。
- 屬性 src 用于給出圖片的URL，必填拨与。
- 屬性 width/height 用于設(shè)置圖片尺寸稻据，取像素值，默認(rèn)按照?qǐng)D片的原始尺寸顯示买喧。
- 屬性 title 用于設(shè)置圖片標(biāo)題捻悯，鼠標(biāo)懸停在圖片上時(shí)顯示
- 屬性 alt 用于設(shè)置圖片加載失敗后的提示文本
語(yǔ)法：
<img src="" width="" height="" title="" alt="">- 超鏈接標(biāo)簽：用戶可以點(diǎn)擊超鏈接實(shí)現(xiàn)跳轉(zhuǎn)至其他頁(yè)面
- 屬性 href 用于設(shè)置目標(biāo)文件的URL，必填淤毛。
- 屬性 target用于設(shè)置目標(biāo)文件的打開(kāi)方式今缚，默認(rèn)在當(dāng)前窗口打開(kāi)〉偷可以設(shè)置新建窗口打開(kāi)目標(biāo)文本(取"_blank")
<a target="_self">淘寶</a> <a target="_blank">百度</a> -
3. 常用結(jié)構(gòu)標(biāo)簽
-
列表標(biāo)簽
- 有序列表（ordered list）
默認(rèn)使用阿拉伯?dāng)?shù)字標(biāo)識(shí)每條數(shù)據(jù)
<ol> <li>list item 列表項(xiàng)</li> <li>list item 列表項(xiàng)</li> <li>list item 列表項(xiàng)</li> </ol>- 無(wú)序列表（unordered list）
默認(rèn)使用實(shí)心圓點(diǎn)標(biāo)識(shí)列表項(xiàng)
<ul> <li>list item 列表項(xiàng)</li> <li>list item 列表項(xiàng)</li> <li>list item 列表項(xiàng)</li> </ul> - 有序列表（ordered list）
-
表格標(biāo)簽
- 表格由行和單元格組成姓言，常用于直接的數(shù)據(jù)展示或輔助排版,基本結(jié)構(gòu)如下
<!-- 創(chuàng)建表格標(biāo)簽 --> <table> <!-- 創(chuàng)建行標(biāo)簽 --> <tr> <!-- 行中創(chuàng)建單元格以顯示數(shù)據(jù) --> <td>姓名</td> <td>年齡</td> <td>班級(jí)</td> </tr> <tr> <td>迪麗熱巴</td> <td>20</td> <td>002</td> </tr> </table>-
單元格合并：用于調(diào)整表格結(jié)構(gòu)，分為跨行合并和跨列合并蔗蹋，合并之后需要?jiǎng)h除被合并的單元格何荚，保證表格結(jié)構(gòu)完整
單元格屬性 作用 取值 colspan 跨列合并單元格 無(wú)單位數(shù)值 rowspan 跨行合并單元格 無(wú)單位數(shù)值 行分組標(biāo)簽：可以將表格中的若干行劃分為一組，表示表頭<thead>猪杭，表尾<tfoot>及表格主體<tbody>餐塘，默認(rèn)在表格中創(chuàng)建的所有行都會(huì)被自動(dòng)加入<tbody>中
<table border="1px" width="300px" height="300px"> <thead></thead> <tfoot></tfoot> <tbody></tbody> </table> -
表單標(biāo)簽
表單用于采集用戶的信息并提交給服務(wù)器，由表單元素和表單控件組成皂吮。表單元素form負(fù)責(zé)提交數(shù)據(jù)給服務(wù)器戒傻，表單控件負(fù)責(zé)收集數(shù)據(jù)税手。- 表單使用<form></form>
屬性名 取值 action 設(shè)置數(shù)據(jù)的提交地址 method 設(shè)置數(shù)據(jù)的提交方式，默認(rèn)為get方式需纳，可以設(shè)置為post enctype 設(shè)置數(shù)據(jù)的編碼類型冈止，涉及二進(jìn)制數(shù)據(jù)提交（例如圖片，文件候齿，音視頻等）熙暴，必須設(shè)置數(shù)據(jù)的提交方式為post,編碼類型為"multipart/form-data" 例如：
<form action="" method="" enctype=""> <!--此處為表單控件--> </form>- 表單控件使用（重點(diǎn)）
表單控件用于采集用戶信息，可設(shè)置以下標(biāo)簽屬性
屬性名 取值 type 設(shè)置控件類型 name 設(shè)置控件名稱慌盯，最終與值一并發(fā)送給服務(wù)器 value 設(shè)置控件的值 placeholder 設(shè)置輸入框中的提示文本 checked 設(shè)置單選按鈕或復(fù)選按鈕的默認(rèn)選中 selected 設(shè)置下拉菜單的默認(rèn)選中
表單控件用于采集用戶信息周霉，常用控件如下：
<input type="text"> 文本框
<input type="password"> 密碼框
<input type="radio"> 單選按鈕
<input type="checkbox"> 復(fù)選框
<input type="file"> 文件上傳
<input type="button"> 普通按鈕
<input type="submit"> 提交按鈕
<select></select> 下拉菜單
<option></option> 下拉菜單選項(xiàng)
<textarea></textarea> 文本域
CSS 基礎(chǔ)使用
一、CSS介紹
CSS全稱為： Cascading Style Sheets 亚皂，意為層疊樣式表 俱箱，與HTML相輔相成，實(shí)現(xiàn)網(wǎng)頁(yè)的排版布局與樣式美化
二灭必、CSS使用方式
1. 行內(nèi)樣式/內(nèi)聯(lián)樣式
借助于style標(biāo)簽屬性狞谱，為當(dāng)前的元素添加樣式聲明
<標(biāo)簽名 style="樣式聲明">
CSS樣式聲明 : 由CSS屬性和值組成
例：
style="屬性:值;屬性:值;"
常用CSS屬性 :
- 設(shè)置文本顏色 color:red;
- 設(shè)置背景顏色 background-color:green;
- 設(shè)置字體大小 font-size:32px;
2. 內(nèi)嵌樣式
借助于style標(biāo)簽，在HTML文檔中嵌入CSS樣式代碼禁漓，可以實(shí)現(xiàn)CSS樣式與HTML標(biāo)簽之間的分離跟衅。同時(shí)需借助于CSS選擇器到HTML 中匹配元素并應(yīng)用樣式
示例:
<style>
選擇器{
屬性:值;
屬性:值;
}
</style>
選擇器 : 通過(guò)標(biāo)簽名或者某些屬性值到頁(yè)面中選取相應(yīng)的元素，為其應(yīng)用樣式
示例：
/*標(biāo)簽選擇器 : 根據(jù)標(biāo)簽名匹配所有的該元素*/
p{
color:red;
}
3. 外鏈樣式表
- 創(chuàng)建外部樣式表文件 后綴使用.css
- 在HTML文件中使用<link>標(biāo)簽引入外部樣式表
<link rel="stylesheet" href="URL" type="text/css">
- 樣式表文件中借助選擇器匹配元素應(yīng)用樣式
三播歼、樣式表特征
1. 層疊性
多組CSS樣式共同作用于一個(gè)元素
2. 繼承性
后代元素可以繼承祖先元素中的某些樣式
例 : 大部分的文本屬性都可以被繼承
3. 樣式表的優(yōu)先級(jí)
優(yōu)先級(jí)用來(lái)解決樣式?jīng)_突問(wèn)題伶跷。同一個(gè)元素的同一個(gè)樣式(例如文本色)，在不同地方多次進(jìn)行設(shè)置秘狞，最終選用哪一種樣式叭莫？此時(shí)哪一種樣式表的優(yōu)先級(jí)高選用哪一種。
- 行內(nèi)樣式的優(yōu)先級(jí)最高
- 文檔內(nèi)嵌與外鏈樣式表,優(yōu)先級(jí)一致,看代碼書(shū)寫(xiě)順序,后來(lái)者居上
- 瀏覽器默認(rèn)樣式和繼承樣式優(yōu)先級(jí)較低
四烁试、CSS 選擇器
1. 作用
匹配文檔中的某些元素為其應(yīng)用樣式
2. 分類 :
1. 標(biāo)簽選擇器
根據(jù)標(biāo)簽名匹配文檔中所有該元素
語(yǔ)法 :
標(biāo)簽名{
屬性:值;
}
2. id選擇器
根據(jù)元素的 id 屬性值匹配文檔中惟一的元素雇初，id具有唯一性，不能重復(fù)使用
語(yǔ)法 :
#id屬性值{
}
注意 :
id屬性值自定義,可以由數(shù)字减响，字母靖诗，下劃線，- 組成辩蛋，不能以數(shù)字開(kāi)頭;
盡量見(jiàn)名知意呻畸，多個(gè)單詞組成時(shí)移盆，可以使用連接符悼院，下劃線，小駝峰表示
3. class選擇器/類選擇器
根據(jù)元素的class屬性值匹配相應(yīng)的元素,class屬性值可以重復(fù)使用,實(shí)現(xiàn)樣式的復(fù)用
語(yǔ)法 :
.class屬性值 {
}
特殊用法 :
類選擇器與其他選擇器結(jié)合使用
注意標(biāo)簽與類選擇器結(jié)合時(shí),標(biāo)簽在前,類選擇器在后
例 : a.c1{ }-
class屬性值可以寫(xiě)多個(gè),共同應(yīng)用類選擇器的樣式
例 :
.c1{ }
.c2{ }<p class="c1 c2"></p>
4. 群組選擇器
為一組元素統(tǒng)一設(shè)置樣式
語(yǔ)法 :
selector1,selector2,selector3{
}
5. 后代選擇器
匹配滿足選擇器的所有后代元素(包含直接子元素和間接子元素)
語(yǔ)法 :
selector1 selector2{
}
匹配selector1中所有滿足selector2的后代元素
6. 子代選擇器
匹配滿足選擇器的所有直接子元素
語(yǔ)法 :
selector1>selector2{
}
7. 偽類選擇器
為元素的不同狀態(tài)分別設(shè)置樣式,必須與基礎(chǔ)選擇器結(jié)合使用
分類 :
:link 超鏈接訪問(wèn)前的狀態(tài)
:visited 超鏈接訪問(wèn)后的狀態(tài)
:hover 鼠標(biāo)滑過(guò)時(shí)的狀態(tài)
:active 鼠標(biāo)點(diǎn)按不抬起時(shí)的狀態(tài)(激活)
:focus 焦點(diǎn)狀態(tài)(文本框被編輯時(shí)就稱為獲取焦點(diǎn))
使用 :
a:link{
}
a:visited{
}
.c1:hover{ }
注意 :
- 超鏈接如果需要為四種狀態(tài)分別設(shè)置樣式,必須按照以下順序書(shū)寫(xiě)
:link
:visited
:hover
:active
- 超鏈接常用設(shè)置 :
a{
/*統(tǒng)一設(shè)置超鏈接默認(rèn)樣式(不分狀態(tài))*/
}
a:hover{
/*鼠標(biāo)滑過(guò)時(shí)改樣式*/
}
3. 選擇器的優(yōu)先級(jí)
使用選擇器為元素設(shè)置樣式,發(fā)生樣式?jīng)_突時(shí),主要看選擇器的權(quán)重,權(quán)重越大,優(yōu)先級(jí)越高
| 選擇器 | 權(quán)重 |
|---|---|
| 標(biāo)簽選擇器 | 1 |
| (偽)類選擇器 | 10 |
| id選擇器 | 100 |
| 行內(nèi)樣式 | 1000 |
復(fù)雜選擇器(后代,子代,偽類)最終的權(quán)重為各個(gè)選擇器權(quán)重值之和
群組選擇器權(quán)重以每個(gè)選擇器單獨(dú)的權(quán)重為準(zhǔn)咒循，不進(jìn)行相加計(jì)算
例 :
/*群組選擇器之間互相獨(dú)立据途，不影響優(yōu)先級(jí)*/
body,h1,p{ /*標(biāo)簽選擇器權(quán)重為 1 */
color:red;
}
.c1 a{ /*當(dāng)前組合選擇器權(quán)重為 10+1 */
color:green;
}
#d1>.c2{ /*當(dāng)前組合選擇器權(quán)重為 100+10 */
color:blue;
}
五绞愚、標(biāo)簽分類
1. 塊元素
獨(dú)占一行,不與元素共行;可以手動(dòng)設(shè)置寬高,默認(rèn)寬度與與父元素保持一致
例 : body div h1~h6 p ul ol li form, table(默認(rèn)尺寸由內(nèi)容決定)
2. 行內(nèi)元素
可以與其他元素共行顯示;不能手動(dòng)設(shè)置寬高,尺寸由內(nèi)容決定
例 : span label b strong i s u sub sup a
3. 行內(nèi)塊元素
可以與其他元素共行顯示,又能手動(dòng)調(diào)整寬高
例 : img input button (表單控件)
4. 嵌套原則
- 塊元素中可以嵌套任意類型的元素
p元素除外,段落標(biāo)簽只能嵌套行內(nèi)元素,不能嵌套塊元素 - 行內(nèi)元素中最好只嵌套行內(nèi)或行內(nèi)塊元素
六、尺寸單位
- px 像素單位
- % 百分比颖医，參照父元素對(duì)應(yīng)屬性的值進(jìn)行計(jì)算
- em 字體尺寸單位位衩，參照父元素的字體大小計(jì)算，1em=16px
- rem字體尺寸單位,參照根元素的字體大小計(jì)算熔萧，1rem=16px
七糖驴、顏色單位
- 英文單詞：red，green佛致，blue
- rgb(r,g,b) 使用三原色表示贮缕，每種顏色取值0~255
- rgba(r,g,b,alpha) 三原色每種取值0255，alpha取值0（透明）1（不透明）
- 十六進(jìn)制表示：以#為前綴俺榆，分為長(zhǎng)十六進(jìn)制和短十六進(jìn)制感昼。
- 長(zhǎng)十六進(jìn)制：每?jī)晌粸橐唤M，代表一種三原色罐脊；每位的取值范圍09定嗓，af
例：red rgb(255,0,0) #ff0000 - 短十六進(jìn)制：由3位組成，每一位代表一種三原色萍桌，瀏覽器會(huì)自動(dòng)對(duì)每一位進(jìn)行重復(fù)擴(kuò)充宵溅，仍然按照長(zhǎng)十六進(jìn)制解析
例：#000 #fff #f00
- 長(zhǎng)十六進(jìn)制：每?jī)晌粸橐唤M，代表一種三原色罐脊；每位的取值范圍09定嗓，af
八、常用CSS樣式參考
| 功能 | 屬性名 | 取值 |
|---|---|---|
| 寬度 | width | 尺寸單位上炎，行內(nèi)元素?zé)o效 |
| 高度 | height | 尺寸單位层玲，行內(nèi)元素?zé)o效 |
| 背景顏色 | background-color | 顏色單位 |
| 背景圖片 | background-image | url("路徑") |
| 字體大小 | font-size | 尺寸單位 |
| 字體粗細(xì)程度 | font-weight | normal/bold(加粗) |
| 字體樣式 | font-style | normal/italic(傾斜) |
| 字體名稱 | font-family | 字體名稱，如Arial,"黑體" |
| 文本顏色 | color | 顏色單位 |
| 文本裝飾線 | text-decoration | none/underline(下劃線) |
| 文本內(nèi)容的水平對(duì)齊方式 | text-align | left(默認(rèn)值)/center/right/justify(兩端對(duì)齊) |
| 行高(文本內(nèi)容垂直對(duì)齊) | line-height | 尺寸單位,line-height = height 設(shè)置一行文本在元素中垂直居中,line-height > height 文本下移顯示,line-height < height 文本靠上顯示 |
| 邊框 | border | 三個(gè)值反症，分別為寬度/樣式/顏色辛块，用空格隔開(kāi)，如 1px solid red(1像素實(shí)線邊框) |
| 單邊框 | border-top/right/bottom/left | 同上 |
| 圓角邊框 | border-radius | 像素值或百分比铅碍，50%為圓形润绵，最多取4個(gè)值，按照順序分別表示左上胞谈、右上尘盼、右下、左下烦绳，如果沒(méi)有值時(shí)和對(duì)角一致 |
| 內(nèi)邊距 | padding | 常用像素值卿捎，調(diào)整元素內(nèi)容與邊框之間的距離， 最多取4個(gè)值径密，按照順序分別表示上右下左四個(gè)方向的距離午阵，最小值為0 |
| 單方向內(nèi)邊距 | padding-top/right/bottom/left | 取一個(gè)值 |
| 外邊距 | margin | 調(diào)整元素與元素之間的距離，最多取4個(gè)值，按照順序分別表示上右下左四個(gè)方向的距離 |
| 單方向外邊距 | margin-top/right/bottom/left | 取一個(gè)值 |
| 修改鼠標(biāo)指針樣式 | cursor | pointer光標(biāo)呈現(xiàn)為指示鏈接的指針 |
| 過(guò)渡效果 | transition | 取多個(gè)值底桂，包含設(shè)置過(guò)渡效果的 CSS 屬性的名稱植袍，完成過(guò)渡效果需要多少秒或毫秒，速度效果的速度曲線等籽懦，如width 2s linear |
CSS 盒模型
1. 內(nèi)容尺寸
一般情況下于个，為元素設(shè)置width/height，指定的是內(nèi)容框的大小
-
內(nèi)容溢出：內(nèi)容超出元素的尺寸范圍暮顺，稱為溢出厅篓。默認(rèn)情況下溢出部分仍然可見(jiàn)，可以使用overflow調(diào)整溢出部分的顯示,取值如下：
取值 作用 visible 默認(rèn)值捶码，溢出部分可見(jiàn) hidden 溢出部分隱藏 scroll 強(qiáng)制在水平和垂直方向添加滾動(dòng)條 auto 自動(dòng)在溢出方向添加可用滾動(dòng)條
2. 邊框
1. 邊框?qū)崿F(xiàn)
語(yǔ)法：
border:width style color;
邊框樣式為必填項(xiàng)贷笛，分為：
| 樣式取值 | 含義 |
|---|---|
| solid | 實(shí)線邊框 |
| dotted | 點(diǎn)線邊框 |
| dashed | 虛線邊框 |
| double | 雙線邊框 |
2. 單邊框設(shè)置
分別設(shè)置某一方向的邊框，取值：width style color;
| 屬性 | 作用 |
|---|---|
| border-top | 設(shè)置上邊框 |
| border-bottom | 設(shè)置下邊框 |
| border-left | 設(shè)置左邊框 |
| border-right | 設(shè)置右邊框 |
3. 網(wǎng)頁(yè)三角標(biāo)制作
- 元素設(shè)置寬高為0
- 統(tǒng)一設(shè)置四個(gè)方向透明邊框
- 調(diào)整某個(gè)方向邊框可見(jiàn)色
4. 圓角邊框
- 屬性：border-radius 指定圓角半徑
- 取值：像素值或百分比
- 取值規(guī)律：
一個(gè)值 表示統(tǒng)一設(shè)置上右下左
四個(gè)值 表示分別設(shè)置上右下左
兩個(gè)值 表示分別設(shè)置上下 左右
三個(gè)值 表示分別設(shè)置上右下宙项，左右保持一致
3. 內(nèi)邊距
- 屬性：padding
- 作用：調(diào)整元素內(nèi)容框與邊框之間的距離
- 取值：
20px; 一個(gè)值表示統(tǒng)一設(shè)置上右下左
20px 30px; 兩個(gè)值表示分別設(shè)置(上下) (左右)
20px 30px 40px; 三個(gè)值表示分別設(shè)置上右下乏苦，左右保持一致
20px 30px 40px 50px; 表示分別設(shè)置上右下左
- 單方向內(nèi)邊距,只能取一個(gè)值：
padding-top
padding-right
padding-bottom
padding-left
4. 外邊距
- 屬性：margin
- 作用：調(diào)整元素與元素之間的距離
- 特殊：
1）margin:0; 取消默認(rèn)外邊距
2）margin:0 auto;左右自動(dòng)外邊距，實(shí)現(xiàn)元素在父元素范圍內(nèi)水平居中
3）margin:-10px;元素位置的微調(diào) - 單方向外邊距：只取一個(gè)值
margin-top
margin-right
margin-bottom
margin-left
布局方式
1. 標(biāo)準(zhǔn)流/靜態(tài)流
默認(rèn)布局方式,按照代碼書(shū)寫(xiě)順序及標(biāo)簽類型從上到下,從左到右依次顯示
2. 浮動(dòng)布局
主要用于設(shè)置塊元素的水平排列
1）屬性
float
2）取值
可取left或right尤筐，設(shè)置元素向左浮動(dòng)或向右浮動(dòng)
float:left/right;
3）特點(diǎn)
- 元素設(shè)置浮動(dòng)會(huì)從原始位置脫流,向左或向右依次突慵觯靠在其他元素邊緣,在文檔中不再占位
- 元素設(shè)置浮動(dòng),就具有塊元素的特征,可以手動(dòng)調(diào)整寬高
- "文字環(huán)繞":浮動(dòng)元素遮擋正常元素的位置,無(wú)法遮擋正常內(nèi)容的顯示,內(nèi)容圍繞在浮動(dòng)元素周圍顯示
4）常見(jiàn)問(wèn)題
子元素全部設(shè)置浮動(dòng),導(dǎo)致父元素高度為0,影響父元素背景色和背景圖片展示,影響頁(yè)面布局
5）解決
- 對(duì)于內(nèi)容固定的元素,如果子元素都浮動(dòng),可以給父元素固定高度(例:導(dǎo)航欄)
- 在父元素的末尾添加空的塊元素。設(shè)置clear:both;清除浮動(dòng)
- 為父元素設(shè)置overflow:hidden;解決高度為0
3. 定位布局
結(jié)合偏移屬性調(diào)整元素的顯示位置
1）屬性
position
2） 取值
可取relative（相對(duì)定位）/absolute（絕對(duì)定位）/fixed（固定定位）
postion:relative/absolute/fixed/static
3）偏移屬性
設(shè)置定位的元素可以使用偏移屬性調(diào)整距離參照物的位置
top 距參照物的頂部
right 距參照物的右側(cè)
bottom 距參照物的底部
left 距參照物的左側(cè)
4）分類
- relative 相對(duì)定位
元素設(shè)置相對(duì)定位,可參照元素在文檔中的原始位置進(jìn)行偏移,不會(huì)脫離文檔流
- absolute 絕對(duì)定位
1. 絕對(duì)定位的元素參照離他最近的已經(jīng)定位的祖先元素進(jìn)行偏移,如果沒(méi)有,則參照窗口進(jìn)行偏移
2. 絕對(duì)定位的元素會(huì)脫流,在文檔中不占位,可以手動(dòng)設(shè)置寬高
使用絕對(duì)定位 :
"父相子絕" : 父元素設(shè)置相對(duì)定位,子元素絕對(duì)定位盆繁，參照已定位的父元素偏移.
- fixed 固定定位
1. 參照窗口進(jìn)行定位,不跟隨網(wǎng)頁(yè)滾動(dòng)而滾動(dòng)
2. 脫離文檔流
5）堆疊次序
元素發(fā)生堆疊時(shí)可以使用 z-index 屬性調(diào)整已定位元素的顯示位置掀淘，值越大元素越靠上：
- 屬性 : z-index
- 取值 : 無(wú)單位的數(shù)值,數(shù)值越大,越靠上
- 堆疊：
- 定位元素與文檔中正常元素發(fā)生堆疊，永遠(yuǎn)是已定位元素在上
- 同為已定位元素發(fā)生堆疊油昂，按照 HTML 代碼的書(shū)寫(xiě)順序革娄，后來(lái)者居上
