下面是小编帮大家整理的各种浏览器对于网页布局边框的理解方式...（共含5篇），欢迎阅读，希望大家能够喜欢。同时，但愿您也能像本文投稿人“是果多多吖”一样，积极向本站投稿分享好文章。
虽然起了一个看似 的题目，但本文可以说完全是 的人（比如我~）的一种消遣~通常开发人员都有自己的放松方式，缘起坛里某位xd问的一个关于边框的问题，于是就打算搞搞清楚。写文章用不了太久，倒是图材准备了老半天。谨以此文，让我们来消遣下各个浏览器对于边框的理解方式。
参与此次测试的浏览器包括windows下的几乎全部：ie6，ie7，ie8，ie9preview，chrome，firefox，safari，opera，seamonkey。各版本皆为网上下载的最新版。并且由于这次的测试里，IE678的表现一致，firefox和seamonkey又是裙带，所以合并作IE8和firefox。下图就是这次浏览器的截图：
上面的这种排列顺序是故意的，
下面的测试里就会显示出其原因，截图也都是按照这个顺序排列的。
首先看下面这张图，六种浏览器里显示了一个20X20的DIV，其边框为top:2px，其余1px。似乎没有什么不同。这是由于1px的细微让我们没有在意。(事实上这整个问题我们本来就不需要在意~)
先把问题简单化，单边2px，三边1px，并将结果放大5倍，我们能清楚的看到这种差异——opera和safari相反，ie8缺胳膊少腿，下面三个家伙一致~这里要注意到的是第二行3者在交汇处都有渐进效果。
也许我们该让这种效果变得更加明显。当仅仅加粗单边之后(10px)，IE8的怪癖显露无疑。opera和safari依旧相对。下面3个统一战线的渐进变的更加明显。
网页布局教案
第六章网页布局 教学目标： 知识与技能： n 常用的网站结构式 n 网页设计（结构式的应用） 1. 使用Photoshop制作网页框架 2. 使用Dreamweaver制作网页框架 情感态度： 随着人类文明的不断进步，社会化大生产时代将作为人类社会的最终形式而存在，个人英雄主义的时代早已经结束，合作意识对社会的发展至关重要。合作是一种能力，更是一种艺术。唯有善于与人合作，才能获得更大的力量，争取更大的成功。现代社会，分工细化，竞争激烈，只有通过小组合作的力量，才能最大限度地实现自己的价值，创造辉煌的人生。 教学重点： n 会使用结构式制作网页 教学难点： n 会使用Dreamweaver制作网页框架 教学方法： 讲授法、演示法 教学课时： 1课时 教学过程 回顾上章内容 v 色彩的象征意义有哪些？（红色、蓝色） 喜庆、幸福、鲜血、战争、危险、狂热 v 色彩的感觉有哪些 冷暖、轻重、进退、兴奋与沉寂 课程导入 通过以下几个网页大家看看它在布局上有什么特点？ 一、常用的网站结构式 在网站中，网页的框架结构就是网站的骨架，是基础。下面来讲解几种常用的网站结构式。 v 上下结构式：结构比较开阔，大的面积可以充分展示网站的形象图片，但由于栏数少，容易给人没有气势的感觉。 网页上下结构式的两种表现形式 来看一下相关的网页实例 v 左右结构式：清晰分列两旁的结构式。一般左侧放置导航，最上边放公司的logo；右侧是正文、内容部分或者企业形象展示。左右结构式和上下结构式一样，常被用于企业网站。 网页左右结构式的.两种表现形式 来看一下相关的网页实例 v 上左右结构式：下方两栏的宽窄营造的网站气氛不同。图中均为上左右结构式，但人们浏览网站时，首先看到其中的信息最重要的（用灰色标注）部分。它和左右、上下结构式不同的是：信息相对丰富。 网页上左右结构式的表现形式 来看一下相关的网页实例 v 上左中右结构式： 和上左右结构式相比，上左中右的信息容量更大，一般门户网站多采用这种结构式。但这种结构容易是页面拥挤，看起来比较繁杂。 网页上左中右结构式表现形式 来看一下相关的网页实例 课堂提问 大同一职中网站布局用了哪种结构式？ 上左右结构式 二、 网页设计（结构式应用） v 用所学结构式制作网页（使用photoshop制作） 根据所给出的素材，拼出一幅上左中右结构式的网页。（用以前学到的ps知识） v 使用Dreamweave软件实现网页的结构式 操作步骤分析 3 2 4 1 操作重点： 插入表格：crtl+alt+t 边框颜色：选中边框 属性面板 边框颜色 背景图片：自动重复 页面属性：文字大小 文本颜色 课堂提问 v 网页的布局可以用什么软件来实现？： Photoshop、dreamweaver v 本章所讲网页框架结构式有哪些？ 上下结构式、左右结构式、上左右结构式、上左中右结构式 n 网页结构式的综合应用（下节课详细讲解） v 网页结构在单个页面中的综合应用 v 网页结构在整个页面中的综合应用 课堂小结： v 掌握所学结构式制作网页 v 会用所学结构式制作网页 v 会使用phtotshop、dreamweaver制作网页 作业： 运用你们今天所学的知识，设计我们一职中的网页。 教学反思： 板书设计： 一、 常用的网站结构式 1.上下结构式 2.左右结构式 3.上左右结构式 4.上左中右结构式 二、 网页设计（结构式的应用） 1.使用Photoshop制作网页框架 2.使用Dreamweaver制作网页框架概要：
本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系，以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。(本文的示例，请看这个附件demo。)
说明：
占位空间：元素在文档流中所占据的空间。
物理空间：元素本身所占据的空间。
下面分3种情况分别对相对定位和绝对定位进行讨论：
1.只使用css第一组属性布局定位元素的情况
2.只使用css第二组属性布局定位元素的情况
3.混合使用第一组和第二组属性的情况
图1为未定位时的初始效果，
层级关系为：
效果图：
图1
一、用相对定位布局块级元素
元素设置position值： position:relative
此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）
1.仅使用left、right、top和bottom属性布局相对定位元素的情况
元素原本所占的占位空间仍保留，物理空间偏移。
图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。
层级关系为：
效果图：
图2
2.仅使用margin属性布局相对定位元素的情况
用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：margin-top:负值; margin-bottom:负值
图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。
层级关系为：
效果图：
图3
3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。
图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px = 110px - 30px)
层级关系为：
效果图：
图4
二、用绝对定位布局块级元素
设置position值：position:absolute;
此属性值的设置，元素从文档流完全删除。
1.仅使用left、right、top和bottom属性布局绝对定位元素的情况
绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或 HTML 元素）。
注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。
设置元素为绝对定位元素后，元素的Left、 Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流。以下例子说明这个问题。
在图5中，将橘黄色的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见box2的Left、 Right、Top和Bottom属性默认值不等于0，它只是脱离了文档流而已，
层级关系为：
效果图：
图5
以最近的祖先定位元素为参照物的情况
图6中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝色框）为参照物。
层级关系为：
效果图：
图6
图7中，为改变参照物（橘色框）后的效果
层级关系为：
效果图：
图7
图8中，参照物为最顶级的元素情况。
层级关系为：
效果图：
图8
2.仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。
层级关系为：
效果图：
图9
IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。
层级关系为：
效果图：
图10
3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图11。
例如：margin-left:120px; left:-20px; 那么box2的偏移值为120px-20px=100px;
层级关系为：
效果图：
图11
b.绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效，见图12。
层级关系为：
效果图：
图12
总结：
相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。
绝对定位的元素以最近的定位祖先元素为参照物。
本文出自：webteam.tencent.com/?p=328
1、打开格子啦网站，点击又上角带有“星星”的图标，如图1所示：
(图1)2、点击带有“星星”的图标之后，就会弹出一个“收藏成功的界面”，点击完成即可，如图2所示：
(图2)1、点击最右上角的“自定义及控制”的图标，就会跳出“菜单选项”，接着鼠标移到“书签”项，最后点击“为此网页添加书签”按钮，如图1所示：
(图1)总结：只要点击收藏栏的网页即可快速打开该网页，如下图所示：
