`
zhanghonglun
  • 浏览: 92465 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CSS 页面布局

阅读更多

float:令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边,留下的空白由后面的盒子填充。

clear:清理浮动,即设置哪些方向上不能有浮动的元素。

 

推荐一篇很好的文章,绝对定位和相对定位,感谢作者cyq,不想看到文章后面的评论,摘录下要点备忘。

relative:此属性值的设置,元素没有脱离文档流,还是普通流定位模型的一部分,会对文档流中其它元素布局产生影响。仅使用left、right、top和bottom属性布局相对定位元素的情况元素原本所占的占位空间仍保留,物理空间偏移。用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度,会影响文档流中的其它元素位置。混合使用left、right、top和bottom属性与margin属性布局相对定位元素时,它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。

absolute:元素脱离文档流,绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素,那么它的参照物为最顶级元素(由于浏览器的默认参照物不同,可能是BODY或 HTML 元素)。设置元素为绝对定位元素后,元素的Left、 Right、Top和Bottom属性默认值不是0,只是将元素脱离文档流。margin 属性不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。margin属性和top、bottom、left、right属性同时使用,如果同一方向偏移,它们的值会产生累加的效果。绝对定位和相对定位的累加加效果不同,如果top、bottom、left、right属性和margin属性偏移的方向相反,top、bottom、left、right属性值有效,反方向的margin属性值无效。

 

  • 相对定位的元素不会脱离文档流,占用文档流的空间,Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
  • 绝对定位的元素脱离文档流,偏移不影响文档流中的其它元素,Left; Right; Top和Bottom属性与margin属性混合使用,偏移方向相同值累加,方向相反,margin属性值无效。
  • 绝对定位的元素以最近的定位祖先元素为参照物。  
  •  

     

    分享到:
    评论
    发表评论

    文章已被作者锁定,不允许评论。

    相关推荐

      [变幻之美-DivCSS网页布局揭秘-案例实战篇](金峰) 源码+PDF

      每个案例均按照效果图设计、效果图切割、HTML代码编写、页面效果分析,以及最终CSS页面布局实现进行讲解,即使是刚入门的新手,也可以按照书中介绍一步步轻松实现复杂的CSS页面布局。书中每个案例都是独立设计的,...

      变幻之美Div+CSS网页布局揭秘(案例实战篇).

      《变幻之美Div+CSS网页布局揭秘(案例实战篇)》是一本专为初学者和有一定基础的网页开发者设计的教程,旨在通过实例教学,深入浅出地解析如何使用Div+CSS进行网页布局。这本书的核心内容涵盖了HTML基础、CSS选择器、...

      外国个性的DIV+CSS页面布局实例98个

      【标题】"外国个性的DIV+CSS页面布局实例98个"揭示了这是一份包含98个不同设计风格的国外网页布局实例集合,主要基于HTML的DIV元素和CSS(层叠样式表)进行构建。这些实例展示了如何利用这两者来创建独特、美观且...

      DIVCSS网页布局实例:十步学会用CSS建站.pdf

      DIVCSS网页布局实例:十步学会用CSS建站 本资源主要讲解了如何使用CSS从头开始创建一个完整的网页布局,通过十个步骤,指导读者一步步地构建一个完整的网站。下面是该资源的知识点总结: 1. 规划网站:网站的规划...

      div+css网页布局设计模板源代码

      本主题聚焦于“div+css网页布局设计模板源代码”,我们将深入探讨这一主题,了解相关知识点。 1. **Div元素**:`<div>`是HTML中的一个通用容器元素,用于组合其他HTML元素,提供一种组织和控制页面结构的方式。通过...

      《变幻之美 DivCSS网页布局揭秘》源文件

      《变幻之美 DivCSS网页布局揭秘》是一本深入探讨CSS网页布局技术的专业书籍,其源文件提供了丰富的实践案例,帮助读者理解和掌握使用Div+CSS进行网页布局的精髓。在这个压缩包中,包含的是《变幻之美-DivCSS网页布局...

      div+css网页布局学习

      div+css网页布局学习 div+css网页布局学习是指使用div标签和css样式来设计和布局网页的技术。下面是学习div+css网页布局的相关知识点: 一、XHTML基础知识 * XHTML是HTML的后继版本,提供了一些新的功能和改进 * ...

      变幻之美-DivCSS网页布局揭秘(案例实战篇)案例源码

      《变幻之美-DivCSS网页布局揭秘(案例实战篇)案例源码》是一个专注于Div+CSS技术在网页布局中的应用的学习资源。这个压缩包包含了多个实际案例的源代码,旨在帮助学习者深入理解并掌握Div+CSS布局技巧。下面将详细...

      变幻之美DivCSS网页布局揭秘-案例实战篇源码

      《变幻之美DivCSS网页布局揭秘-案例实战篇源码》是一部深入探讨Div+CSS网页布局技术的实践性教程。在Web开发领域,Div+CSS布局是构建高效、可维护、响应式网站的基础,它能够帮助开发者实现灵活多变的页面设计,提升...

      DIV+CSS页面布局

      **DIV+CSS页面布局**是网页设计中一种广泛采用的技术,它将内容(HTML)与样式(CSS)分离,使得网页结构更加清晰,易于维护和更新。本教程适合初学者,我们将深入探讨这一主题,帮助你理解其核心概念并学会实际应用...

      变幻之美DivCSS网页布局揭秘(案例实战篇)中文PDF扫描版最新版本

      每个案例均按照效果图设计、效果图切割、HTML代码编写、页面效果分析,以及最终CSS页面布局实现进行讲解,即使是刚入门的新手,也可以按照书中介绍一步步轻松实现复杂的CSS页面布局。  书中每个案例都是独立设计的...

      div+css页面布局,新手入门教材,2天学会div+css

      6. **网页布局**:常见的网页布局方法包括固定宽度布局(如上述760px宽度的布局)和响应式布局。通过设置`div`的浮动(如`float:left`或`right`)可以实现多列布局。 7. **浏览器兼容性**:不同浏览器可能对CSS的...

      DIV CSS网页布局经典

      DIV CSS网页布局经典

      别具光芒CSS网页布局案例剖析摘要和经验.pdf

      CSS网页布局案例剖析摘要和经验 本文档对CSS网页布局进行了详细的剖析和经验总结,涵盖了DOCTYPE、HTML、CSS的基本概念和应用,CSS选择器、布局设计、盒子模型、背景图像等多个方面。 一、DOCTYPE和HTML DOCTYPE...

      网上商店的CSS页面布局

      CSS网页布局通常包括流式布局、网格布局、响应式布局等多种方式。对于网上商店来说,响应式布局尤其重要,因为它能够确保网站在不同设备上(如桌面、平板、手机)都能呈现出良好的显示效果。CSS通过媒体查询(media ...

      别具光芒_CSS网页布局案例剖析

      别具光芒_CSS网页布局案例剖析

      DIV+CSS网页布局与美化(pdf)

      DIV+CSS网页布局与美化,div,css,web2.0

      DIV+CSS网页布局教程DIV+CSS网页布局技巧如何实现DIV+CSS网页布局.pdf

      DIV+CSS网页布局教程 DIV+CSS网页布局技巧如何实现是当前网页设计中非常重要的一个环节。DIV+CSS工具的使用非常广泛,能够优化网站的布局和标签、做出精美的页面,并且有助于搜索引擎抓取网页内容、提高网站排名。...

      适合初学者的39个div+css网页布局例子

      在网页设计领域,Div+CSS是一种常见的网页布局技术,它将结构(HTML)与样式(CSS)分离,使页面设计更加灵活、可维护性更强。本资源“适合初学者的39个div+css网页布局例子”是为那些刚开始接触网页布局的朋友们...

    Global site tag (gtag.js) - Google Analytics