三、CSS标签（中）

1.Emmet语法：

    1.1快速生成html样式语法：

•         （1）Emmet语法的前身是Zen coding，它使用缩写来提高html/css的编写速度。
•         （2）如果想要生成多个相同标签，加上*就可以了。
•             div*3：快速生成3个div。
•         （3）如果有父子级关系的标签，可以用>。比如ul>li
•         （4）如果有兄弟级关系的标签，用+号就可以了。
•         （5）如果生成带有类名或者id名字的，直接写.demo或#two tab键就可以了。
•         （6）如果生成的div类名是有顺序的，可以用自增符号$。.$*5
•         （7）如果想要在生成的标签内部写内容可以用{}表示。div{$}*5

    1.2快速生成CSS样式语法：CSS基本采取简写形式即可。
        比如：width写w。按tab
    1.3alt+shift+上下键，复制当前内容到下一行。

2.CSS的复合选择器：

    1.1复合选择器：建立在基础选择器之上，对基本选择器进行组合形成的。
        复合选择器可以更准确、更高效的选择目标元素（标签）。
        复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。
        常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。

    1.2后代选择器（包含选择器）：可以选择父元素里面子元素。
        语法：元素1 元素2 {样式声明}
                ol li {
            color: red;
        }
                ol li a {
            color: black;
        }
        元素1和元素2可以是任意基础选择器。

    1.3子选择器：只能选择作为某元素的最近一级子元素。选亲儿子元素。
        语法：元素1 > 元素2 {样式声明}
        上述语法表示选择元素1里面的所有直接后代（子元素）元素2。

    1.4并集选择器：可以选择多组标签，同时为它们定义相同的样式。通常用于集体声明。
        并集选择器是各选择器通过","连接而成。（都好可以理解为和的意思）
        语法：元素1,元素2 {样式声明}
        约定的语法规范，并集选择器喜欢竖着写。

    1.5伪类选择器：用于向某些选择器添加特殊的效果，比如给链接添加特殊效果或选择第1个，第n个元素。伪类选择器书写的最大特点是用冒号（：）表示。
        （1）链接伪类选择器：
            a:link ：未访问过的链接。
            a:visited ：访问过的链接。
            a:hover ：选择鼠标经过的那个链接。
            a:active ：鼠标正在按下还没有弹起鼠标的链接。
            注意事项：
                为了链接伪类选择器生效，请按照LVHA的顺序声明。
                因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
        （2）focus伪类选择器：用于选取获得焦点的表单元素。该选择器主要针对于表单元素来说。

3.CSS的元素显示模式：

    （1）元素显示模式：元素标签以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。
        作用：网页的标签很多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

    （2）HTML元素一般分为块元素和行内元素两种类型。
        块元素：<div>、<h1>~<h6>、<p>、<ol>等。
            特点：
                自己独占一行。
                高度，宽度、外边距以及内边距都可以控制。
                宽度默认是容器（父级宽度）的100%。
                是一个容器及盒子，里面可以放行内或者块级元素。
            注意：文字类的块元素内不能使用块级元素。
                <p>、<h1>~<h5>内不能放块元素。
        行内元素：<a>、<strong>、<b>、<em>、<i>、<del>等。
            特点：
                相邻行内元素在一行上，一行可以显示多个。
                高度、宽度直接设置是无效的。
                默认宽度就是它本身内容的宽度。
                行内元素只能容纳文本或者其他行内元素。
            注意：
                链接里面不能再放链接了
                特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。
        行内块元素：特殊的几个标签——<img/>、<input/>、<td>。同时具有行内元素、块元素的特点。
            特点：
                一行上可以显示多个。（行内元素特点）
                默认宽度就是它本身内容的宽度（行内元素特点）。
                高度，行高、外边距以及内边距都可以控制（块级元素特点）。

    （3）元素显示模式转换：一个模式的元素需要另外一种模式的特性。
        转换为块元素： dispaly:block;
        转换为行内元素：display:inline;
        转换为行内块元素：display:inline-block;

    （4）单行文字垂直居中小技巧：让文字的行高等于盒子的高度。
        原理：行高的上空隙和下空隙把文字挤到中间了。

