前端课程第5弹CSS

一、Emmet语法

Emmet语法前身是Zen coding,使用缩写来提高html/css编写速度，VS内部已经集成该语法

1.1 快速生成html结构语法

1.生成标签 直接输入标签名 按tab键即可

2.想要生成多个相同的标签 加上*即可，  比如 div*3 就可以快速生成3个div

3.如果有父子级关系的标签，可以用> 比如 ul>li 即可

4.如果有兄弟关系的标签，用+即可 比如div+p

5.如果生成带有类名或者id名字的，直接写.demo或者#two tab键即可

6.如果生成的div类名是有顺序的，可以用自增符号$

7.如果想要在生成的标签内部写内容可以用{}表示

1.2 快速生成CSS样式语法

CSS基本采取简写模式即可

1.比如w200 按tab可以生成 width: 200px;

2.比如lh26 按住tab 可以生成line-height: 26px;

二、CSS的元素显示模式

2.1 什么是元素的显示模式？

元素显示模式就是元素（标签）以什么方式显示，比如<div>自己占一行，比如一行可以放多个<span>

HTML元素一般分为块元素和行内元素两种类型

2.2 块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是典型的块元素

块级元素特点：

1.独占一行

2.高度，宽度，内外边距都可以控制

3.宽度默认是容器（父级宽度）的100%

4.是一个容器及盒子，里面可以放行内或者块级元素

注：文字类的元素内不能使用块级元素

<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>

同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

2.3 行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素

行内元素特点：

1.相邻行内元素在一行上，一行可以显示多个

2.高、宽直接设置是无效的

3.默认宽度就是它本身内容的宽度

4.行内元素只能容纳文本或者其他行内元素

注：链接里不能再放链接

特殊情况链接<a>里面可以放块级元素，但给<a>转换一下块级模式最安全

2.4 行内块元素

在行内元素中有几个特殊的标签--<img/>、<iuput/>、<td>,他们同时具有块元素和行内元素的特点

有些资料称他们为行内块元素

行内块元素特点：

1.和相邻行内元素在一行上，但他们之间会有空白缝隙，一行可以显示多个（行内元素特点）

2.默认宽度就是它本身内容的宽度（行内元素特点）

3.高度、行高、外边距以及内边距都可以控制（块级元素特点）

2.5 元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种模式的特性

比如想要增加链接<a>的触发范围

转换为块元素：display:block;

 a {

            width: 150px;

            height: 50px;

            background-color: pink;

            /* 把行内元素a转化为块级元素 */

            display: block;

        }

转换为行内元素：display: inline;

转换为行内块：display:inline-block;

2.6 一个小工具的使用 snipaste

截图工具，可以让你将截图贴回屏幕上

常用快捷方式：

1.F1可以截图，同时测量大小，设置箭头 书写文字等

2.F3在桌面置顶显示

3.点击图片，alt可以取色（按下shift可以切换取色模式）

4.按下esc取消图片显示   

2.7 单行文字垂直居中     

让文字的行高等于盒子的高度，就可实现让文字在当前盒子内垂直居中、

height=line-height

三、CSS的背景

3.1 背景颜色 background-color

background-color: transparent | color

transparent：背景颜色透明（默认）

color：指定颜色

3.2 背景图片 background-image

背景图片优点是：非常便于控制位置

语法;background-image: none(默认)|url（指定）

3.3 背景平铺 background-repeat 

background-repeat :repeat(平铺)|no repeat(不平铺)|repeat-x(沿x轴平铺)|repeat-y(沿y轴平铺)

注：页面元素既可以添加背景颜色也可以添加背景颜色，只不过背景图片会压住背景颜色

3.4 背景图片的位置 background-position

语法：background-position： x y;

参数代表x坐标和y坐标，可以使用方位名词或者精确单位

参数值：

length:百分数、由浮点数值和单位标识符组成的长度值

position:top、center、bottom、left、center、right方位名词

1.参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关。比如 left top和 top left 效果一致；

若指定一个方位名词，另一个省略，则第二个值默认居中对齐；

2.参数是精确单位

如果参数值是精确坐标，第一个肯定是x坐标，第二个是y坐标；

如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中；

3.参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个是x坐标，第二个值是y坐标

3.5 背景图像固定 background-attachment

其设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment：scroll  |fixed

scroll:背景图像随对象内容滚动

fixed:背景图像固定

3.6 背景复合写法

为了简化背景属性写法，将属性合并简写在同一个属性background中，从而节约代码量。

没有特定书写顺序，一般约定顺序为:

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

3.7 背景色半透明

background: rgba(0,0,0,0.3)；

最后一个是参数alpha透明度，取值范围在0-1之间

我们习惯把0.3的0省略掉，写成 background: rgba(0,0,0,.3)；

注：背景半透明盒子是指盒子背景半透明，盒子里的内容不受影响