[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;
}
~~~
