重头学习html5+css3系列笔记（4）

emment语法

快速生成html结构语法

1. 如果想要生成多个相同的标签，用*
2. 如果是父子关系，用> 如div>span
3. 兄弟关系，用+
4. 如果生成带有id或带有类的，直接写 标签#id或标签.类名，如果不写标签，则默认为div
   如ul>li.name*5
5. 如果想要生成有顺序的 则需要$（自增符号）如‘.demo$*5`，会生成以下代码

 <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

6. 如果想要在生成的标签里有内容 则使用｛｝如；div{ppp}
   则生成<div>ppp</div>，和自增一起使用时div{$labula}*5

        <div>1labula</div>
        <div>2labula</div>
        <div>3labula</div>
        <div>4labula</div>
        <div>5labula</div>

css快速生成

主要是可以识别字母缩写，如h100会自动生成height：100px
tdnone 会自动生成 text-decoration: none;
lh1em会自动生成line-height: 1em;

CSS元素显示模式

元素以什么方式进行显示
一般分为块标签和行内标签两种

块元素

1. 独占一行
2. 高度，宽度，外边距以及内边距都可以控制
3. 宽度默认是容器（父元素宽度）的100%
4. 是一个容器及盒子，里边可以放行内或块级元素
5. 文字类的元素，例如p标签，h类标签内部不能放其他块级元素，直接放一些文字，但可以放图片？

行内元素

也叫内联元素

1. 相邻行内元素在一行上，一行可以显示多个
2. 高，宽直接设置是无效的
3. 默认宽度就是他本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素
5. 链接里不能再放链接
6. 特殊情况下链接a里可以放块级元素，但是给a转换一下块级模式更安全

行内块元素

在行内元素中有几个特殊的标签 img input td，他们同时具有块元素和行内元素的特点，有些资料称之为行内块元素
特点：

1. 和相邻的行内元素（包括行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素的特点）
2. 默认宽度就是他本身内容的宽度（行内元素的特点）
3. 高度，行高，外边距，内边距都可以控制（块级元素的特点）

元素显示模式转换

有很多情况下，我们都需要转换元素显示模式，比如扩大a标签的触发范围，就需要设置a的宽度和高度，而行内元素不能直接设置宽高。
可以使用 display: block;将行内元素转换为块级元素
使用display: inline;将其转化为行内元素
使用display: inline-block;将其转化为行内块元素

小技巧 css没有提供可以使文字垂直居中的代码，我们可是用前边学到过的line-height,使行高等于盒子的宽度，就可以使文字垂直居中（这里其实是运用了line-height的属性，文字高度+上下边距（平均分））

 height: 40px;
 line-height: 40px;

如果行高小于盒子高度，则会偏上，行高大于盒子高度会偏下

背景属性

背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等

背景颜色

默认为background-color: transparent;意思是透明的

背景图片

描述了元素的背景图像，实际开发中可以用于logo或一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置(精灵图？）
默认为none：background-image: url(images/loginLog.png);

背景平铺

默认是repeat background-repeat: no-repeat|repeat-x|repeat-y|repeat;
页面元素既可以添加背景图片，也可以加入背景颜色，背景颜色位于最底层

背景图片位置

属性值有两个：background-position: x y;
参数代表的位置x坐标和y坐标，可以用方位名词或精准单位
方位名词：top center bottom right center left
当使用方位词时，顺序无影响 比如

background-position: center right;

两个顺序可以调换
如果省略了一个参数，则该参数默认居中对齐

当使用精确单位时，第一个值是x，第二个是y，只写一个时代表是x，y是垂直居中

当使用混合单位（方位词和精确单位混合）时，第一个值是x，第二个是y

背景图像固定

设置图像是否固定或者随着页面的其余部分滚动background-attachment: fixed|scroll;

背景复合写法

为了简化代码量，可以省略，以下各项无顺序要求，但一般习惯约定顺序为：
background：背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置

背景色透明化

 background: rgba(red, green, blue, alpha);

最后一个代表不透明度 取值为0~1，0代表全透明，1代表100%不透明
例如：

 background: rgba(0, 0, 0, 0.3);
 //0.3可以简写成.3

对于一组类似的元素（如导航栏各个分区），在写css时先找共同点写在一起，之后再分别写不同点，避免了代码的重复性