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

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

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

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

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

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

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

首先，写了一个index.html。

</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的结构布局。但是以上网页存在如下几个最显著的不足：

footer（底部）没有想要的居中效果，右边超出了整个的div容器。
footer浮在中间行的三列之上。
各个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

进入修改阶段…..

参考经验博文

首先解决布局问题，如何使用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初试就能出一个像样一点的轮廓了。

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

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

STM32F030 Nucleo-开发调试的经验USART的重要性
作者:华清远见讲师先声明一点,我自己不是高手,也不是大神,只是积累了一点点,想分享一下罢了! 还记得那会我在初学51单片机时,当得知P89V51系列单片机支持在线仿真.跟踪代码时,那是一个兴奋啊,无 ...
Xcode的调试技巧
转自:http://www.cnblogs.com/daiweilai/p/4421340.html#biyouji 目录前言逼优鸡知己知彼百战不殆抽刀断Bug 普通操作全局断点(Glob ...
iOS调试技巧（转载）
IOS各种调试技巧豪华套餐(转载) 目录前言逼优鸡知己知彼百战不殆抽刀断Bug 普通操作全局断点(Global BreakPoint) 条件断点(Condational Breakpoin ...
iOS各种调试技巧豪华套餐
转载http://www.cnblogs.com/daiweilai/p/4421340.html#biyouji 目录前言逼优鸡知己知彼百战不殆抽刀断Bug 普通操作全局断点(Globa ...
IOS各种调试技巧豪华套餐（好东西）
目录前言逼优鸡知己知彼百战不殆抽刀断Bug 普通操作全局断点(Global BreakPoint) 条件断点(Condational Breakpoints) 打印的艺术 NSLog 开启 ...
教你使用faceBook的chisel来提高调试效率
2019独角兽企业重金招聘Python工程师标准>>> 首先如果使用lldb,最好你要学着使用chisel来提高效率,否则你会浪费很多的时间,除非你自己会写python脚本,自己封装 ...
iOS 对付内存泄漏，来说说我的调试方法
2019独角兽企业重金招聘Python工程师标准>>> 苹果在iOS5推出了ARC(自动引用计数)技术,此模式下编译器会自动在合适的地方插入retain.release.autore ...
3D渲染技术分享：3D游戏开发渲染调试高级技巧
零.本文主要知识点友情劝退:全文7400+字如果知识点里没有你想要的,那可以直接拉到底,与评论区大神一战. 最初的计划是想写一篇关于KylinsGraphicsDebugger实现原理的文章,但感 ...
室友打了一晚上游戏我学会了使用GDB调试
gdb调试 GDB的重要性启动gdb 查看程序的源码 gdb启动程序设置断点删除断点或者或者禁用断点单步调式查看这个变量的值 gdb 调试core文件使用gdb调试正在运行的程序 gdb ...
通过Webkit远程调试协议监听网页崩溃
背景介绍因为正在开发一个项目,而这个项目使用到了puppeteer,其中有个功能是在puppeteer打开的chrome里打开多个Tab,并进行管理. 虽然puppeteer可以打开多个网站,但是并 ...

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

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

最新文章

热门文章