页面布局

最新推荐文章于 2023-04-12 10:25:12 发布

conque60

最新推荐文章于 2023-04-12 10:25:12 发布

阅读量617

点赞数

重点：重点理解盒子模型,标准流和非标准流的区别,还有定位原理 !把这3个攻破了,就非常简单了!多实践多参考!最后就是兼容问题了,在实践中自然就有经验了!这些兼容技巧都是经验来的!

盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，

先来看看我们熟悉的标准盒子模型：

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。　

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，如果用标准 W3C 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；如果用IE 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。

　　那应该选择哪中盒子模型呢？当然是“标准 W3C 盒子模型”了。怎么样才算是选择了“标准 W3C 盒子模型”呢？很简单，就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子，而 FF 会采用标准 W3C 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

　　再用 jQuery 做的例子来证实一下。

　　代码1：

<html> <head> <title>你用的盒子模型是？</title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> var sBox = $.boxModel ? "标准W3C":"IE"; document.write("您的页面目前支持："+sBox+"盒子模型"); </script> </head> <body> </body> </html>

　　上面的代码没有加上 DOCTYPE 声明，在 IE 浏览器中显示“IE盒子模型”，在 FF 浏览器中显示“标准 W3C 盒子模型”。

　　代码2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>你用的盒子模型是标准W3C盒子模型</title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> var sBox = $.boxModel ? "标准W3C":"IE"; document.write("您的页面目前支持："+sBox+"盒子模型"); </script> </head> <body> </body> </html>

　　代码2 与代码1 唯一的不同的就是顶部加了 DOCTYPE 声明。在所有浏览器中都显示“标准 W3C 盒子模型”。

　　所以为了让网页能兼容各个浏览器，让我们用标准 W3C 盒子模型

定位：

先来架设一个虚拟的场景：有一个矩形的房间，里面还有一个水桶装了些水，水里还浸泡着一个西瓜，这个房间半空中还有不少的钩子用于挂东西用。现在我把网页元素与上面物件对应上，那么房间就是一个网页，水桶是网页中的一个板块，桶中的水就是文本流，西瓜就是将要被定位的对象。
（1）贡献的绝对定位（absolute）
对照前面解释，如果西瓜被赋予绝对定位，那么就等于把西瓜从水中捞起来挂在半空中的钩子上，水桶中西瓜原来占用的空间水会自动填补它（绝对定位对象会让出自己原先占用位置，所以说它是贡献的）。此时如果之前没有对水桶进行定位设定，那么被拿起的西瓜位置不会再受水桶位置影响，水桶怎么移动，西瓜还是挂在原来位置，至于西瓜要怎放，则以房间左上角（body左上角）为准，用left，right，top，bottom值来定位。但是如果水桶也给出了定位设置（通常是相对定位，下面有讲到这一实用技巧），此时西瓜的摆放就没有那么自由了，尽管此时西瓜被拿起来了不会影响水桶中的水（文本流），但它还是要听桶的话，桶会告诉西瓜“你可以活动，但应该在我的范围内走动，比方说我要你在我左上方1米处，你就要跟死这一点，我走你也要跟着走”，如果桶中有很多个西瓜，可以全部拿出来吊到半空中，它们将被安排在不同高度的空间（层），所以在房顶垂直往下看，有可能看到不同西瓜层叠在一起的情况（这个所谓的高度在网页中是不存在的，就像FLASH动画中的不同层上安排了元素，但它们在看时不会有深度感觉）。可见绝对定位的对象参考目标是它的父级，专业称之为包含块。
（2）自私的相对定位（relative）
相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。相对定位也比较独立，做什么事它自己说了算， 要定位的时候，它是以自己本身所在位置偏移的（相对对象本身偏移）。再拿前边作比如来解，那么此时西瓜似乎是有魔法的，如果西瓜通过相对定位在水桶中偏移了你会看到一个现实生活中不存在的现象：水中有一个地方水凹下去了，周围的水不能填补它，西瓜看起来在旁边，如果搅动一下桶中的水，那个凹的位置会发现改变（文本流对相对定位对象还存在影响），但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响，因为对象并没有真正脱离文本流，就像有两个人在同一层楼水平移动的过程中会有碰头的机会。
（3）总结两种定位的特征
绝对定位就像是把不同对象安排到了一栋高楼的不同楼层(一般指不是第一层，我们这里理解为文本流就放在首层)，它们互不影响，但是它们怎么移动与你楼的地基和面积（父级）有关。相对定位指对象还是在首层楼与文本流一起存放，它们之间肯定存在影响。
（4）对特殊情况的补充
在用相对定位和绝对定位的时候，有一种情况是它们的定位值用到了负值则对象可沿相反方向移动，刚才说到的把对象安排在一栋楼的不同层，如果某个对象一开始就是背靠着最外边墙的，此时再用一个负值定位它，它就会神奇般地跑出墙外去了.

<另一篇>

标准流/非标准流

流:在现实生活中就是流水,在网页设计中就是指元素(标签)的排列方式

标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出现,排在后面的元素(标签)内容后面出现

非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排列,我们统称为非标准排列

盒子模型

在网页设计中,CSS盒子模型都具备的属性:内容(content),填充(padding),边框(border),边界(margin)

注意margin是指两个元素之间的距离

CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏

下面举个盒子模型的案例

my.css

body{
	/*指定body的宽度,样式,颜色*/
	border: 1px solid red;
	width: 800px;
	height: 1000px;
	/*0表示上下0,auto表示左右居中*/
	margin:0 auto;
}
.s1{
	width: 100px;
	height: 100px;
	border: 1px solid blue;
	margin-top: 10px;
	margin-left:10px;
	/*padding-top:100px;
	padding-left:100px;*/
}
.s1 img{
	width:80px;
	margin-top:5px;
	margin-left:5px;
}

test.html

<!DOCTYPE html>
<html>
  <head>
    <title>test.html</title>
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="my.css" type="text/css"></link>
  </head>
  <body>
     <div class="s1"><img src="images/1.jpg"></div>
    </body>
</html>

网页打开如图

再写一个例子,实现多个图片的显示,图片下有链接

my.css

body{
	margin:0px;
	padding:0px;
}
.div1{
	width:400px;
	height: 400px;
	border: 1px solid #b4b4b4;
	margin-left:100px;
	margin-top:20px;
}
/*faceul用于控制显示图片区域的宽度和高度*/
.faceul{
	width:350px;
	height:350px;
	border: 1px solid red;
	list-style-type: none;
}
/*控制单个图片区域*/
.faceul li{
	width: 80px;
	height: 90px;
	border:1px solid blue;
	float: left;/*左浮动*/
	margin-left:15px;
	margin-top: 15px;
}
.faceul img{
	width:60px;
	margin-left:5px;
	margin-top: 5px;
}
.faceul a{
	font-size: 12px;
	margin-left:15px;
}
a:link{
	text-decoration:none;
	color:black;
}
a:hover
{
	text-decoration:underline;
	color:red;
}

text.html

<!DOCTYPE html>
<html>
  <head>
    <title>test.html</title>
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="my.css" type="text/css"></link>
  </head>
  <body>
    <div class="div1">
    <ul class="faceul">
    <li><img src="images/1.jpg"/><a href="">嘻哈猴1</a></li>
    <li><img src="images/2.jpg"/><a href="">嘻哈猴2</a></li>
    <li><img src="images/3.jpg"/><a href="">嘻哈猴3</a></li>
    </ul>
    </div>
    </body>
</html>

网页打开如图