2021-05-26 Day04-浮动、背景

清除元素的默认样式,css reset，css重置

*{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
}
img{
	vertical-align: middle;
}

文本属性

1.字体大小
	font-size:12px;
	面试题：em和rem的区别
		em是父元素字体大小的倍数
		rem是根元素html字体大小的倍数
2.img的基线对齐
	img有一个属性默认值为基线对齐,如下
	img{
		vertical-align:baseline;基线对齐
	}
	解决img下方3~6px间距问题：
		vertical-align:top上/bottom下/middle居中;
	- 能设置表格内容的垂直对齐方式
3.检索英文字母大小写
	text-transform: capitalize首字母大写/lowercase全部小写/uppercase全部大写;
4.字间距
	letter-spacing: 10px;
5.词间距
	word-spacing:10px;
6.font的简写属性
	- font:加粗  倾斜  字体大小/行高  字体;
		font:font-weigth font-style font-size/line-height font-family;
	- font必须要存在的两个值是字体大小和字体
		font:字体大小  字体;

背景属性

背景图一般有衬托作用,而img一般是页面的内容
1.背景图片
	background-image:url();
2.背景重复
	background-repeat:repeat默认值,水平垂直都重复/no-repeat不重复/repeat-x只有水平重复/repeat-y只有垂直重复;
3.背景定位
	background-position:水平方向的位移  垂直方向的位移;
	水平方向:具体数值(正值向右)/left左/right右/center居中;
	垂直方向:具体数值(正值向下)/top上/bottom下/center居中;
4.***背景的简写属性
	background-color: #ea999f;
	background-image: url(img/bg-2.png);
	background-repeat: no-repeat;
	background-position: 140px bottom;
	***以上四个属性可以简写为以下形式,不分先后顺序
	background:#ea999f url(img/bg-2.png) no-repeat 140px bottom;
5.背景固定
	background-attachment:fixed;
	给body设置居多
6.雪碧图、精灵图、css sprite
	将多个小图标拼合在一张大图上,通过背景定位确定引入图片的位置

外边距

上外边距margin-top:20px;
下外边距margin-bottom
左外边距margin-left
右外边距margin-right
***板块div的水平居中
	margin-left:auto;
	margin-right:auto;

浮动

- float:none不浮动/left左浮动/right右浮动;
- 浮动的元素飘起来了,脱离文档流,空间不在拥有
- 浮动停止的条件
	1.碰到父元素边缘停止
	2.碰到浮动的元素也会停止