CSS网页布局初识

布局（版式布局）：是网页UI设计师将有限的视觉元素进行有机的排列组合。

网页设计的特点：1.网页可以自适应宽度；2.网页的长度理论上没有限制。

分栏又称分列，常见的布局分为：一列布局、二列布局、三列布局及混合布局。

流动布局  浮动布局  绝对定位布局

W3C标准：有万维网联盟制定的一系列标准，包括：1.结构化标准语言（HTML和XML）；2.表现标准语言（CSS）；3.行为标准语言（DOM和ECMAScript）。

CSS中存在3中的定位机制：标准文档流（Normal flow）、浮动（Floats）、绝对定位（Absolute
positioning）

标准文档流：

特点：从上到下，从左到右，输出文档内容由块级元素和行级元素组成

块级元素：

特点：从左到右撑满页面，独占一行；触碰到页面边缘时，会自动换行。

常见块级元素（=块级标签）：div、ul、li、dl、dt、p...

行级元素：

特点：能在同一行内显示，不会改变HTML文档结构。

常见的行级标签：span、strong、img、input...

块级元素和行级元素都是盒子模型。

盒子模型（=网页布局的基石）由4部分组成：1.边框（border）；2.外边距（margin）；3.内边距（padding）；4.盒子中的内容（content）。

盒子3D模型：1.border；2.content+padding；3.background-image；4.background-color；5.margin。

盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸

自动居中一列布局：

三个技能点：1.标准文档流；2.块级元素；3.margin属性。

Dreamweaver中常用快捷键小知识：Ctrl+Shift+>
选中代码进行缩进