w2-2

---------------问题：

--------1.background-image插入图片作为背景 与 div 中嵌套img作为背景的区别

与background ：url（）；插入图片的区别？

    background：url（）；与background-image：url（）；意义是等同的；前者是背景css样式集合的简写；

     background-image是只能看的，而<img />是一个document对象，它是可以操作的。比如更换img src的路径可以达到更换图片的目的，也可以移动它的位置，从document中移除等等操作
    一般来说，如果是装饰性的图片就使用background-img（图片用来当作块的背景的情况，可以用于宽高给定的同时不希望图片拉伸且允许图片截断的情况），如果和文体内容很相关就使用img（图片是页面的组成部分而不是修饰部分的时候选用img标签，显示图片只给定宽或高且不能截断图片并要保证图片宽高比的情况下选用img标签）。
    在网页加载时，会先加载网页结构内容，即先加载img，之后再加载background-image 图片；

    background当插入图片后，其图片大小主由盒子的长宽高决定，若要适应于盒子大小可background-size：100% 100%；





作业:

-------1.自适应:

    1】高度自适应布局

      原理就是把每个模块设置为绝对定位，然后设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高，然后中间模块的高度就自适应了。

    2】宽度自适应布局：
    中间一列优先渲染的自适应三列布局，优先渲染（加载）的关键：内容在html里面必须放在前面。自适应的div必须放在left和right前面且包含在一个父div里。父div，left和right模块都向左浮动，然后对自适应的div（就是父div里的子div）设置margin：0 200px，然后对left的margin-left的属性值设置为100%的负数，就是margin-left：-100%；对right的margin-left的属性值设置为自身宽度的负数，就是margin-left：-200px。

注意：自适应的div必须放在left和right前面且包含在一个父div里。

-------2.头部固定：

    nav{
    position: fixed;
    top: 0px;
    z-index: 9999;
}

-------3.选择器的优先级：

       直接标签内的样式》ID  》class  》标签选择器 》

-------4.overflow：

     https://www.cnblogs.com/xiaohuochai/p/5289653.html

-------5.position ：

    在页面内，第一个设置relative的盒子的位置定位依据是前一个对象的位置来参照的

-------6.网页底部有滚轮，导致网页宽度变大，不能与网页适应。

    body{overflow-x：hidden；}

-------7.

<div class="main">

        <div class="content"></div>
     </div>


    <div class="main content"></div>
        ·两者不同：即使样式不冲突，还会有差异。

-------8.内容部分鼠标滑动效果更正：

    先将文本内容的高度设置为标题的高度，再 overflow：hidden;
    再a:hover时，height：变为整体文本内容高度，overflow:visible;