1、padding 內(nèi)填充 設(shè)置后會撐大容器大小，即大小為padding + 容器大小
padding復(fù)合值
padding:10px; //一個值：四個方向同大小,均為10px
padding:10px 20px ; //兩個值：上下同為10px，左右同為20px
padding:10px 20px 30px ; //三個值：上為10px，下為20px， 左右同為30px
padding:10px 20px 30px 40px; //四個值：上10px，右20px，下30px，左40px（即順時針方向）
2、margin 外邊距：標(biāo)簽與標(biāo)簽之間的距離
復(fù)合值同padding
注意：父子級包含關(guān)系時，子級的margin-top會傳遞給父級
解決：給父級設(shè)置border可以解決
注意：兩個div同時設(shè)置margin，會出現(xiàn)上下疊壓問題
解決：可以將某一個元素設(shè)置成預(yù)想的值，會取最大的margin值，即
給div1或者div2設(shè)置具體的margin值
如果元素沒有特殊特征，也可以用padding代替
#box{
background-color: red;
border: 1px solid black;
}
#div1{
height: 100px;
margin: 100px 100px 200px 100px;
background-color: yellow;
}
#div2{
height: 100px;
margin: 100px;
background-color: blue;
}
認識標(biāo)簽
1、盒模型
盒子大?。篵order+padding+width/height
盒子寬度：左border+左padding+width+右padding+右border
盒子高度：上border+上padding+width+下padding+下border
2、a 超鏈接
偽類：給元素添加特殊的效果
：link 未訪問過連接的效果
：visited 訪問過后的連接顏色
：hover鼠標(biāo)移入（懸停）
：ative 鼠標(biāo)按下時連接顏色
**順序 lv ha**
3、CSS中主要的偽元素有四個：before/after/first-letter/first-line，在before/after偽元素選擇器中，有一個content屬性，能夠?qū)崿F(xiàn)頁面中的內(nèi)容插入。(詳解點擊鏈接如下)
https://blog.csdn.net/fengqingtao2008/article/details/52732862
4、span 同一行幾個字包裹用以區(qū)分樣式
decoration：none 去掉a標(biāo)簽自帶的下滑線
5、head 用于頁面信息介紹，也可用于板塊頭部
6、nav 導(dǎo)航欄（包含鏈接的一個列表）
<nav> <a href = ""></a>
<a href = ""></a>
<a href = ""></a>
</nav>
7、footer 頁腳 頁面底部或者板塊底部
8、section 頁面板塊 用于劃分頁面上的不同區(qū)域 或者劃分文章里不同節(jié)
9、article 用來在頁面中表示一套結(jié)構(gòu)完整且獨立的內(nèi)容部分
10、aside 包含當(dāng)前與當(dāng)前頁面或主要內(nèi)容相關(guān)內(nèi)容的引用、側(cè)邊欄、廣告、nav元素組，以及其他類似有別與主要內(nèi)容的部分
11、time 用來表示時間或者日期
12、常見標(biāo)簽
h1-h6 標(biāo)題
p段落
strong 強調(diào) 粗體
me 情調(diào) 斜體
span 區(qū)分樣式
ul 無序列表
ol 有序列表
li 列表項
dl 定義列表
dt 定義列表標(biāo)題
dd 定義列表項
mark 標(biāo)記
img src 顯示圖片
13、css reset原則 （不要使用默認樣式,因為每個瀏覽器下標(biāo)簽的默認樣式可能會初心不一致的情況，故需要人為默認樣式清除，后重新設(shè)置）
需要重置的內(nèi)容
與盒模型相關(guān)的樣式
border
margin
padding
標(biāo)簽特有的樣式
ul>li
ol>li
書寫原則：
用到什么標(biāo)簽就清除所用的標(biāo)簽的默認樣式，建議不要將所有的標(biāo)簽樣式全部清除。
body,dl,dd,p,h1,h2,h3,h4,h5,h6,{margin:0;font-size:12px;}
ol,ul{margin:0;padding:0,list-style:none;}
a{text-decoration:none}
img{border:none;}
14、通配符：找到頁面上的所有元素，不建議使用
15、選擇器
id 唯一
類選擇器
標(biāo)簽選擇器
群組選擇器、包含選擇器
div,p,h1{}、 .box div1{}
通配符 *
16、選擇器優(yōu)先級
style>id>class>類型選擇器>*
行間樣式》id選擇器》類選擇器》標(biāo)簽 選擇器
包含選擇器優(yōu)先級計算
群組選擇器優(yōu)先級,可類比為：
行樣式 1000
id選擇器 100
類選擇器 10
標(biāo)簽選擇器 1
.div div (10+1)
div div (100 +100)
依據(jù)此法計算群組選擇器
17、塊元素特征
默認獨占一行
沒有寬度是，默認撐滿一行
支持所有css命令
內(nèi)聯(lián)元素
同排可以繼續(xù)跟同類的標(biāo)簽
內(nèi)容撐開寬度
不支持寬高
不支持上下的margin
代碼換行被解析
18、塊元素和內(nèi)聯(lián)元素的轉(zhuǎn)換
display:block 顯示為塊
使內(nèi)聯(lián)元素具備塊元素的特性
display：inline 顯示為內(nèi)嵌
是行塊屬性標(biāo)簽具備內(nèi)聯(lián)元素的特性
