【前端入门】CSS3（2）

一、字体样式

代码	样式
font-size	字体大小
font-family	字体
font-weight	字体粗细
color	字体颜色
font	字体风格(4个参数分别控制斜体、粗细、大小、字体)

二、文本样式

样式	说明	用法
rgba	颜色	RGB和透明度
text-align	对齐方式	left、right对齐，居中
text-indent	缩进	px是像素，em是字符
height	行高
line-height	每行行高
text-decoration	文本装饰线	underline是下划线
text-decoration	文本装饰线	line-through是删除线
text-decoration	文本装饰线	none可以为a标签去下划线
vertical-align	水平对齐	多个内容通过某个部分对齐

三、列表样式

样式	说明
list-style	单条信息前的小圆点

四、背景样式

样式	说明
background-color	背景颜色
background-image	背景图片 参数:url("")
background-repeat	背景样式(默认朝x和y两个方向同时平铺)

提供一个获取好看背景色的网站：
渐变色的开源网站，点这里！

五、盒子模型

• margin：外边距
• padding：内边距
• border：边框（宽度、样式、颜色）

当参数为1个时，代表四个边距都是这个值。
当参数为2个时，前一个参数代表上下边距，后一个参数代表左右边距。
当参数为3个时，参数分别代表上右下左，按顺时针旋转。

• shadow：阴影（右偏移、下偏移、偏移半径、颜色）

六、display

inline：变为行内元素
block：变为块元素
inline-block：保持块元素的特性，但是可以写在一行内
none：消失

七、父级边框塌陷问题

1、通过空的div

各边距设为0，去掉两边的浮动。

2、通过overflow

给父级元素增加overflow:hideen;
hidden会修剪超出的内容
visible(默认)超出部分显示在框架外
scroll超出部分被修剪并增加滚动条
auto浏览器自动判断

3、父类添加伪类

#father:after{
	content: '';
	display: block;
	clear: both;
}

八、定位

position字段控制:（相对定位还在文档流里，绝对不在）
是否在文档流里，就是原来的位置会不会被保留，保留的话，移动后那个位置就是空的，不保留就会被后面的挨个填上。
值relative是相对定位，通过top、bottom、left、right修改数值。
值absolute是绝对定位，有父级元素，相对于父级元素偏移，没有就相对于浏览器偏移。
值fixed是固定定位，在浏览器上某个相对位置不改变，就像粘在屏幕上的一样。一般用于“回到顶部”。

九、图层

z-index：0~无限
数字越小层级越低，高层级的显示在上面

opacity：背景透明度