HTML day05

01 display属性

设置内联块元素(行内快元素)
display：inline-block
它的本质是：对内显示块标签属性，对外显示行标签属性

两个内联块元素之间的缝隙的处理方式
原因：两个内联块元素之间键入了回车，回车也是一个字符，它的大小跟父标签font-size有关
解决办法：

1. 去掉回车键
2. 设置它们父元素的大小为0

02 css选择器

基础选择器

通配选择器

*表示通配符，它可以匹配任何标签
*{
	css内容
}

标签名选择器

E{css内容} 
给所有标签名为E的元素设置css样式

类名选择器

.类名｛css内容｝
使用的时候需要在 标签上绑定class="类名" 如果有多个类名，使用空格隔开，类名最好不要超过5个

id选择器

#id名｛css内容｝
在一个页面当中，id是唯一的，只能绑定在一个标签上，也就是一个页面中没有同名的id

群组选择器

如果多种选择器所表达的css内容是相同的，则可以把它们写成群组选择器
.wp,#abc,div{css内容}

03 层次选择器

后代选择器

E M｛css内容｝
通过E选择器 设置 E 中的 M选择器 的css内容，M可以是E的子级，也可以是E的后代中的某一个选择器

父子选择器

E>M｛css内容｝
通过E选择器找到 E选择器的子级M选择器，设置css内容

兄弟选择器

E~M｛css内容｝
通过E选择器找到该元素之后所有选择器名为 M 的的兄弟元素，并设置css样式

相邻兄弟选择器

E+M｛css内容｝
通过E选择器找到 该元素之后第一个兄弟元素M，并且对M设置css样式

04 伪类选择器

a的伪类：
伪类，是css系统创建好的内部的类，用来对标签的某个时机设置样式

link：初始时候的状态
visited：点击之后的状态
hover：鼠标悬浮时候的状态
active：鼠标按下不松手时候的状态

顺序是：L > V > H > A

IE8以后，人和标签都可以添加 :hover 伪类

可以根据hover 触发 元素本身，以及通过元素能找到元素的变化

05 选择器的优先级

什么时候需要考虑选择器的优先级？
不同的选择器，同时作用于同一个标签元素，并且他们具有相同的css属性设置，对该css属性设置了不同的值

选择器优先级的强弱顺序：
1.！important 100000
2. 行间样式，在标签上添加style属性 10000
3. id选择器 1000
4. 类名选择器，伪类选择器，属性选择器 100
5. 元素（标签名）选择器，伪类选择器 20
6. 通配符选择器 1
7. 系统默认提供的css属性 0

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

06 盒模型

盒模型

在html中每一个标签都具有一个盒模型

盒模型的组成部分：content(内容)，padding(内边距)，border(边框)，margin(内边框)

content：标签元素内容，一把定义宽和高，或者由子元素的内容撑开宽和高
padding：设置 元素内容到元素边框之间的距离
border：指的是元素的边框
margin：设置当前元素到相邻元素之间的距离

设置内边距

padding-top：num；设置上边距 
padding-right：num；设置右边距 
padding-bottom：num；设置下边距 
padding-left：num；设置左边距 
合写：
	padding：上 右 下 左；
	
	左=右  上！=下
	padding：上 右 下；
	
	左=右  上= 下
	padding：上 右；
	
	左= 右= 上= 下
	padding：上；