【无标题】

display属性

设置内联块元素（行内块元素）
display:inline-block;
它的本质是对内显示块标签属性，对外显示行标签属性。
两个内联块元素之间的缝隙的处理方式
原因：两个内联块元素之间键入了回车，回车也是一个字符，它的大小跟父标签的font-size有关。
解决办法：
1.去掉回车键
2.设置他们父元素的大小为0
注意：字体大小是可以被传递到子元素上的

基础选择器

基础选择器：
1.统配选择器
*表示通配符，他可以匹配任何标签。
*{
css内容
}
2.标签名选择器
E{
css内容
} 给所有标签名为E的元素设置CSS样式
3.类名选择器
.类名{css内容}
使用的时候需要在标签上绑定 class=“类名” 如果有多个类名，使用空格隔开，类名最好不要超过5个。
4.id选择器
#id名{css 内容}
在一个页面当中，id 是唯一的，只能绑定在一个标签上，也就是一个页面没有同名的id.
5.群组选择器
如果多种选择器所表达的css内容是相同的，则可以把他们写成群组选择器
.wp，#abc,div {css内容}

层次选择器

1.后代选择器
E M{css内容} 通过E标签 设置E中的M选择器的css内容，M可以是E的子集，也可以是E的后代中的某一个子集
2.父子选择器
E>M{css内容 } 通过E选择器找到E选择器的子级M选择器，设置css内容
3.兄弟选择器
E~ M{css 内容} 通过E选择器找到该元素之后所有选择器名为M的兄弟元素，并设置css样式
4.相邻兄弟选择器
**E+M{css 内容} **通过E选择器找到该元素之后第一个兄弟元素M，并且对M设置css样式

伪类选择器

a的伪类
伪类，是css系统创建好的内部的类，用来对标签的某一个时机设置样式
link:初始时候的状态
visited:点击之后的状态
hover:鼠标悬浮时候的状态
active:鼠标按下不松手时候的状态
顺序是：l->v->h->a(先爱后恨)
ie8以后，任何标签都可以添加：hover伪类
可以根据hover触发元素本身，以及通过元素能找到的元素的变化。

选择器优先级

什么时候需要考虑选择器的优先级？
不同的选择器，同时作用于同一个标签元素，并且他们具有相同的css属性设置，对该css属性设置了不同的值。
选择器优先级的强弱顺序：
1.!important 100000
2.行间样式，在标签上添加style属性 10000
3.id选择器 1000
4.类名选择器，伪类选择器，属性选择器 100
5.元素（标签名）选择器，伪元素选择器 10
6.通配符（*）选择器 1
7.系统默认提供的css属性 0

假设后面的数字是权重的值，那么在比较的时候，只需要把选择器的值相加，然后比较大小即是权重的大小。
如果他们的值相同，后来者居上

盒模型

盒模型：在html中每一个标签都具有一个盒模型
盒模型的组成部分：content内容 ，padding内边距，border边框,margin外边距
content:标签元素内容，一般自定义宽高，或者由子元素的内容撑开宽和高
padding：设置元素内容到元素边框之间的距离
border：指的是元素的边框
margin：设置当前元素到相邻元素之间的距离。
== 设置内边距==
padding-top:num; 设置上边距
padding-right:num; 设置右边距
padding-bottom:num; 设置下边距
padding-left:num; 设置左边距
和写：
padding:上 右 下 左；
左=右 上！=下
padding:上 右 下；
左=右 上=下 padding:上 右；

盒模型

margin 设置外边距
margin-top 设置元素上边的外边距
margin-right 设置元素右边的外边距
margin-bottom 设置元素下边的外边距
margin-left 设置元素左边的外边距
和写
margin:上 右 下 左
上=下 右！=左 margin:上 右 下 左；
上！=下 右=左 margin:上 右 下；
上=下 右=左 margin:上 右；
上=下=右=左 margin:上；

margin的经典bug
1.上下两个兄弟元素的margin重叠问题
2.上下两个兄弟标签，设置margin的时候，他们之间的距离不是相加，
而是谁设置的margin值大，就显示谁的距离，即为值大的覆盖晓得
可以理解为，上面元素的margin-bottom和下面的margin-top他们得值取最大一个。
解决方法：
1.给下面的元素添加display:inline-block
2.父子级子元素的margin-top传递问题
在子元素中设置margin-top，表现的结果是该margin-top传递到了父级元素上，使得父元素距离他上面的元素为该margin-top值
解决方法：
a.给父元素添加overflow:hidden;
b.给父元素添加border