第一部分、布局概述

DIV+CSS布局：网页html通过DIV标签+CSS样式表代码开发制作的（html）网页的统称。

1.网页布局

目的：为了使页面结构清晰，易读，更有条理性。
步骤：

确定版心：网页的主体内容,在页面中水平居中显示
分析页面中的模块：头部(header)、导航(nav)、焦点图(banner)、内容(content)、页面底部(footer)。
控制页面中各个模块：通过盒子模型，使用DIV+CSS进行模块的控制。

2.页面元素定位机制

普通流方式：由元素在html文件中的位置决定(由标签在文件中的位置来决定)。
浮动方式：元素在页面中可以左右移动,直到碰到包含框或其他浮动框
绝对定位：直接将元素定位到页面的任何位置(设置元素在页面中的位置坐标)

第二部分、布局常用属性

1.浮动属性（float）

浮动：元素脱离原有的标准文档流,移动到其父元素中指定的位置
浮动的实现：在元素的CSS中添加float属性

    选择器{float：属性值;}

属性值	描述
none	不浮动（默认值）
left	向左浮动
right	向右浮动

2.清除浮动（clear）

清除浮动的原因：浮动的元素离开了原有的文档流,它会对页面中其他元素的排版产生影响。为了消除这种影响，可以使用clear属性消除浮动。

    选择器{float:属性值;}

属性值	描述
left	清除左浮动的影响
right	清除右浮动的影响
both	清除左右两侧的影响

3.定位属性（position）

浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在CSS中，通过定位属性可以实现网页中元素的精确定位。

（1）相对定位

相对定位：元素以它所在的普通流中的位置为起始点进行定位(设置坐标)

    position: relative;     /*相对定位*/

（2）绝对定位

绝对定位：可以把元素精确定位到页面中的某个地方

    position: absolute;     /*绝对定位*/

元素绝对定位后，它与普通文档流就没有关系，不占据普通文档流的空间
绝对定位的元素的位置是相对于最近的父元素而言的
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它的层级次序。z-index 的值越高，它显示的越在上层。页面中元素的z-index(层级)默认层级为0。

CSS+DIV进行的页面布局相关推荐

css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
使用hover给div加边框，出现div晃动和页面布局发生混乱的解决办法
** 使用hover给div加边框,出现div晃动和页面布局发生混乱的原因: 因为给div设置的border的宽度,使得div的宽度增加,撑开了其他的div 解决办法: (1)在给div设置hover ...
精通CSS.DIV网页样式与布局（四） ——页面背景
咱们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,他直接决定了整个网页的风格和色调.我们这回主要来学习如何用CSS来设置背景颜色.背景图片. 背景颜色:CSS设置背景颜 ...
精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
了解CSS盒模型、页面布局在UI设计中的作用
我司实行UI规范已过去一段时间,页面风格已逐渐实现统一.但近期在实际业务开发中发现,在UI验收环节不断出现小数值调整情况,极大的延长验收时间. 在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解 ...
CSS盒子模型与页面布局
202209 week1 day5~day6 前端学习 1 盒子模型 1.1 盒子模型结构 1.1.1 内容 1.1.2 边界(margin) 1.1.3填充(padding) 1.1.4 边框(bo ...
div手绘页面布局(上下左右中)
1.空白页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

CSS+DIV进行的页面布局