使用者模板和使用者場景
標籤也叫元素
標籤分行標籤（行元素）和塊標籤（塊元素）
行元素：不獨佔一行，設定寬高無效，繼承父級屬性
塊元素：獨佔一行，設定寬高有效繼承父級屬性（帶有display:block;）
行內塊（內聯塊級）不獨佔一行，設定寬高有效，繼承父級屬性（帶有display:inline-block;）
行元素:span i em strong b s u a
塊元素:h1 h2 h3 h4 h5 h6 p div from ul ol
行內塊:input img table
語義化標籤:h1-h6 p strong em img a ul ol select textarea table form
非語義標籤:span i b u s
CSS是層疊樣式表 改變標籤的樣式
1.CSS引入方式
-行內
在標籤上直接寫style=" "
<p style="color:red"></p>
-內部（內嵌）樣式
在<head></head>標籤中寫<style></style>中寫樣式
-外部（外鏈）樣式
<link rel="stylesheet" href="css/lianxi.css">
-引入方式
在<head></head>標籤中寫
@import url("global.css");
golbal.css外部樣式錶鏈接地址
css引入方式優先順序順序
行內>內嵌、外鏈>引入
內嵌，外鏈哪個在下面最終應用哪個
2.CSS語法
選擇器{
屬性：屬性值；
屬性值1:屬性值；
屬性值2:屬性值2；
......
}
行內樣式優先順序更高
外部引入連結比引入樣式高
3.選擇器
①標籤選擇器、元素選擇器
標籤{}
h1{} p{} span{} a{}
②類名選擇器
通過class=" "起名通過.呼叫
<p class="quan"></p>
呼叫.quan
③id選擇器
通過id=" "起名通過#呼叫
<p id=text></p>
id起名，名稱唯一
#text{}
標籤，類名，id選擇器三個優先順序：id>類名>標籤
id名稱唯一，優先順序比class和標籤要高
④後代選擇器
父級子級中間空格，後代可隔輩跳級
父級 子級{}
p span{} .quan span{}
⑤子代選擇器
父級和子級通過>連結，逐級寫，不能跳級
父級>子級{}
span>b{}
p>span>b 逐級寫不能跳級
⑥通配選擇器
*{}在通配選擇器中寫的樣式，頁面中全部應用，大範圍控制樣式
⑦群組選擇器
body,ul,ol,h1{}
⑧偽類選擇器
:hover{}滑鼠滑過/滑鼠移入
:active{}滑鼠點選時
:visited{}滑鼠訪問過後
⑨交叉選擇器
p,text{} a.first{} div.box{}
⑩兄弟選擇器
⑩-1屬性選擇器
id>交叉>後代>通用
交叉>子代>後代>群組
CSS繼承屬性
1.color
2.font-size
3.font-weight
4.font-family
5.font-style
6.text-align
CSS不繼承
邊框 border
內邊框 padding
外邊框 margin
浮動 float
定位postion
顏色值
1，顏色英文名稱
red blue yellow pink white black
2.十六進位制
#ff6600
0-9 10位數字
a-f 6個字母
3.RGB 三元素
R red紅
G green綠
B blue藍
CSS樣式
1.字型樣式
-字型型別 font-family
font-family:"微軟雅黑";
-字型大小 fon-size
font-size:12px;
網頁字型設定都是偶數數字，12 14 16 18等網頁最小字型12px
-字型粗細font-weight
font-weight:bold/bolder/100-900
-字型斜體font-style
font-style:itical
2.text系列
-文字位置 text-align
text-align:left 文字居左
text-align:center 文字居中
text-align:right 文字居右
在父級設定寬高 text-align:center,可以使盒子內圖片和文字居中
-首行縮排 text-indent
文字首行縮排 text-indent
-文字樣式 text-decoration
text-decoration:underline 下劃線
text-decoraton:line-through刪除線
text-decoration:none 清楚下劃線
-文字樣式
font-系列
--font-family字型型別 網頁常用微軟雅黑和宋體兩種字型 font-family:"微軟雅黑";
--盒子居中 margin:0 auto;
阿里巴巴圖示庫--https://www.iconfont.cn/
background背景圖
-背景圖片
background:url();
背景純色
background:red/#ff6600
-背景尺寸/大小：水平、垂直
background-size:50% 50%;
background-size:100px 100px;根據背景圖或者背景區域大小去寫畫素值
background-size:contain;內容包含
background-zize:cover;覆蓋 寬高 蓋齊
-背景平鋪background-repeat
repeat包含 repeat-x和 repeat-y
no-repeat 不平鋪
repeat-x水平平鋪
repeat-y垂直平鋪
round 縮放背景圖至容器大小（非等比縮放）
space 背景圖不會產生縮放，會被裁切
-背景定位 background-position
-方位background-position:left top;
水平left 左 center 中 right 右
垂直top 上 center 中 bottom 下
-畫素值 background-position:18px -1px;
-background-attachment:scroll;
background-attachment:scroll;預設根據螢幕滾動
background-attachment:fixed;將背景圖固定在某個位置，滑動滾動條圖片不動
圖片和文字垂直居中（在圖片上設定）
verticla-align:middle;
行高 line-height line-height當height與line-height高相等時，一行文字垂直居中
注意事項
寫頁面寫div必寫類名，必設定寬高
ul起名字最好也設定好寬高
CSS命名規則
topbar 頂部條
header 頭部
content 內容
footer 底部
nav 導航條
menu 選單
banner 輪播圖
logo 圖示
search 搜尋框
cart 購物車
ad廣告
sec秒殺
more 更多、檢視更多
scrollTop回到頂部
main頁面主體
login登入
loginbar登陸條
regsiter註冊
-浮動
浮動-豎著排列的專案想橫著排列
float:left float:right
浮動作用
1.將塊元素變成行內塊，將行元素變成行內塊
標準文件流
在不使用其他與排列和定位相關的css規則時，各個元素排列方式
脫離（標準）文件流
1.浮動
2.定位
3.彈性盒子
預防浮動帶來問題
設定腹肌，設定好寬高
清除浮動
1.clear:both;
內容--藍色
邊框--黃色
內邊距--綠色
外邊距--橘色
浮動能解決的問題？
-盒子塌陷
可以把行元素和塊元素轉化成行內塊
盒子模型（標準盒模型）
任何盒子都有 盒子模型
盒子模型由四部分組成：content內容，padding內邊距，border邊框，margin外邊距
作用
-content 內容 盒子寬高
-padding 內邊距 盒子與邊框的距離
-border 邊框 盒子模型
-margin 外邊距 盒子與其他的邊距
從內而外：content-border-padding-margin
書寫
padding 內邊距
padding:10px;上下左右為10px
padding:5px 10px;上下5px 左右10px
padding:5px 10px 4px;上5px 左右10px 下4px
padding:5px 10px 4px 1px;上5px 右10px 下2px 左1px
按順時針 上5px 右10px 下2px 左1px
padding-top;
padding-left;
padding-right;
padding-bottom;
margin 外邊距
margin:10px;上下左右為10px
margin:5px 10px;上下5px 左右10px
margin:5px 10px 4px;上5px 左右10px 下4px
margin:5px 10px 4px 1px;上5px 右10px 下2px 左1px
按順時針 上5px 右10px 下2px 左1px
margin-top;
margin-left;
margin-right;
margin-bottom;
margin:0 auto;讓盒子居中auto自動瀏覽器的寬度減盒子寬度平均除以2，自動計算
border邊框
border:1px solid red;
1px是邊框粗細值
solid邊框線的型別
-dotted點線
-dashed虛線
-double雙線
border-top:1px solid red;
border-left:1px solid red;
border-right:1px solid red;
border-bottom:1px solid red;
面試問題
盒子塌陷
兩個塊元素上下margin值會重疊，使用margin值大的一個
解決margin他先問題
浮動
盒子模型
分為標準盒模型和怪異盒模型
標準盒模型從內到外：content內容-padding內邊距-border邊框-margin外邊距
怪異盒模型順序：content包含padding內邊距和border邊框，外面是margin外邊距
css層疊樣式表
1.疊加
2.繼承
css繼承屬性
color
font-family
font-style
font-size
font-weight
list-style
vertical-align
css引入方式
1.行內
2.內嵌
3.外鏈
4.引入
css選擇器
標籤，類名，id,子代，後代，交叉，群組，通用，偽類
css疊加
哪個最後寫就最終應用哪個
有優先順序按照優先順序順序，平級就按照最終應用
清除浮動
1.給父級設定寬高加display:block
2.給父級設定寬高加overflow:hidden;（超出隱藏）
3.clear:both;在被受影響的元素加
4.偽類{寬高，display:block;clar:both;overflow:hidden}
:after{}
定位position
1.靜態定位static
2.相對定位relative
3.絕對定位absolute
絕對定位的計算：父級寬-子級寬/2
4.固定定位fixed
根據瀏覽器控制方位
top
left
right
bottom
層級關係
z-index:1（範圍0-9999）
層級初始值為0
定位區別
1.佔不佔原來位置
2.移動式參展哪裡
3.是否受父級影響
定位區別
父相子絕
固定定位fixed。不佔原來位置，移動時參照瀏覽器視窗
相對定位relative。佔原來位置，移動式參照原來位置
絕對定位absolute。不佔原來位置，無父級且父級無定位時移動式參照瀏覽器邊界，有父級且父級有定位時，移動時參照父級邊界