`

【CSS布局.4】五种CSS布局类型

 
阅读更多

CSS 布局的五种类型概述

有五种基本布局定位类型可供选择:

* 弹性布局 - 总体宽度及其中所有栏的值都以 em 单位编写。 这应使布局能够使用浏览器的指定基本字体大小缩放。 对于视力不好的用户, 这可能更有吸引力、更易于访问, 因为栏宽度将变得更宽, 能以任何大小显示更舒适、更可读的行长度。 由于总体宽度将缩放, 您的设计必须允许可这宽度。
* 固定布局 - 总体宽度及其中所有栏的值都以像素单位编写。 布局位于用户浏览器的中心。
* 流体布局 - 总体宽度及其中所有栏的值都以百分比编写。 百分比通过用户浏览器窗口的大小计算。
* 混合布局 - 混合布局组合两种其他类型的布局 - 弹性和流体。 页面的总宽度为 100%, 但侧栏值设置为 em 单位。
* 绝对定位布局 - 所有前述布局的外栏使用浮动内容。 而绝对定位布局完全如其名所示 - 有绝对定位的外栏。 必须记住, 当使用这些布局时, 侧栏会“提出文档流程”, 因而可能有一些不合适的结果 (例如, 页脚可能“看不见”在侧栏在何处结束并在主要内容区域包含的内容少于侧栏的页面与页脚重叠)。

分享到:
评论

相关推荐

    清新的CSS表单布局.rar

    清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS...

    ASP实例开发源码-mysuc精致asp留言板-div+css布局.zip

    ASP实例开发源码—mysuc精致asp留言板_div+css布局.zip ASP实例开发源码—mysuc精致asp留言板_div+css布局.zip ASP实例开发源码—mysuc精致asp留言板_div+css布局.zip

    div_css布局.rar

    《深入理解Div+CSS布局:构建网页布局的艺术》 在Web开发领域,Div+CSS布局是构建网页结构的基础,对于初学者来说,掌握这一技术至关重要...在不断探索和实践中,你会发现Div+CSS布局是一种富有创意和技术挑战的艺术。

    Div+CSS 布局大全.pdf

    这表明文档主要围绕Div和CSS布局技巧展开,且强调了项目表现层(即前端展示层)的重要性。标签“Div+CSS 布局大全.pdf”与标题一致,进一步确认了文档的分类和主要内容。在核心内容的摘录中,我们可以看到文档的结构...

    Div CSS布局大全.rar

    如果想学好Div+CSS布局就下这个资源 诚信可靠 Div+CSS布局入门教程资源.rar Div+CSS布局入门教程.doc Div + Css 布局示例 .rar(现成的例子n+1种) 使用面向对象的技术创建高级Web应用程序.doc 1页面布局与规划.doc 2...

    div+css布局大全

    下面,我们将深入探讨div+css布局的相关知识点。 1. **Div元素**:HTML中的`<div>`(division)元素是一个通用容器,用于组合HTML元素,为页面提供结构。通过设置`<div>`的类或ID属性,我们可以对多个元素进行分组...

    css1.rar_DIV css布局

    在网页设计领域,Div+CSS布局是一种常见的网页结构布局方式,它通过定义不同的CSS(Cascading Style Sheets,层叠样式表)类来控制HTML中的Div元素,实现页面的美观和功能性的统一。本教程“css1.rar_DIV css布局”...

    CSS的flex布局.ppt

    网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一...

    DIVCSS布局大全.pdf

    本文内容节选自《Div+CSS布局大全》,该电子书由JesseZhao在博客园整理发布。该书为初学者和进阶用户提供了丰富的CSS布局技巧,涵盖了从基础入门到高级技巧的各个方面。书中不仅教授了如何使用div和css进行网页布局...

    css.rar_css_css布局

    本资料“css.rar”聚焦于CSS布局,提供了全面的样式大全,旨在帮助开发者掌握各种布局技巧。 一、CSS基础布局概念 1. 块级元素与行内元素:块级元素如`<div>`占据整个宽度,通常用于创建结构;行内元素如`<span>`...

    ( 第5章 DIV+CSS布局.ppt )

    网页设计版面代码,版面布局设计规则,源代码说明

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

    知识点:网站规划、网页布局、CSS布局 2. 创建HTML模板及文件目录:通过创建一个基本的HTML模板,读者可以学习如何编写基本的HTML代码,并了解HTML文件目录的结构。 知识点:HTML基本语法、HTML文件目录结构 3. ...

    精通CSS+DIV网页样式与布局

    精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局....

    DIVCSS.rar_css pdf_css布局

    《DIV+CSS布局.pdf》是关于网页设计中一种常见的布局技术——DIV+CSS的详细教程。这个压缩包包含了这本书的PDF版本,旨在帮助学习者掌握如何利用HTML中的DIV元素和CSS样式来构建网页布局。 首先,我们要理解什么是...

    css定位布局.html

    css定位布局.html

    网站制作常用经典css.div.布局

    5. 表格布局(Table Layout):虽然不是专门的CSS布局技术,但通过模仿表格的特性,也可以实现多列等宽布局。 在"网站制作经典css.div.布局"这个压缩包中,可能包含了使用上述布局技术的实例,通过学习和实践这些...

    div+css布局大全..rar

    6. **Flexbox布局**:弹性盒布局(Flexbox)是现代CSS布局的一种,适用于单行或单列的容器,能轻松实现对齐、排序和调整大小。它解决了传统布局方式中的一些复杂问题,如自适应内容和响应式设计。 7. **Grid布局**...

    布局CSS文件layout.css

    布局CSS文件layout.css 提供与布局有关的CSS定义 文件下载

    css20.chm,帮助文档

    **CSS(层叠样式表)**是用于控制网页元素外观的一种样式语言,是现代网页设计不可或缺的部分。这个“css20.chm”文件是一个CSS帮助文档,提供了关于CSS的详细信息,对于学习和掌握CSS非常有帮助。 1. **基本概念**...

Global site tag (gtag.js) - Google Analytics