css

1、子div和父div的margin设置。

<div class="a"><div class="b"></div></div>当设置.b {margin: 30px auto 0}时，b盒子并没有距离a盒子顶端30px，反而a盒子也被影响离顶端30px。

原因：所有毗邻的（同级或嵌套的盒元素，且没有被非空内容、padding、border 或 clear 分隔开）两个或更多盒元素的margin将会合并为一个margin共享之。

方法1：在父DIV的css加上“overflow:hidden;”。（最佳）

方法2：在父DIV的css加上“border:1px solid transparent;”。

方法2：父级设置padding（破坏非空白的折叠条件）

方法3：在父DIV的css加上float或者position:absolute。（浮动或绝对定位不参与margin的折叠）

兄弟元素间 margin 重叠，可以设置兄弟元素 display: inline-block; width: 100%。

2、视频播放。

页面添加video，注意视频编码格式，兼容IE是AVC，不是mpeg4格式。

3、权重

两个类选择器同时作用于一个元素上，权重高的生效。

<div class="a b">hello world</div>

<div class="b a">hello world</div>

.a.b{ color: red; }

.b.a{ color: blue; }

最后两个颜色都是blue【权重高低与.a.b/.b.a无关（注意：类选择器之间没有间隔，同一个元素设置选择器不存在间隔，如：div.a 、 div.b 、.a.b 、.b.a），但和它们的先后顺序有关（先.a.b {} 再 .b.a {} 则按照最后这个来）】

4、选择器

<button class="btn">选项</button>，在设置样式时，应该是button.btn(没有间隔)，不应该是button .btn

5、定位方案：普通流、浮动、定位

普通流：元素在html文档中自上而下、从左往右布局，传统的html文档文本布局。行内元素水平排列，行内占满会自动换行；块级元素会被渲染成独立一行，除非指定。

浮动（right、left）：元素会脱离文档流，它后面的元素会占据它的位置，也就是图层关系，浮动元素在上方；但文字段落不会占据浮动元素的位置（在浮动元素下方），而是围绕它，可以理解为没有脱离文本流吧（嗯！个人理解）。

绝对（absolute/fixed）：元素不仅会脱离文档流（整体脱离），还会脱离文本流。定位元素margin值对其他元素没有造成影响，即毗邻或同级元素，元素具体位置由坐标（top、left、bottom、right）表示。

