A我今天学到了什么

1.html标签的分类

块标签：1.独占一行2.能够设置宽高
有：div,h1~h6,p,ul,li,dl,dt,dd

内联标签:1.并排显示2.不能设置宽高3.不能设置margin-top,margin-bottom
a,有：span,em,strong

内联块:1.并排显示2.可以设置宽高
button,img,input

2.html标签的属性

块标签：独占一行,能够设置宽高
div,h1~h6,p,ul,li,dl,dt,dd
display:block

内联标签:并排显示,不能设置宽高,margin-top,margin-bottom
a,span,em,strong
属性：display:inline;

内联块:并排显示,可以设置宽高
button,img,input
属性：display:inline-block

如何让内联元素和内联块元素水平居中

改变属性为：display:block
margin-left:auto;
margin-right:auto
或者给父级加text-align:center

3.css选择器

定义:选中你所要改变的元素的一张方式

分类：<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']{}

选择器的优先级顺序

<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}

总结

运用需要加强熟练，所有单词需要加强记忆。