所有css布局技术的根本都是3个基本概念：定位、浮动和外边距操作。
8.1 计划布局
要想创建可伸缩且容易维护的css系统，首先应该检查设计，寻找重复的模式，这包括页面结构中的模式或在站点中元素反复出现的方式。
8.2 设置基本结构
使用margin:auto 让设计居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { text-align: center; } .wrapper { width: 920px; margin: 0 auto; text-align: left; } .header { height: 300px; background-color: green; } .content { height: 800px; background-color: gray; } .footer { height: 300px; background-color: #ff6600; } </style> </head> <body> <div class="wrapper"> <div class="header"> <!-- 头部--> </div> <div class="content"> </div> <div class="footer"> <!--底部 --> </div> </div> </body> </html>
8.3 基于浮动的布局
基于浮动的布局中，只需要设置希望定位的元素的宽度,然后将它们向左或向右浮动。
浮动元素不再占据文档流中的任何空间，它们就不再对包围它们的块框产生任何影响。
为了解决这个问题，需要对布局中各个点上的浮动元素进行清理。非常常见的做法不是连续地浮动和清理元素，而是浮动几乎所有东西，然后在整个文档的 战略点（比如页脚）上进行一次或二次清理。
8.3.1 两列浮动布局
8.4 固定宽度、流式和弹性布局
8.4.1 流式布局
Liquid Fold http://liquidfold.net
多栏布局有三种基本实现方案：固定宽度、流动、弹性
相关推荐
第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一：百度导航条 8.5 菜单实例二：流行的Tab菜单 第9章 CSS滤镜的应用 9.1 滤镜...
《精通CSS 第三版》是一本专为想要深入理解CSS技术的读者精心编写的书籍。CSS，即层叠样式表（Cascading Style Sheets），是网页设计中的核心技术，用于控制网页元素的布局、颜色、字体等视觉表现。本书作为第三版，...
在本章“精通CSS+DIV源码”中，我们将深入探讨使用CSS（层叠样式表）和HTML的DIV元素来构建高效、响应式且可维护的网页布局的关键概念和技术。CSS与HTML的结合，尤其是利用DIV元素，已经成为现代网页设计的标准实践...
本课程“精通CSS.DIV网页样式与布局17-20”专注于深入理解和熟练运用这两种技术，以创建高效、灵活且美观的网页布局。 CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。它的...
第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一：百度导航条 8.5 菜单实例二：流行的Tab菜单 第9章 CSS滤镜的应用 ...
《精通CSS+DIV网页样式与布局》是一本深入解析网页设计技术的专业书籍，主要涵盖了CSS（层叠样式表）和DIV（定义文档布局的HTML元素）的使用方法和技巧。通过对1-2、2-4、8-9、10章节的学习，读者可以全面掌握网页的...
本书《精通CSS+DIV网页样式与布局》显然旨在帮助读者深入理解和掌握这两项技术，以便创建美观、响应式的网页设计。以下是关于CSS和DIV的一些关键知识点： 1. **CSS简介**：CSS是一种样式表语言，用于描述HTML或XML...
**第8章：高级CSS布局技巧** 这章涵盖了更高级的CSS布局技术，可能包括响应式设计、Flexbox（弹性盒模型）和Grid（CSS网格布局）。响应式设计使网页能够适应不同设备和屏幕尺寸，而Flexbox和Grid则为更高效、灵活的...
在深入探讨“精通CSS+DIV源码 第九章”这一主题之前，首先需要理解CSS（层叠样式表）和DIV（定义文档布局的HTML元素）的基本概念。CSS是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言，它...
总的来说，“精通CSS+DIV网页样式与布局8-9章实例”是一个深入学习Web前端开发的重要部分，它涵盖了从基本的样式控制到复杂的响应式布局的全方位知识，对于想要成为专业Web设计师的人来说至关重要。通过实例学习，...
在本章“精通CSS+DIV源码”中，我们将深入探讨使用CSS（层叠样式表）和HTML的DIV元素来构建高效、响应式且可维护的网页布局的关键技术。CSS和DIV是现代网页设计的核心组成部分，它们使得网页的样式与结构分离，提供...
第8章 定位：缩进、偏移与对齐 第9章 定位：进阶 第10章 为文本赋予样式 第11章 分割内容 第12章 对齐内容 第13章 块状元素 第14章 图片 第15章 表格 第16章 列布局 第17章 布局 第18章 字母下沉 第19章 强调框和...
第8章 用css制作实用的菜单 第9章 css滤镜的应用 第2部分 css+div美化和布局篇 第10章 理解css定位与div布局 第11章 css+div布局方法剖析 第12章 css+div美化与布局实战 第3部分 css混合应用技术篇 第13章 css与...
《精通CSS：高级Web标准解决方案》是一本专为前端开发者深度探索CSS技术的权威指南，由英国的三位知名Web开发专家尼尔·巴德（Nigel Bardsley）、克里斯·科利森（Chris Collison）和加雷斯·莫尔（Gareth Moore）...
第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一：百度导航条 8.5 菜单实例二：流行的Tab菜单 第9章 CSS滤镜的应用 9.1 滤镜...
在“精通CSS+DIV源码 第五章”中，我们将深入探讨CSS（层叠样式表）和DIV（分块元素）这两个核心概念在网页设计和布局中的应用。这一章的内容可能涵盖以下几个重要的知识点： 1. **CSS基础**：首先，CSS是用于控制...
在深入探讨"精通CSS+DIV源码 第二章"的内容之前，我们首先理解一下CSS和DIV的基本概念。CSS（层叠样式表）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言。它允许我们将样式信息与结构内容...
在“精通CSS+DIV源码 第四章”中，我们将深入探讨CSS（层叠样式表）和HTML中DIV元素的高级应用与技巧。这一章的内容可能是关于如何利用CSS和DIV来构建高效、响应式和易维护的网页布局。在本章节，我们可以期待学习到...
在“精通CSS+DIV源码 第十八章”中，我们主要探讨的是利用CSS（层叠样式表）和DIV（分块元素）进行网页布局和设计的高级技巧。这一章的内容可能涵盖以下几个关键知识点： 1. **CSS定位机制**：CSS中的定位是网页...