相对（relative）：不会脱离文档流，设置的TRBL元素的文档空间还是会被保留，不会影响其他元素的位置。但设置margin就会对其他元素有所影响(不要被下图所影响，这是以图片底部平齐，其实是div1是同一位置，而div3会因为div2设的margin-top所影响）。

6、BFC（块级格式化上下文）

Formatting Context(格式化上下文)：页面中一块渲染区域，有自己的渲染规则，决定其子元素如何定位，和其他元素的关系及相互作用。

形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。
或者包含在父元素里的元素不会影响到父元素旁边的元素。（比如子元素浮动，如果父元素不清除浮动的话会影响父元素外其他元素的布局）

BFC(Blocking Formatting Contexts)，属于定位方案的普通流。具有BFC特性的元素可以看成是被隔离的独立容器，容器内元素不会在布局上影响外面元素，主要作用是让元素本身（包括它的子元素）能够正确的计算自己的宽高。触发BFC特征的条件有：

1）body根元素；

2）浮动元素：float（left、right）；

3）绝对定位元素：position（absolute、fixed）；

4）显示框类型：display（inline-block、table-cells、flex）；

5）内容溢出框：overflow（hidden、auto、scroll）；

BFC具有以下特征：

1）避免外边距重叠：两个div元素处于同一个BFC容器中（如body），即使设定两个div的margin值为100px，它们的距离也只有100px，而不是200px。通过把两个div放在不同BFC容器可以解决该问题（但对于overflow来说，不同的容器只是设置overflow属性就行[父元素]，子元素设置的margin值才不会被折叠）。注意：但是并不是BFC就能避免折叠，如果上下相邻元素共同设置overflow，即使触发BFC，但是上下margin还是会发生折叠。完全不会发生折叠情况只有触发BFC元素的子集（float、position、display）。

2）包裹浮动流（清除浮动），全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度（包含浮动的父元素没有添加具体的高度，在添加BFC特征后，父元素的高度是浮动元素的高度）——计算高度。

3）阻止元素被浮动元素覆盖（实现两列适应布局也可以，左宽固定[float]，右宽自适应[overflow]，要设置高度）

7、文字

文字自带前后边距，前后距离为0时要设置为margin： 0.

8、transition、transform、animation

1）transition: 用于缩写过渡属性：效果属性名、效果完成的时间、效果速度曲线、效果延迟开始时间与结束时间（all、0、ease、0）。transition实现的动态效果是一组属性到另一组属性的过程（两个样式，最初属性和最终属性，而transition放在最初属性中）

transition: property duration timing-function delay;

2）transform: 应用 2D 或 3D 转换(旋转、缩放、移动或倾斜)。 transform: none | transform-functions;

transform-functions: rorate、scale、translate、skew。【rotate的旋转度数，正数为顺时针，负数为逆时针】

◆rotateX()：元素沿着x轴线旋转，水平宽度不会变，但高度由于转动会变，也就是看起来在Y轴方向上变化。

◆rotateY()：元素沿着y轴线选装，垂直高度不会变，但宽度由于转动会变，也就是看起来x轴方向上会变化。

下图如rotateX()、rotateY()：

①transform-style：flag | preserve-3d；规定如何在三维空间（3D）中呈现被嵌套元素（要先使用transform属性）。

flag：表示所有子元素在2D平面呈现。

persever-3d：表示所有子元素在3D空间中呈现。

②transform-origin：表示元素转换的基点。

transform-origin：X-axis Y-axi;(2D)

transform-origin：X-axis Y-axis Z-axis;(3D)

X( left、center、right、length、%），Y（top、 center、bottom、 length、%），Z（length）。

更多详情，参考：http://www.cnblogs.com/xiaohuochai/p/5350254.html

3）animation: 用于设置元素动画属性：要绑定到选择器的keyframe名称、动画时间、动画速度曲线、动画何时开始、动画播放次数、动画是否轮流方向传播。animation可在多组属性之间进行动态效果的变换过程。
animation：name duration timing-function delay iteration-count direction;

　　三者关系如下：
　　　transition、animation都是设置属性动画效果的，而transition比较单一、而animation可以复杂些。transform作为3D转换属性，也像其他可以在transform、animation动画中设置。transition指定的属性，更多是存在于元素伪类的样式设置上。而animation则是自定义动画效果，其属性animation: scaleActive .6s可以放在元素本身样式或元素的伪类样式设置上(tranform也是,但该属性可以放在animation上设置）。

div {
    margin-top: 200px;
    margin-left: 200px;
    width: 100px;
    height: 100px;
    background: lightblue;
    /*animation: scaleActive .6s;   也可以放在这里*/
    transition: all .2s; // transition: width 0.2s或者transition: transform 0.2s。
}

@keyframes scaleActive{
    from{ transform: scale(0.5);}
    to{ transform: scale(1.2);}
}

div:hover {
    animation: scaleActive .5s;
    transform: scale(1.2);
    border: #3ACACA solid 3px;
}
综上：
transition属性在元素样式设置（transition: all .2s），且all指的属性在元素的伪类样式设置中出现。
animation属性先自行定义，@keyframes scaleActive {}后可以再元素或元素伪类样式中设置,animation: scaleActive .3s;
transition(应该是transform)属性可以在animation定义的动画效果、元素伪类设置效果、元素本身样式设置出现

9、absolute元素居中

要居中的前提是子元素的父元素必须是定位元素，如relative、absolute、fixed；先设置子元素（left：50%），然后在设置margin-left负值，值为子元素宽的一半（如子元素的width: 200px，则margin-left: -100px;）。

10、overflow并不一定能隐藏所有元素

overflow： hidden不能隐藏包含块是整个视区的元素（如视区是body时）。作为position：absolute元素的的包含块只能是最近的具有position：absolute、position：relative的元素，如果任何元素都不具有，则包含块则是body元素。所以当具有overflow：hidden的元素（没有position为非static属性），其后代元素具有position： absolute属性，属性的包含块是body，则不能隐藏元素。

　　最新解释：具有overflow:hidden的父元素，如果要使得具有position:absolute的子元素超出被裁剪，那么该父元素要作为其子元素的包含块才行，也就是具有position属性非static。（多学习啊，妹子，不然回头来看半天都不知道自己写的啥）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .parentAbsolute {
                /*position: absolute; 也可以*/  
                position: relative;
            }
            
            .testOverflow {
                width: 100px;
                height: 100px;
                background: lightblue;
                overflow: hidden;
                margin: 0 auto;
            }
            
            .testAbsolute, .absoChild {
                position: absolute;
                width: 200px;
                height: 50px;
                background: lightpink;
            }
            
            .absorelaParent {
                position: relative;
            }
            
        </style>
    </head>
    <body>
　　　　当具有position：absolute的元素其包含块是body或者是
        <p>overflow属性并不总是能够隐藏所有子元素，当具有position：absolute元素的包含块是body元素或者是overflow：hidden的父元素时，则子元素不会被隐藏</p>
        <div class="parentAbsolute">
            <div class="testOverflow">
                <div class="testAbsolute">
                    包含块是overflow:hidden的父元素
                </div>
            </div>
        </div>
        <br>
        <div class="testOverflow">
            <div class="absoChild">
                包含块是body
            </div>
        </div>
        <br>
        <div class="testOverflow">
            <div class="absorelaParent">
                <!-- 因为absolute会脱离文档流啊  -->
                <div class="absoChild">父元素:<br>relative才隐藏</div>
            </div>
        </div>        
    </body>
</html>

注意：父元素为absolute也可以隐藏。

11、关于absolute的相对位置的参考点

position:absolute是相对于父元素定位的，如果父元素设定padding，则子元素的参考起始点会改变，如父元素padding： 50px，则子元素的top: 0,left:0应该在距离父元素的top:50,left:50处。

　　如果把position属性值是absolute的元素A放入一个position属性值是relative的元素B中，则B就成为A的容器元素，而A将在B的显示区域里按absolute方式进行摆放。

12、文档流和文本流的区别

普通流：元素按照自上而下、自左往右的HTML文档布局显示
文本流：由一系列字符构成，可由多行构成，每一行由一个换行符终止。
文本流将数据读取，在普通流中根据自左向右、自上而下的布局输出显示。
<body>...</body>、<head>...</head>...是一个流

块级元素会占据float元素的空间，比如div、p，但标签里的文字不会；
元素的display属性为inline-block或inline的不会占据float元素位置
文字、图片、视频不会占据float元素的位置,即使被块级元素如div包裹着，但块级元素会跑去占据float元素的位置。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .a {
                width: 200px; height: 110px; border: 1px solid #000;
            }
            
            .a1 {
                float: left;
                width: 50px;
                height: 50px;
                background: lightblue;
            }
            
            .a2 {
                width: 50px; height: 50px; background: lightpink;
            }
            
            .a3 {
                display: inline-block;
                width: 50px;
                height: 50px;
                background: lightpink;
            }
        </style>        
    </head>
    <body>
        <div class="a">
            <div class="a1">块级元素</div>
            <span class="a2"></span>
        </div>
        <div class="a">
            <div class="a1">inline-block</div>
            <span class="a3"></span>
        </div>
        <div class="a">
            <div class="a1">&lt;p&gt;</div>
            <p style="margin: 0;">张雨生--口是心非、大海</p>
        </div>
        <!-- 设置图片,即使<img>元素包裹于div中，图片(文字、视频)仍然不会占据float位置，但div会占据 -->
        <div class="a">
            <div class="a1">&lt;img&gt;</div>
            <img src="../images/border-image.png">
        </div>
    </body>
</html>
其实有个疑问，我想把四个大的div水平排列的，利用position：relative和absolute结合都没有解决这个问题。

            .a:nth-child(1) {
                /*top: 0; left: 0;*/   /*.a--> relative*/
                left: 0;   /* .a-->absolute  */
            }
            .a:nth-child(2) {
                /*top: -110px; left: 205px;*/   /*relative*/
                left: 200px;
            }
            .a:nth-child(3) {
                /*top: -220px; left: 410px;*/   /*relative*/
                left: 400px;
            }
            .a:nth-child(4) {
                /*top: -330px; left: 615px;*/   /*relative*/
                left: 600px;
            }

13、可变、行内、块级元素

可变元素：为根据上下文语境决定该元素为块元素或者内联元素。

　 applet——java applet

　 bdo——bidi override

　 button——按钮

del——删除文本

iframe——inline frame

ins——插入文本

map——图片区块(map)

object——object对象

script——客户端脚本

行内元素：

　　a——锚点

　　abbr——缩写

　　acronym——首字（h5不支持，可用<abbr>代替）

　　br——换行

　　big——大字体

　　cite——引用

　　code——计算机代码（引用源码）

　　dfn——定义字段

　　em——强调

　　font——字体设定（不推荐）

　　i——斜体

　　img——图片

　　input——输入框

　　kbd——定义键盘文本

　　label——表格标签

　　q——短引用

　　s——中划线（不推荐）

　　strike——中划线

　　samp——定义范例计算机代码

　　select——项目选择

　　small——小字体文本

　　span——常用内联容器。定义文本区块

　　strong——粗体强调

　　sub——下标

　　sup——上标

　　textarea——多行文本输入框

　　tt——电传文本

　　u——下划线

　　var——定义变量

块级元素：

　　address——地址

　　article——文字内容

　　aside——伴随内容

　　audio——音频播放

　　blockquote——块引用

　　canvas——绘制图形

　　dd——定义列表中定义条目描述

　　dl——定义列表

　　fieldset——form控制组

　　form——交互表单

　　figcaption——图文信息组标题

　　figure——图文信息组

　　footer——区段尾或页尾

　　h1、h2、h3、h4、h5、h6-——标题

　　header——区段头或页头

　　hgroup——标题组

　　hr——水平分隔线

　　noscript——可选脚本内容（对于不支持script的浏览器显示此内容）

　　menu——菜单列表

　　noframes——frames可选内容（不支持frame的浏览器显示此内容）

　　ol——有序列表

　　output——表单输出

　　p——段落

　　pre——格式化文本

　　section——一个页面片段

　　label——表格

　　tfoot——表脚注

　　ul——非排序列表

　　video——视频

14、form表单中的button组件

在form表单中，直接使用button组件需要标明button的type属性，不然点击没有效果。也可以<input type="button" value="按钮">

15、Colors合法颜色值

　　十六进制颜色：#RRGGBB（红、绿、蓝） #000000~#FFFFFF

　　RGB颜色：#RGB（红、绿、蓝） #000~#255、#0%~#100%

　　RGBA颜色：#RGB（红、绿、蓝，alpha）#000~#255、#0%~#100%、alpha：0.0~1.0

　　HSL颜色：HSL（色相、饱和度、亮度）——使用色彩圆柱坐标表示

　　　　　　色相：是指在色轮上的程度（从0~360），0/360是红色、120是绿色、240是蓝色；

　　　　　　　饱和度：（0%~100%）是一个百分比，0%意味着灰色和100%的阴影，是全彩；

　　　　　　　亮度：（0%~100%）是一个百分比，0%是黑色，100%是白色；

　　HSLA颜色：HSLA（色相、饱和度、亮度、alpha），alpha：0.0~1.0

　　预定义/跨浏览器的颜色名称：147颜色是在HTML和CSS颜色规范预定义的颜色名称（17个标准色加上130多个其他颜色）。

16、关于浮动

　　非浮动元素包含浮动元素时，要高度自适应需在非浮动元素中添加overflow：hidden清除浮动。

17、ul自带的margin属性

　　去除列表的自带属性是ul {margin: 0}，而不是ul li { margin: 0}。

18、字体增大或缩小时布局

　　控制字体变大或缩小时，应该给字体所在容器设置样式【display: inline-block/float: left/right，并添加宽度width】，当字体变换时，如需换行，可以整体排列好。

19、元素并排设置

　　当有两个元素并列时，可以使用float设置元素的水平位置，可以同时同一方向，或者left、right，再margin其他属性调整，清除浮动就好。

20、多行省略

<style>
    div {
        overflow: hidden;
        /* 1、 设置了具体宽度，高度不设置具体值，如果设置具体值，文字很多的话，会在规定的容器内显示，其余隐藏，只在指定第几行出现省略号，超过该行就不省略，所以在设置具体宽度时，高度不设置（100%、auto也可以）,
         * 这种情况下，只要-webkit-line-wrap的值超出文字本身需要的高度都会自动省略，如文字十行就显示完毕，但设省略行在15行时。*/
        /*width: 100px;
        height: 100%;*/
        
        /* 2、 规定具体宽高情况，知道大概在该高度容器下能容下多少行的文字，需设好匹配的-webkit-box-orient值，比如可以放两行，但设第一行超出就省略，那么第二行不出现省略符号 */
        /*width: 200px;
        height: 40px;*/
        /* 3、规定具体高度，宽度自适应同上  */
        width: 100%;
        height: 40px;
        
        /* 多行 */
 　　    display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
        text-overflow: ellipsis;
        text-align: justify;
        -webkit-line-clamp: 2;  /* 当容器不够时，在第几行开始省略文字 */
        -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象子元素的排列方式*/

       单行只需：overflow：hidden; text-overflow: ellipsis; white-space: nowrap;
    }
</style>
<div>
    生命并非短暂，只是我们浪费的太多；一生足够漫长，如能悉心投入，足以创建丰功伟绩；然而，在漫无目的、挥霍无度、汲汲于无聊琐事，最终陷入万劫不复的终极之时， 我们才会幡然大悟。
</div>

21、关于字体、图片

　　font-family:可以引用系统自带的一些字体，"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。

　　设置图片时，一般给个固定的高，超出再overflow：hidden剪裁。

22、div作为容器宽高值设置

　　div作为容器包含内容时（width:100%, height:100%/auto），如果内容为空，则容器的背景图片不能显示，设置border值，也不能被撑开。

23、文字间隔

　　letter-spacing：增加或减少字符间的空白（在每个文字或单个字母后面），不能应用于一行的开始或结束，值如下：

　　　　normal：默认，规定字符间距没有额外空间；

　　　　length：定义字符间的固定空间（正值，增大；负值，减小）；

　　　　inherit：从父元素继承letter-spacing的值；

　　注意：设置letter-spacing值后文字不能居中，添加text-indent属性即可，两个属性值要相同。

　　text-indent：规定文本块中首行文本的缩进（负值，左缩进；正值，右缩进），属性值如下：

　　　　length：定义固定的缩进，默认值0；

　　　　%：基于父元素宽度的百分比缩进；

　　　　inherit：规定应从父元素继承text-indent属性；

　　在这里对“继承父元素”做个简单笔记，一直都是印象中：

　　text-indent应用于块级元素（如果首行有图像，就图像随文本一起移动，），当自身没有设定宽度时，text-indent缩进的百分比值根据父元素设定；如果自身有宽度，则根据本身宽度做缩进，也就是说缩进的块级元素在没有设定具体宽度或text-indent值时，根据父元素进行设定，如果自身有相应值就先根据自身的做计算。

　　font-style: italic;

24、display：flex、display：none

　　这两个属性不要放在同一个容器中用，会有一个失效，最后面设置的有效。

25、clear: left

　　float，也可以用于行内元素。

26、网页图片大小设置：

　　如果是banner，占屏幕宽百分百的：

　　.bannerBox { overflow: hidden;width: 100%; max-height: 220px; margin: 15% auto 5%; }

　　.bannerBox img { width: 100%; height: auto; }

　　如果是有高度限制的;

　　.homePicBox { overflow: hidden; width: 100%; height: 130px; }

　　.homePicBox img { width: 100%; height: 100%; object-fit: cover; } 这里的width其实是屏幕大小的48%；以屏幕一半为图片容器宽度。

　　如果图片在容器的表现形式是以背景展示的，那么可以设：

　　.homePicBox { overflow: hidden; width: 100%; height: 130px; background-image: url(xxx.png); background-repeat: norepeat; background-position: center center; background-size: cover; }，表示形式同上。

27、浮动容器设置

　　关于容器中有设置左右浮动，包裹浮动元素的父元素要注意清除浮动，如<li>标签左右浮动，那<ul>标签记得添加overflow: hidden。

28、ul

　　ul标签自带padding、margin属性，如果不设全局属性|（ * {padding:0; margin:0;} ），则需要在该属性设置内外边距为0才能更好布局。

29、nth-child

　　.titleContain p:nth-child(1)，取得是.titleContain类下的第一个元素，且该元素必须是p元素

30、水平垂直居中新技能

　　1.使用absolute属性进行水平、垂直居中并不可怕（影响其他元素的布局），可以在该定位元素外添加一个relative的父元素，并且该父元素是具有具体的高度值的，这样下面元素就不会占位。

　　2.margin: 0 auto：水平居中；margin: auto 0:垂直居中。

　　3.对于文字居中，可以给文字所在的容器设置flexbox布局（块级或行内），并设置align-items:center即可。也可以display:table-cell，再vertical-align：middle（注意设宽高值）。

31、input中type=search

　　当input标签的type属性值为search时，右边会默认有个关闭的标志X，可用下列代码去掉：
　　input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

32、关于linear-gradient的值设置

　　conic-gradient()：圆锥形渐变，起点是图形中心，渐变方向以顺时针方向绕中心旋转实现渐变效果（兼容性较低，目前Chrome 6-9支持）。

　　这里1和2的这两个空格子是占比100px（由A到B点决定），也就是两个空格子占比是100%的，当你两个格子的加总不是百分百，那1格子的大小将决定2格子的大小

33、box-shadow、border / color

　　box-shadow: h-shadow v-shadow blur spread color inset
　　水平阴影面阴影面积模糊距离阴影大小阴影颜色从外层的阴影（默认）改变为阴影内侧阴影
　　当设置一边有阴影时，总觉得相邻两边也会有部分阴影，这时可以设置第四位参数（阴影大小）为负值可解决该问题。

　　border: width style color
　　当不设置color时，默认随容器的color属性（字体颜色）一致

34、:after、:before

　　:after、:before在元素前后加上指定的内容。

35、继承

　　比如设置元素的color属性，如果在包含p标签的div标签中设置了，那p标签的文字color属性继承div标签的。

36、bit是比特，一个字节是8bit，每个汉字或汉字字符占两个字节（16bit=2B），每个英文或英文字符占一个字节（8bit=1B）。

　　1B=8bit、1KB=1024B、1MB=1024KB、1GB=1024M、1TB=1024GB。

37、关于选中样式设置

　　选项的选中样式改变应该是与原来的不一样，而不是与未选中状态多了些其他样式，比如说选中时border-left是有值的，那未选中状态也应该是有值的，只是颜色透明transparent，这样才不会在选中时字体会被网右挪，看起来效果不平稳。

38、响应式设置元素高

　　display: none 元素是没有物理尺寸的，而visibility: hidden有物理尺寸，但是页面会有留白，　　

在tab切换页中，未加载的页面部分（默认先隐藏的div），在这部分div中，如果要设置某个元素的高度根据宽度自适应，这个原来被隐藏的元素的width默认是100px（如果元素之前设定好宽高，预加载时的图片就按照设定宽高设置），高度也会根据这个宽度适应，造成加载显示问题，也就是即使加载完成后，页面容器宽度不是100px，但这个容器的高度还会是以100px宽度设置的高度，在tab切换函数中再重新加载的话造成数据的浪费。解决这个问题的处理方法是：比如包裹img标签的容器，可以使用console.log在控制台中显示一层一层的父级元素，直到找到父级元素一直有值作为可作为设置width的参考元素。

　　跳出固定的思维模式，如像自适应页面布局，width都是按百分比的，img标签的包裹元素的width也可以根据上级或在再上级元素设定。注意思考问题出现的正真原因比如说你是在用width()获取元素的高度值的，这时候但是得到的高度值不是预想的高度值，应该去查width()在什么时候不能正确获取元素宽高值，而不是一直在想，什么情况下元素的宽度值为100px。

　　遇到这个问题的原因是，元素的父级元素在设置display:none时，使用jQuery的width()、height()是无法或者隐藏的子元素的宽高的，可以使用插件获取隐藏元素的宽高。

39、background的缩写顺序

　　background的值的顺序是background-color，background-image，background-repeat，background-attachment，background-position,background-size（如果用background-size,一定要用/分隔）。
body{ background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center/100% 100%; }

40、设置position为absolute的元素设置height为100%或0，再设置背景色是没有效果的。除非包裹该元素的层设置了fixed或absolute。（relative是不行的）

41、分辨率

42、导航栏设置

　　关于设置PC或web端的顶部或底部导航栏固定时，如果设置了positive:absolute/fixed，注意用一个position:relative的元素包裹（且根据子元素设置好高度，不要脱离文档流，遮住其他元素部分），不要以body元素包含这个定位元素。按理来说，导航部分不遮住其底下部分也可以采取设置底下部分距离导航的距离（margin-top: 200px），但是在多个页面有导航栏时，这样设置不大理想，代码不够优化、全面。

43、nth-child

　　如下图，使用 nth-child 取 .storeInfo 的第一个p元素应为 .storeInfo p:nth-child(2)，而不是 .storeInfo:nth-child(1)【这个取的就是 .storeInfo的第一个元素 <h2>】。