小K的H5之旅-实战篇（一）

一、前言

本K在经过两个星期的html和css学习之后，第一次去尝试完成一个网站主页的制作。在四天之后，本K也终于完成了杰瑞教育主页的html和css部分，至于部分涉及js的部分，因为本K还没有学习过这一块，所以就先做了个样式（网页部分效果如下图）。在完成这一页面的时候，K又发现了许多我们还没有学到，但是在网页制作中经常会用到的一些属性，会遇到一些细节上的问题。因此，K写了这篇博文，来记录一下这些属性和问题。

 

 

二、属性记录

1、display

      display用来定义元素的框的类型，常用的有两个值：block（将元素框类型转为块级）和inline（将元素框类型转为行级）。在这次网站制作中，在使用频率上，K使用的前者居多，经常用在img和span标签上，尤其在需要两者浮动或单独占据一行时。（不要问我为啥不用p标签来取代span，仅仅是因为觉得p有点不太顺眼而已=。=）

2、position

      position用来对页面中元素进行定位，常用值有：relative（相对）和absolute（绝对）。在这次网页制作中，凡是float不能解决或者比较麻烦的细节上，K都是用的position来解决的。而且，position这个属性也会常用在网页的大图处理上，这一点会在第三部分详细阐述。另外，用position的时候，一定要注意周围元素的层次关系，否则会出现遮挡覆盖的问题。

      详解如下↓

    相对定位

    使用position:relative;设置元素为相对定位的元素

    定位机制：

      相对于自己原来的文档流中的位置进行定位，当不指定top等定位值时，不会改变元素位置

      相对定位元素仍会占据原有文档流中的位置，而不会释放

    使用left/right top/bottom调整位置，当前两者同时存在，left生效；后两者同时存在，top生效（不常用，常用来锁住绝对定位）

   绝对定位

   使用position:absolute;设置元素为绝对定位元素

   定位机制

      相对于第一个非static的祖先元素（使用了relative、absolute、fixed定位的祖先元素）进行定位

      如果所有均未定位，则相对于浏览器左上角进行定位

     使用absolute的元素，会从文档流中完全删除，原有空间释放不占有

   fixed

    position:fixed;是一种特殊的绝对定位，父容器无法使用relative锁住

    定位机制：永远相对于浏览器进行定位

   Z-index

    作用：设置定位元素的z轴层叠顺序

    使用要求：

      必须是定位元素才能使用，absolute/relative/fixed 

      使用时需要考虑父容器的约束。

        如果父容器为z-index:auto; 则子容器额z-index可以不受父容器的约束；

        如果父容器进行了设置，则子容器的层叠将以父容器的为准（在同一容器中的不同子元素仍可以通过自己的z-index调整层叠关系）

     z-index:auto; 与 z-index:0; 的异同

       前者为默认值，与后者处于同一平面

       前者不会约束子元素的z-index层次；而后者会约束且与父元素处于同一平面 

     z-index相同（处于同一平面的定位元素）的层叠关系：后来者居上！

 

3、transform

      transform用来定义元素的2D、3D转换效果，在整个主页中算是比较常用的属性。具体常用属性值有缩放scale()和Y轴旋转rotateY()，其他的不做过多的叙述，就借鉴一下W3School（http://www.w3school.com.cn/cssref/pr_transform.asp）上的介绍吧。

4、transition

      transition用来定义转换的过渡效果，比如转换的时长一类的问题。

三、问题记录

1、CSS选择器权重计算问题

       行内（1000）>ID选择器（100）>class选择器（10）>标签选择器（1）

       举个栗子：#div .div .div1 .div2 div  的权重就等于100+10+10+10+1=131.

2、如何处理网页中1920大图的放置问题

举个栗子：

（html部分：原图经切割为4等分，插入方式为div背景图拼接）

<div id="adv">
    <div class="adv">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </div>
</div>

（css部分）

#adv{
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
}
#adv .adv{
    position: absolute;
    width:1920px ;
    height: 500px;
    left: 50%;
    margin-left: -960px;
}
#adv div{
    width: 480px;
    height: 500px;
    float: left;
    background-repeat: no-repeat;
    background-size: contain;
}
#adv .one{
    background-image: url(../img/abstract/20170121094034635.jpg);
}
#adv .two{
    background-image: url(../img/abstract/20170121094108366.jpg);
}
#adv .three{
    background-image: url(../img/abstract/20170121094154220.jpg);
}
#adv .four{
    background-image: url(../img/abstract/20170121094218539.jpg);
}

 （效果图如下 请主动忽视掉两侧的侧边栏=。=）

 

3、网页的三维结构问题

      网页是一个立体的结构，在三维空间上，除了我们所见到的x、y轴上的平面图像，还包括有在z轴上的所谓的元素间层次的问题。在大部分时候，我们经常会遇到在使用绝对定位时，让其周围元素被掩盖在绝对定位元素以下的问题，在这种时候，我们就可以利用在被掩盖元素的样式上添加z-index属性并赋值来将被掩盖的元素“浮”到上层来。当然，多个z-index存在时，是根据其赋值大小来决定层次，值越大，层次越向上。

4、其他问题

      4.1 在网页制作时，会发现整个页面与浏览器边之间存在一定的边距，这种时候我是通过在全局上设置margin和padding为0来解决的。

      4.2 在使用ul或者ol或者dl时，去除子项前的标志后，ul/ol/dl会默认自己存在一层边距，此时也是利用margin和padding为0来解决的。

      4.3 在网页制作时，div是一个非常常用且好用的标签。

四、后记

      网页制作真的是一个非常活泼的东西。以前在练习独立的板块时，K觉得网页制作是一件很枯燥乏味的事情。但当K真正制作一个完整网页的时候，在整体把控、页面布局、细节处理、还有为元素添加各种样式之后，整个页面所呈现的活泼的感觉，以及完成一个页面的成就感和满足感让K觉得网页制作，或者说未来K要接触的整个前端工程会是一个很跳跃、很活泼的工作。