网页布局基础

什么是网页布局 ？

使用div+css布局网页是网页制作的基础，分为流式布局，浮动布局，绝对定位三种布局方式.

盒子模型

1. 标准文档流是最常使用的一种页面布局方式之一，它的展现形式有自动居中一列布局，
2. 其次是浮动布局，可参考腾讯首页，这个页面是典型的上中下结构，它的中间主体部分是由横向的两列排列组成。
3. 最后是绝对定位布局案例，和浮动布局展现的效果很像，而它是使用绝对定位实现横向两列或多列布局。

W3C标准

由万维网指定的一系列标准，包括：

1. 结构化标准语言（HTML和XML）
2. 表现标准语言（CSS）
3. 行为标准语言（DOM和ECMAScript）
   那么w3c倡导的则是结构、样式、行为分离。

与其说这是一种行为，倒不如说是一种思想，在我们分析网页结构时，先别过多的被样式打扰，重点先放在html和语义化上。先按结构和语义编写代码，然后按CSS样式设置。减少html和css的契合度。

CSS则存在三种定位机制：

1. 标准文档流（Normal flow）
2. 浮动（Floats）
3. 绝对定位（Absolute positioning）

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

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

常见的块级元素即块级标签，如div、ul、li、dl、dt、p...
行级元素的特点则是在不改变html文档结构的情况下，在同一行显示。
常见的行级元素即行级标签如span、strong、img、input···
块级元素和行级元素都是盒子模型

打赏

本文链接：