2013-10-31 00:57:56 关键词:贵阳网站建设,PHP教程 毕业设计 贵阳网站建设

《一步一步跟我学PHP》第十三讲:盒子的定位实例

来源: 百优资源网 作者:管理员

核心提示:通过前节《第十二讲:盒子的定位方式》学习了贵阳网站建设中的DIV+CSS中盒子模型,介绍利用CSS进行网页布局定位的四种方式和三种定位机制。本节对4种不同类型的定位static、relative、absolute、fixed定位机制进行深入探讨。以方便贵阳网站建设人员在网站建设中加深对PHP教程的了解。
已被点击
查看
收藏
  • 开心网
  • 人人网
  • i贴吧
分享
分享

| 服装连锁店ERP管理系统

服装连锁店ERP管理系统可以高效完成物流配送,考勤管理,工资管理,员工管理,报表管理,陈列管理等功能,是服装连锁企业理想的选择。[详细]

手动刷新 更新时间:14:08:37
---------------------------------------------

---------------------------------------------

《一步一步跟我学PHP》第十三讲:盒子的定位实例


摘要:通过前节《第十二讲:盒子的定位方式》学习了贵阳网站建设中的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网页布局中的定位技术更容易被理解和应用。

【推荐阅读】
 软件设计和网站建设策略分析
 
第六讲:html学习总结
 
第七讲:DIV+CSS入门
 
第八讲:DIV+CSS中类选择器、id选择器和html选择器介绍
 
第九讲:块元素、行内元素、标准流、盒子模型
 
第十讲:深入理解盒子模型
 
第十一讲:浮动

 第十二讲:盒子的定位方式
 第十四讲:DIV+CSS实例

声明:本站内容凡注明"来源:百优资源网"的所有文字、图片等资料,版权均属百优资源网原创,任何媒体、网站或个人不得转载、链接、转贴或以其他方式复制发布/发表。本网站部分资源来源于网络,如果有侵犯你的权利,请联系本站删除。

网友评论
用户名 密码 自动登录 登录
*网友评论仅供其表达个人看法 发表评论
  • 软件设计 196
    使用VC++加载图片技巧

    软件设计 | 使用VC++加载图片技巧

    在界面添加图片,在VB、delphi等软件设计语言中很简单,但是在VC++中是很难实现,这过程不但要对图片进行导入,还要显示,最后要清除内存。下面小编对这个方法进行了整理,直接复制就可以实现使用VC++加载图片技巧了。

    毕业设计 683
    毕业设计论文智能管理系统设计的意义

    毕业设计 | 毕业设计论文智能管理系统设计的意义

    毕业设计(论文)是高等院校人才培养过程中不可或缺的重要环节,一直受到各高等学校的高度重视。毕业论文网上管理是高校信息化的一个重要体现,本文对毕业设计论文智能管理系统设计的意义进行介绍。

    毕业论文 631
    毕业设计选题阶段需求

    毕业论文 | 毕业设计选题阶段需求

     毕业设计选题阶段是高职学生进入毕业设计的第一个阶段,在这个阶段的主要任务是选择自己的毕业设计选题,该阶段主要实现发布毕业设计选题出题要求、征集毕业设计选题、审核毕业设计选题、公布毕业设计选题、学生选题。本文介绍了毕业设计选题阶段需求。

860010-1102010400