今天我学到了什么

一.html标签的分类

1.1  块标签：div，p, h1-h6, ul,li,dl,dt,dd .默认 display:block 特点 1.独占一行
2.能够设置width,height

1.2   内联标签：a,span,i,em,strong 默认 display:inline 特点1.并排显示
2.不能够设置width,height
3.不能设置margin-top,margin-bottom

1.3    内联块标签：img,input,button  默认 display:inline-block 特点 1.并排显示
2.能够设置width,height

二.水平居中
分别举例

2 给父级加text-align:center

//HTML
<div>
  <span>span</span> <br/>
  <button>btn</button>
</div>

//css
<style>
div{
    text-align:center
}
</style>

三 选择器

分组选择器：//HTML
<div>div</div>
<span>span</span>
<p>hello world</p>
//css
div,span,p{
 color:pink;
}

后代选择器：//HTML
<div>
  <p>hello world</p>
  <p>hello world</p>
  <ul>
    <li><p>hello world</p></li>
    <li><p>hello world</p></li>
  </ul>
</div>
//css
div>p{
  color:pink;
}div>p //选取div所有[子元素](http://www.jianshu.com/p/66e6df4b3542)为p的标签；//css
div p{
  color:red;
}div p //选取div之后的所有元素

兄弟选择器://HTML
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
//css
div+p{
  color:red;
}div+p //选中div之后的第一个p元素
//css
div~p{
  color:red;
}div~p //选中div之后的所有p元素

伪元素://HTML
<p>hello world</p>
//css
p:before{
  content:"我是前面";
  display:block;
}
p:after{
  content:"我是后面";
  display:block;
}

属性选择器(了解)://HTML
<p class="one">hello world</p>
//css
<style>
p[class="one"]{
  color:red;
}
</style>

今天我掌握了什么

1 块标签分类

块标签
div,p,h1~h6,ul,li,dl,dt,dd
//默认的display
display:block
1.独占一行
2.能设置width、height

2内联标签分类

内联标签
a,span,i,em,strong
//默认的display
display:inline
1.并排显示
2.不能设置width、height
3.不能设置margin-top,margin-bottom

3内联块标签分类

img,input,button
//默认的display
display:inline-block
1.并排显示
2.能设置width、height

2怎么水平居中

display:block
//HTML
<span>span</span> <br/>
<button>btn</button>
//css
<style>
span,button{
  display:block;
  width:100px;
  margin-left:auto;
  margin-right:auto;
}
</style>

 给父级加text-align:center
//HTML
<div>
  <span>span</span> <br/>
  <button>btn</button>
</div>
//css
<style>
div{
    text-align:center
}
</style>

3选择器

伪类选择器hover,focus
//HTML
<input type="text"/>
<p>hello world</p>
//css
input:focus{
  background-color:red;
}
p:hover{
  color:pink;
}

分组选择器
//HTML
<div>div</div>
<span>span</span>
<p>hello world</p>
//css
div,span,p{
 color:pink;
}

后代选择器//HTML
<div>
  <p>hello world</p>
  <p>hello world</p>
  <ul>
    <li><p>hello world</p></li>
    <li><p>hello world</p></li>
  </ul>
</div>

div>p //选取div所有[子元素](http://www.jianshu.com/p/66e6df4b3542)为p的标签
//css
div>p{
  color:pink;
} 
div p //选取div之后的所有元素
//css
div p{
  color:red;
}

兄弟选择器
//HTML
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
div+p //选中div之后的第一个p元素
//css
div+p{
  color:red;
}
div~p //选中div之后的所有p元素
//css
div~p{
  color:red;
}

我今天没掌握什么

后代选择器//HTML
<div>
  <p>hello world</p>
  <p>hello world</p>
  <ul>
    <li><p>hello world</p></li>
    <li><p>hello world</p></li>
  </ul>
</div>

div>p //选取div所有[子元素](http://www.jianshu.com/p/66e6df4b3542)为p的标签
//css
div>p{
  color:pink;
} 
div p //选取div之后的所有元素
//css
div p{
  color:red;
}  不是很清楚