爱上调试:div初探，参照物的重要性！

已经好久没有更新文章了，最近三十年难得一遇的服务器崩溃被我们实验室的热血儿们碰上了，跟着实验室大神们学了不少服务器的知识。今晚终于腾出时间来记录一下我的小网页用到的微弱知识。本文持续更新。

10.15——“把抱怨的时间用在积极工作上吧。”

大琨近期在OJ维护平台实验室负责往平台上添加一个新的page，内容为OJ新手常见问题解析汇总。

前期工作自然是先把整体框架搭出来。至于美工、编程是后期工作。对于大琨这样的初学者，善解人意的卢老师自然留给了我很长的时间。

其实大琨也是很有执行力的。开始的时候有朋友提到了一个“框架”的概念。正好手边有本书有详细的frameset方面的知识，于是想要试着做一下。

尽管frameset是被HTML5淘汰的东西，但是之前我百度了一些关于frameset的生存现状

首先，写了一个index.html。

<frameset rows="10%,*" cols="180" frameborder="0" border="0" framespacing="0">

         <frame src="huizong_top.html" name="topframe" scrolling="no" noresize="noresize" id="topframe" title="topframe" marginwidth="0" marginheight="0" align="center"/><!--头框架-->

    <frameset cols="10%,14%,50%,15%,10%" frameborder="0" border="0" bordercolor="#675d5d" framespacing="0"><!--左界-->

                            <frame src="huizong_leftborder.html" />

                            <frame src="huizong_left.html" name="leftframe" scrolling="no" noresize="noresize" id="leftframe" title="leftframe"   />

                            <frame src="huizong_main.html" name="mainframe" scrolling="yes"  id="mainframe" title="mainframe" />

                            <frame src="huizong_right.html" name="right_frame" scrolling="no"  id="right_frame" title="right_frame" /><!--右框架-->

                            <frame src="huizong_rightborder.html" name="rightborder_frame" scrolling="no" noresize="noresize" id="rightborder_frame" title="rightborder_frame" /><!--右框架-->                          

                   </frameset>

</frameset>

一开始不明白如何分出多列。但是将代码排版后可以明显看懂。大致上遵循了“写到哪画到哪，需要什么画什么”的原则。

第一句是将画出一段区域，行数占了屏幕的10%，列是具体数值“180”，默认px为单位。即下图（一）区。

 

同理，第二句<frameset>开辟一块新的区域，即下图（二）区。紧接着cols="10%,14%,50%,15%,10%"表明以列的方式按百分比将（二）区划分成五个区域，分别占据（二）区的10%，14%，50%，15%，10%。接着在下面按照顺序用<frame>标签设置相关参数。当然列宽加起来为100%只是理想状态，这一点在后面的div中将继续提到。

好，就点到为止吧。frameset给我的感觉就是特别方便，忽略现在普遍对标签的高要求，它的优势之一就是能减少服务器与浏览器之间的流量。

 

接下来，就是学习div的阶段了。

我的总结就是——div是一个一个的框，或者用更为广泛的说法就是“盒子布局”。每一个div都是一个“容器”，放置相应的对象和属性（不知道这样说是否贴切，但是对于软件工程专业的大琨来说，把div理解为封装好的method还是挺生动的）。而且通过一次一次地修改自己写的小网页，从页面效果来说，我得到了最重要的一个结论，那就是——如果想用div，就必须搞清楚“参照物”。接下来，我将通过展现我那蹩脚的页面来印证我的结论。

首先，我想先挂出我那蹩脚的页面，让大家看看。

听学长的建议加上边框看看：

可以发现在最初的div不居中，明显我想要一个1-3-1的结构布局。但是以上网页存在如下几个最显著的不足：

1. footer（底部）没有想要的居中效果，右边超出了整个的div容器。
2. footer浮在中间行的三列之上。
3. 各个div高度杂乱。

晒一下我蹩脚的代码：

CSS样式：

*{margin:0;padding:0;}

html,body{

background-image:url(image/background.jpg);

height: 100%;; width:100%; margin:0; padding:0;//宽高自适应

overflow:scroll;//设置滚动条

}
#wrap { overflow:hidden ; width:85%; height: 100%; margin: 0 auto; }

#head{

<span style="white-space:pre">	</span>width: 100%;

<span style="white-space:pre">	</span>height: 15%;

}

#left{

<span style="white-space:pre">	</span>float: left;

<span style="white-space:pre">	</span>width: 20%;

<span style="white-space:pre">	</span>height: 80%;

<span style="white-space:pre">	</span>margin-top:5%;

}

#main {

<span style="white-space:pre">	</span>float: left;

<span style="white-space:pre">	</span>width: 60%;

<span style="white-space:pre">	</span>height: 80%;

<span style="white-space:pre">	</span>margin:auto;

<span style="white-space:pre">	</span>white-space:nowrap;

}

#main-inner {

<span style="white-space:pre">	</span>height: 100%;

<span style="white-space:pre">	</span>margin-left: 0;

}

#right{

