网页布局基础
什么是网页布局 ?
使用
div+css
布局网页是网页制作的基础,分为流式布局,浮动布局,绝对定位三种布局方式.
盒子模型
- 标准文档流是最常使用的一种页面布局方式之一,它的展现形式有自动居中一列布局,
- 其次是浮动布局,可参考腾讯首页,这个页面是典型的上中下结构,它的中间主体部分是由横向的两列排列组成。
- 最后是绝对定位布局案例,和浮动布局展现的效果很像,而它是使用绝对定位实现横向两列或多列布局。
W3C标准
由万维网指定的一系列标准,包括:
- 结构化标准语言(
HTML
和XML
) - 表现标准语言(
CSS
) - 行为标准语言(
DOM
和ECMAScript
)
那么w3c
倡导的则是结构、样式、行为分离。
与其说这是一种行为,倒不如说是一种思想,在我们分析网页结构时,先别过多的被样式打扰,重点先放在html和语义化上。先按结构和语义编写代码,然后按CSS样式设置。减少html和css的契合度。
CSS则存在三种定位机制:
- 标准文档流(Normal flow)
- 浮动(Floats)
- 绝对定位(Absolute positioning)
标准文档流的特点:由块级元素和行级元素组成,从上到下,从左到右,输出文档内容。
块级元素的特点:从左到右撑满页面,独占一行,触碰到页面边缘时,会自动换行。
常见的块级元素即块级标签,如div、ul、li、dl、dt、p...
行级元素的特点则是在不改变html文档结构的情况下,在同一行显示。
常见的行级元素即行级标签如span、strong、img、input···
块级元素和行级元素都是盒子模型