CSS学习（2）
Emmet语法
emmet语法可以通过缩写的形式来提高html/css的编写速度
- 生成标签：输入标签名按下tab键
- 生成多个相同标签：如div*3
- 生成父子级关系：如ul>li
- 生成兄弟级关系：如div+p
- 生成带有类名或id名字的标签：标签名称.demo或#two按下tab键就可以了
- 生成div类名有序：用自增符号$
- 标签生成中带有默认文字：{}
- css中的属性都可以首字母缩写
CSS的元素显示模式
元素的显示就是元素（标签）以什么方式进行显示，比如div自己占一行，比如一行可以放多个span。
HTML元素一般分为块元素和行内元素两种类型。
块元素
h1～h6，p，div，ul，ol，li等为最常见的块元素，特点为：
- 独占一行
- 高度，宽度，外距和内距都可以控制
- 宽度默认为父级的100%
- 是一个容器及盒子，内部可以是块元素或者行内元素（文字类的元素内不能使用块级元素）
行内元素（内联元素）
a，strong，b，em，span等为最常见的行内元素，特点为：
- 一行内可以有多个行内元素
- 宽度和高度直接设置是无效的
- 默认宽度是本身内容的宽度
- 行内元素只能容纳文本或其他行内元素（a里面不能再放a元素，a中可以包含块级元素）
行内块元素
img，input，td等为最常见的行内块元素，特点为：
- 一行内可以有多个行内块元素，两个行内块元素中间会有空白的缝隙
- 高度，宽度，外距和内距都可以控制
- 默认宽度是本身内容的宽度
元素显示模式转换
行内元素转换为块级元素
display:block
a {
width: 150px;
height: 50px;
background: pink;
display: block;
}
块级元素转换为行内元素
display:inline
div {
width: 300px;
height: 100px;
background-color: #fff;
display: inline;
}
转换为行内块
display:inline-block
CSS的背景
背景颜色
background-color：颜色（默认：transparent（透明的）
背景图片
背景图片在背景颜色的上层。
background-image：url（）（默认：none）
背景平铺
background-repect：no-repect（不平铺）默认：repect（平铺）repeat-x（沿着x轴平铺）repeat-y（沿着y轴平铺）
背景图片位置
background-position：x y；
x和y为方位名词
left，right，top，down，center前后两个值与顺序无关，如果只指定一个，则另一个默认为居中对齐。
x和y为精确单位
x和y分别为离左侧和离上侧的距离，如果只指定了一个值，那该值必定是x坐标，另一个值为center。
背景图像固定
background-attachment：默认：scroll（滚动）fixed（固定）
设置背景图像是否固定或者随着页面其余部分滚动
背景复合写法
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
背景色半透明
background：rgba（0，0，0，alpha），alpha为0-1之间，0为全透明，1为不透明
CSS的三大特性
层叠性、继承性、优先级。
层叠性
按顺序覆盖重复的样式。
div {
color: red;
font-size: 12px
}
div {
color: pink;
}
/* 12px，粉色 */
<div>层叠性</div>
继承性
父亲标签的的某些样式（text-，font-，line-，color等元素）可以被子标签继承。
行高的继承
一般使用当前文字大小的几倍的写法，当前文字的大小的几倍。
div {
font: 14px/1.5;
}
优先级
- 选择器相同，则执行层叠性
- 选择器不同，根据选择器权重执行（通配/继承0,0,0,0<元素选择器0,0,0,1<类选择器/伪类选择器0,0,1,0<ID选择器0,1,0,0<行内样式style=“”1,0,0,0<!important)
注意a链接有一个默认的颜色，会顶掉继承下来的颜色。
复合选择器会有权重叠加的问题，复合选择器会把权重累加