<span style="white-space:pre">	</span>float:right;

<span style="white-space:pre">	</span>width:20%;

<span style="white-space:pre">	</span>height:80%;

<span style="white-space:pre">	</span>margin-left:0;

<span style="white-space:pre">	</span>margin-top:5%;

}

#footer{

<span style="white-space:pre">	</span>background-color:hsla(140,75%,95%,0.5);//透明色

<span style="white-space:pre">	</span>height:5%;

<span style="white-space:pre">	</span>width:100%;

<span style="white-space:pre">	</span>position:fixed;

<span style="white-space:pre">	</span>bottom:0;//始终位于底部

<span style="white-space:pre">	</span>padding:0;

}

HTML代码：

<div id="wrap">

<span style="white-space:pre">	</span><div id="head">

        </div>//结束head

        <div id="left">

        </div>//结束left

        <div id="main">

            <div id="main-inner"></div>

        </div> //结束main

        <div id="right">

        </div>//结束right

        <div id="footer">

      </div>//结束footer

</div>//结束wrap

进入修改阶段…..

1. 参考经验博文

首先解决布局问题，如何使用div+css布局。CSDN上有一篇博文给了我很大的帮助，如何用div+css布局页面，相对讲的比较详细。一层一层嵌套，响应了“盒子”式的布局。盒子里可以有小盒子，每个小盒子都装有自己的对象和属性。（对于软件工程专业的大琨来说，将盒子结构理解为封装好的函数也是挺抽象的~.~）

2.参考建议

把自己的网页源代码交给小智哥哥看，虽然得到了一句“页面问题太多，我已无从下手”的无奈评价，但是也得到了宝贵的建议。

对于第一个问题——footer（底部）没有想要的居中效果，右边超出了整个的div容器，小智哥哥给出的建议就是，将最外层的<wrap>的position属性设置为relative(相对定位)，将footer的position属性设置为absolute（绝对定位）。对于第二个问题，则应该在写完第二行三列的<div>之后,加一句<div style="clear:both"></div>,清除一下浮动设置，再写<div id="footer"></div>。使用此方法后，页面效果如下：

发现footer乖乖地呆在应该在的区域了。

设置position的定位称为“绝对定位法”，将父元素设为相对定位，子元素设置为绝对定位，则子元素的偏移量以父元素为基准。设为绝对定位的元素脱离标准流，这些元素对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。又因为

position:absolute;
bottom:0;

的设置，使得footer始终漂浮在底部。

至于<div style="clear:both"></div>,适用于清除浮动。clear:both该属性的值指出了不允许有浮动对象的边。通俗的讲：这段代码的做用是：清除同行元素，不允许其它元素与之在一行内。这样上面三列就不会与footer在同一行。3.自己尝试修改上面在frameset中说到，将元素的宽度（高度）百分比加起来为100%是一种理想状态，在div布局中我们来试一下：

此时第二行的左中右三个大元素分别占20,60,20，达到了100%，为了更明显地找出问题本质，我们将id="right"的元素取消上边距。页面效果如下：

这是在#right是右浮动的状态，

很明显，如果按照完全100%的比例来，系统会因为四舍五入的原因造成整体加起来超过100%，从而造成换行。对于每一列占宽度的百分比，大琨以前还用元素审查量出元素宽度，用计算器很计较地算过，的确会有误差。
因此这里，我三列都是适应宽度的，所以都是百分比，调整#main的宽度就好了，可以用小数增加精度。
 -------------------------------------分割线----------------------------------------------
上面讲的都是小问题。
接下来继续强调“参照物”，即偏移基准。
由于还没有将我们小组的成员联系方式加在页面上，于是大琨想要在右边滚动字幕的下方再添加一个<div>。这样就要在原来<div id="right">的元素块中开辟两个子元素，分别是#right_top和#right_bottom.那么根据如何用div+css布局页面这篇博文，大琨又继续添加。最初代码如下图：

当时大琨没有参透“参照物”的概念，就是认为所有的百分比都是以整个body为基准的，所以，右边的框框们都应该是一样的宽度。所以都设置的20%。结果页面就变成了这样：

#right_top和#right_bottom都是右浮，所以都紧贴右边分布，的确是以20%的比例存在的 = =！ 可惜，他们的参照物不是body，而是它们的父元素，即#right。这次大琨才知道了偏移基准的概念。

之前在查阅相关“屏幕宽高自适应”方面的东西时，曾看到过有人这样说，设置宽度时，可以直接使用百分比，但是在使用height时，百分比不管用了！结论就是：必须指定html和body的高度是100%，再设置其他子元素，这时高度百分比才能有效。应该也跟大琨强调的“参照物”有所关联吧！

最后再提一句 margin属性的设置，margin-right,margin-bottom,margin-left,margin-top,如果讲究细节，就分开设置。只写margin=5%代表外边距都为父元素的5%，会出现不必要的麻烦。

至此，大琨的div初试就能出一个像样一点的轮廓了。

当然，这是初步成果，接下来，导航的特效，页面配色，动态调用还要持续努力！