一、前言
本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要接触的整个前端工程会是一个很跳跃、很活泼的工作。
- 还没有人评论，欢迎说说您的想法！
客服
