陈力：传智播客古代珍宝币泡泡龙游戏开发第十三讲：盒子的定位实例

来源：互联网发布：linux安全狗编辑：程序博客网时间：2024/06/11 18:51

陈力：传智播客古代珍宝币泡泡龙游戏开发第十三讲：盒子的定位实例

摘要：通过前节《第十二讲：盒子的定位方式》学习了网站建设中的DIV+CSS中盒子模型,介绍利用CSS进行网页布局定位的四种方式和三种定位机制。本节对4种不同类型的定位static、relative、absolute、fixed定位机制进行深入探讨。以方便贵阳网站建设人员在网站建设中加深对PHP教程的了解。

什么是DIV+SCC的盒子模型？
在网站建设中关于内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式这些属性。一个盒子模型由内至外由content（内容），padding（填充），border(边框)，margin(边界)四部分组成，如图所示。[了解更多]深入理解盒子模型

1、CSS position属性
通过使用Position属性，可以选择4种不同类型的定位static、relative、absolute、fixed。这四种不同的定位方式同时影响了其不同的定位机制。
CSS定位(Positioning)属性允许你对元素进行定位.position 属性值：

static (默认值)：元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留,从这一角度看，好像该元素仍然在文档流/标准流中一样。
absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

常见的定位有四种：
1. static 定位 (默认值)
2. relative 相对定位
3. absolute 绝对定位
4. fixed 固定定位.

(1)相对定位

软件设计,贵阳网站建设

这里我们看出，所谓相对定位是指相对该元素应当显示的左上角重新定位，虽然它脱离的标准流，但是它的空间，不能被占用。

（2）绝对定位

从上图看，所谓绝对定位是指，对该元素最近的那个脱离了标准流的元素定位，如果没有父元素(或者有父元素，但是父元素没有脱离标准流)，则相对body左上角定位。

代码:
Html:
<body>
<div class="div1">
内容1
</div>

<div class="div1">
内容3
</div>
<div class="div1">
内容4
</div>

<div class="div2">
<div id="spe" class="div1">
内容2
</div>
</div>
</body>

Css文件:
.div2{
position:relative;
left:100px;
top:100px;
width:200px;
height:150px;
background:pink;
float:left;
}

（3） Fixed定位

所谓fixed定位就是不管怎样，总是以视窗的左上角定位。
left top 属性对 static 没有效果，static 定位是靠 margin-left margin-top 来移动位置的.

（4）几种定位方式的混合使用

1）父元素和子元素使用不同定位方式的组合
在以上文章谈到的定位方式中,除了position属性为fixed的元素定位是相对于浏览器定位，其它的定位方式都是相对于其父元素或者祖先元素(absolute)进行定位。本节将对父元素对子元素的定位影响进行简单阐述。以下几种方式都是子元素可以参照父元素进行定位的情况。
a 父元素position属性为默认值(statie)
此时不管父元素是在普通文档流中还是处在浮动状态(float属性不为none)下，其子元素的position属性可以是static，relative，或者是浮动元素。
b 父元素position属性为relative
此时不管父元素是在普通文档流中还是处在浮动状态下，其子元素的position属性可以是Static,relative,absolute或者是浮动元素。
c 父元素position属性为或absohite或fixed
此时父元素是绝对定位，其float属性是无效的。但子元素的position属性可以是static,relative,absolute或者是浮动元素。
2）同级元素间的定位
同级元素间使用不同的定位方式时，可以使用left,top,right,bottom,margin等属性来调整他们之间的位置,如果有重叠的元素,z-index可以调整重叠元素的重叠层次,但该属性仅能在已定位的元素上奏效,即当元素的position属性为、tatic时z-index属性是无效的。

（5） z-index
用于设置对象(div) 显示时候，层叠的属性, z-index值越小，则越在下层显示!

当父层不设置高度，而子层进行了float，因为父层是标准流，会不认识子层的存在，所以高度会自动变成0.解决办法一是在父层里面，最后一个子层后面加一个块状元素，然后给这个块状元素清除浮动；二是给父层进行浮动，让它认识子层，高度会自动撑开。

（6）布局中注意的问题
1)页面元素居中设置。可以利用margin属性进行页面元素水平居中的设置。将左右边界设置为自动即可实现居中显示，
如：margin: 0px auto; /*表示上下边界为0，左右边界自动*/
margin: 0px auto 10px; /*表示上边界为0，左右边界自动,下边界为10px*/
2) 使用line-height 进行页面元素垂直居中的设置。line-height 为行高属性，当行高与元素本身高相同时，行内元素是垂直居中的。如：
#menu{line-height: 50px;height:50px;} /* 行高和标签高同为50px*/。但是这种居中的方式在表单的文本框中是没有效果的，还有一个办法就是定义上下补白，即padding 属性值就可以实现想要的效果了。
3)在进行样式设计的时候一定要注意子容器宽度和及高度和不能超过父容器的宽度和高度。否则，容器会跑出来，使得页面达不到理想状态。建议在进行总容器设计的时候不要用绝对值的方式来定义其宽度和高度。另外，容器的边界线以及边距等在设计的时候一定要把其相应的宽度或高度考虑进去。
（7）DIV+CSS布局的优势
通过上面的分析，我们可以得出DIV+CSS布局有如下优点：
① DIV+CSS布局使网页内容与表现分离，从而易于网页的改版和维护。
② CSS使网页代码清晰简洁，从而可以使网页载入速度更快，及节省带宽。
③ CSS使站点可以更好地被搜过引擎找到。
④ 易于保持视觉的一致和网站风格的一致。
因而在当前越来越多的人采用DIV+CSS布局网页，DIV+CSS布局应是当前网页设计与制作课程的主要内容之一。

在DIV+CSS网页布局方式中元素定位是比较晦涩的方面,即使有经验的CSS开发人员也会遇到一些问题。本文“《一步一步跟我学PHP》第十三讲：盒子的定位实例”试图针对CSS定位的三种基本机制和四种定位方式进行一些深人的分析，使DIV+CSS网页布局中的定位技术更容易被理解和应用。

【推荐阅读】
陈力：传智播客古代珍宝币泡泡龙游戏开发第十三讲：盒子的定位实例

0 0

陈力：传智播客古代 珍宝币 泡泡龙游戏开发第十三讲：盒子的定位实例

陈力：传智播客古代珍宝币泡泡龙游戏开发第十三讲：盒子的定位实例