4.CSS的背景：给页面元素添加背景样式。

    （1）背景颜色：background-color;
        默认是transparent。
    （2）背景图片： background-image: url(images/map.jpg)。
        使用场景：logo/超大背景图片。便于控制位置。
    （3）背景平铺：background-repeat。
        默认是平铺的。
        不平铺：background-repeat: no-repeat;
    （4）背景图片位置：background-positions。
        参数是方位名词。
        参数是精确定位：如果参数精确定位，那么第一个肯定是x坐标，第二个是y。
        参数是混合单位：精确单位+方位名词混合使用。
    （5）背景图像固定（背景附着）：背景图像是固定还是随着页面的其余部分滚动。background-attachment:
        参数scroll是随对象内容滚动；fixed是背景图像固定。
    （6）背景复合写法：一般习惯约定顺序为：
        background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
    （7）背景颜色半透明：盒子背景半透明，盒子里面的内容不受影响。
        background: rgba(0, 0, 0, .2);
            最后一个参数是alpha透明度，取值范围在0~1之间。

5.CSS的三大特性：层叠性、继承性、优先级。

    （1）层叠性：给相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
        层叠性原则：就近原则。那个样式离结构近，就执行那个样式。

    （2）继承性：子标签会继承父标签的某些样式，如文本颜色和字号。
        跟文字相关的样式，以及color属性都可以继承过来。
        作用：简化代码。
        行高的继承性：
            行高可以跟单位也可以不跟单位。
            如果子元素没有设置行高，则会继承父元素行高的1.5倍。此时子元素的行高是：当前子元素的文字大小*1.5倍。
            font: 12px/1.5; 这样写最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

    （3）优先级：当同一个元素指定多个选择器时，就会有优先级的产生。
        选择器相同，则执行层叠性。
        选择器不同，则根据选择器权重执行。
        权重表：
        优先级注意点：
            权重是有4组数字组成，但是不会有进位。
            可以理解为类选择器永远大于元素选择器，id选择器用于大于类选择器。以此类推。
            等级判断从左向右，如果某一数值相同，则判断下一位数值。
            继承的权重是0。子元素得到的权重永远是0。
        权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

6.盒子模型：能帮我们更好的布局页面。

    （1）看透网页布局的本质：
        网页元素基本都是盒子BOX。
        核心：利用CSS设置好盒子样式，然后摆到相应位置。
        往盒子里面装内容。
    （2）盒子模型（Box Model）组成：
        盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
        CSS盒子模型本质就是一个盒子，封装周围的HTML元素，它包括：外框、外边距、内边距和实际内容。

    （3）边框（border）：border可以设置元素的边框。
        边框有三部分组成：
            边框宽度（粗细）：border-width: 5px;
            边框样式：border-style: ;
                实线边框：border-style: solid;
                虚线边框：border-style: dashed;
                点线边框：border-style: dotted;
            边框颜色：border-color: yellow;
        边框的简写：border: 5px solid blue; 没有顺序。
        边框（四条边）分开写：border-top: 5px solid yellow;
        表格细线边框：
            合并相邻的边框：border-collapse: collapse;
        边框会影响盒子实际大小：
            测量盒子大小的时候，不量边框。
            如果测量的时候包含了边框，则需要width/height减去边框宽度。

    （4）内边距（padding）：边框与内容之间的距离。
        四个方位名词表示盒子的上下左右内边距，如：padding-top。
        padding的复合属性：
            padding: 20px; padding后面只跟1个值：上下左右都有20像素内边距。
            padding: 20px 30px;padding后面值跟2个值：上下内边距是20像素，左右是30像素。
            padding: 20px 30px 40px;跟3个值：上内边距20像素，左右内边距30像素，下内边距40像素。
            跟4个值：顺时针顺序，上右下左。
        padding也会影响盒子实际大小：
            如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
        如果盒子此时没有指定宽度、高度，padding不会撑开盒子。

    （5）外边距（margin）：控制盒子和盒子之间的距离。
        四个方位名词表示盒子之间的外边距。
        margin简写方式跟padding类似。
        外边距典型应用：让块级盒子水平居中对齐。
            前提条件：1.盒子必须制定了宽度；2.盒子左右的外边距都设置为auto。
            让块级元素水平居中：margin: 0 auto;
        行内元素和行内块元素水平居中。
            给其父元素添加text-align: center;
        外边距合并：
            嵌套块元素垂直外边距的塌陷：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值。
                解决方案：
                    1.为父元素定义上边框。border: 1px solid transparent;
                    2.为父元素定义上内边框。padding-top: 1px;
                    3.为父元素添加overflow:hidden。

    （6）清除内外边距：网页元素很多都带有默认的内外边距，不同浏览器默认的不一致。
                * {
            margin: 0;
            padding: 0;
        }
            这也是CSS的第一行代码。
        行内元素为了照顾兼容性，尽量只设置左右内外边距。