[TOC]
## 1.盒子margin padding的傳參
margin:0; //四個方向都改變
margin:0 10px; //top,bottom為0px;left,right為10px
margin:0 10px 20px; //top 0;left,right 10px;bottom 20px;
padding如上
## 2.HTML標簽的分類
### 2.1 標簽分類
~~~
- 塊標簽
//特點
1.獨占一行
2.能夠設置width,height
//常用的塊標簽
div,h1~h6,p,ul,li,dl,dt,dd
- 內聯標簽
//特點
1.并排顯示
2.不能設置width,height
3.不能設置margin-top,margin-bottom
a,span,em,strong
- 內聯塊
//特點
1.并排顯示
2.可以設置寬高
//常用的內聯塊標簽
button,img,input
~~~
### 2.2 原理
~~~
塊標簽：獨占一行,能夠設置寬高
div,h1~h6,p,ul,li,dl,dt,dd
display:block;
內聯標簽:并排顯示,不能設置寬高,margin-top,margin-bottom
a,span,em,strong
display:inline-block
內聯塊:并排顯示,可以設置寬高
button,img,input
display:inline-block
內聯元素和內聯塊元素水平居中 ：
display:block;
margin-left:auto;
margin-right:auto;
默認值：
塊標簽默認 display:block;
內聯默認 display:inline;
內聯塊默認 display:inline-block
~~~
## 3.css選擇器
~~~
定義選定你所要改變的元素的一種方式。
~~~
### 3.1分類
~~~
<p class="test" id="first">hello world</p>
<h4>標題</h4>
(1)css元素選擇器
p{color:pink}
(2)class選擇器
.test{color:yellow}
(3)id選擇器
#first{color:blue}
(4)分組選擇器
p,h4{background:gray}
(5)后代選擇器
div>span{} //選取div所有子元素為span的標簽
div span{} //選中div之后的所有span元素
(6)兄弟選擇器
div+p{}選取緊鄰div之后的第一個兄弟元素
div~p{}選取緊鄰div之后的所有兄弟元素
(7)偽類選擇器
div:hover{}
input:focus{}
(8)偽元素
":before" 偽元素可以在元素的內容前面插入新內容
p:before{
content:''
}
":after" 偽元素可以在元素的內容之后插入新內容。
p:after{
content:''
}
(9).屬性選擇
div[class='test']{}
~~~
### 3.2選擇器的優先級別排序
~~~
<div class='test' id='first'>hello world</div>
元素選擇器<class選擇器<ID選擇器<!important
div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important}
~~~
## 4.水平居中
~~~
不改變內聯和內聯塊的display屬性 實現水平居中
實現方案:
parentElement{
text-align:center;
}
~~~
## 5.html
~~~
元素內容的起始位置,是基于它自身width,height的起始位置
用法：
{
width:300px;
height:300px;
background:red;
padding:20px;
}
~~~
