day05、day06 笔记

display 属性

设置内联块元素（行内块元素）
display：inline-block；
本质：对内显示 块 标签属性，对外显示 行 标签属性

两个内联块元素之间的缝隙处理方式

原因：回车也是一个字符，他的大小跟font-size有关
解决办法：
1.去掉回车键
2.设置他们父元素的大小为0

body {
	font-size=0;
}

注意：字体的大小可以被传递到子元素上

基础选择器

1.通配选择器

* {		css内容
}

2.标签名选择器

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

3.类名选择器

.类名{	css内容
} 
类名，使用空格隔开，类名最好不要超过5个

4.id选择器

#id名{		css内容
}
id是唯一的，一个页面中没有同名的id

5.群组选择器

.wp, #abc, div{ css内容 }

层次选择器

1.后代选择器

ul li {	css内容	}
ul span{ css内容 }
ul p{ css内容 }

2.父子选择器

ul>li { css内容 }
ul>li>span { css内容 }
ul>li>div>p { css内容 }

3.兄弟选择器
通过E选择器找到 该元素之后所有选择器名为 M 的兄弟元素，设置css样式

.f~li{ css内容 }
E~M { css内容 }

4.相邻兄弟选择器
通过E选择器找到 该元素之后第一个名为 M 的兄弟元素，对M设置css样式

.f+li{ css内容 }
E+M { css内容 }

伪类选择器

1.link：初始时候的状态
2.visited：点击之后的状态
3.hover：鼠标悬浮时候的状态
4.active：鼠标按下点击不松手时候的状态
l > v > > h > a (先爱后恨)

E:hover{ css内容 }
E:link{ css内容 }

选择器优先级

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

具有类名txt的span标签
span.txt{ css内容 }

盒模型

1.content（内容） 一般自定义宽和高，或者由子元素的内容撑开宽和高
2.padding （内边距） 元素内容到元素边框之间的距离
3.border （边框）
4.margin （外边距）当前元素到相邻元素之间的距离

设置内边距

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

合写
padding：上 右 下 左；

左 =右 上！=下
padding：上 右 下；

左=右 上=下
padding：上 右；

左=右=上=下
padding：上；

设置外边距

	margin-top：num；设置元素上边距离的外边距
	margin-right：num；设置元素右边距离的外边距
	margin-bottom：num；设置元素下边距离的外边距
	margin-left：num；设置元素左边距离的外边距

1.上下两个兄弟元素的margin重叠问题
上下两个兄弟标签，设置margin的时候，他们之间的距离不是相加，而是谁设置的margin值大，就显示谁的距离，即为值大的覆盖小的
解决方法：给下面的元素添加 display：inline-block

2.父子级子元素的margin-top传递问题
在子元素中设置margin-top，表现的结果是该margin-top传递到了父级元素上，使得父元素距离它上面的元素为margin-top的值
解决方法：
a.给父元素添加 overflow：hidden
b.给父元素添加 border