CSS DIV页面布局(补充)
CSS+DIV布局案例
第一个例子只是告诉大家如何让页面居中，这个代码的用处一般用来做背景图，示例：http://www.smarter.co.jp/，外围是灰色的，当中页面的正文底是白色的，非常大气。
这个例子主要讲上下两列，这是最常见的，也是最简单的页面表现形式，头部放logo和banner，下面是主体内容。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:300px; background:#cff;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><p>这是身体</p></div></div></body>效果下图显示：点击看大图其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container决定。
第二个例子是告诉大家如何让页面居中，如何加上头部。
这个例子加上了尾部，这也是一种常见的页面表现形式，头部放logo和banner，中间是主体内容，尾部放copyright 等内容。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:300px; background:#cff; margin-bottom:5px;}#footer { height:60px; background:#6cf;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><p>这是主体</p></div><div id="footer">这是尾部</div></div></body>效果下图显示：点击看大图其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container决定。
项目九 设置DIV+CSS布局[45页]
![项目九 设置DIV+CSS布局[45页]](https://img.taocdn.com/s3/m/e3db4eb8866fb84ae55c8d5b.png)
项目任务实施—任务一DIV网页整体布局
同时往边框里写入一些文字。在index.html文件中，更新 <div id=" sidebar ">位置的内容，代码如下： <div id="sidebar"> 内利信息技术有限公司作为一家滨江区典型的大学生创业企业，迅速地在 滨江高新技术开发区发展起来，在自身企业的快速成长过程中，也为杭州 及外地的大学生创造了很多合适的工作机会及优秀的工作环境。 </div>
项目任务实施—任务一DIV网页整体布局
3.调整各DIV分块到合理位置 （1）浮动DIV分块 首先让Side Bar块浮动到Content块的右边，用css控制浮动。在page.css文件 中更新#sidebar，代码如下（黑体为新加入的代码，以下同）： #sidebar {
background:#00FFFF; float:right; }
项目任务实施—任务一DIV网页整体布局
（2）创建存放CSS和图片文件的文件夹 创建文件夹css和images，网站结构如图所示。
项目任务实施—任务一DIV网页整体布局
（3）创建网站的整体框架 建立一个宽为760px的块，它将包含网站的所有元素。具体操作为：切 换到代码视图，在html文件的<body>和</body>之间写入如下代码： <div id="page-container"> 浙江内利信息技术公司 </div> 通过“文件”新建CSS文件page.css，保存到/css/文件夹下。通过 “CSS样式面板”附加刚创建的page样式表。
项目任务分析—任务一DIV网页整体布局
1.DIV概述 DIV(division)标记可以看作是一个区块盒子，即<div>与</div>之间相当于一个盒 子，它可以容纳文字、段落、图像等各种网页元素。它也是为HTML文档中大块 的内容提供结构与背景的元素。<div>与</div>之间的这些元素都是用来构成这个 区块的，所包含元素的特性由DIV标签的属性来控制，或者是通过CSS样式来控 制。
Dreamweaver8系列DIV+CSS教程网页标准布局实例教程(二)
div+css网页标准布局实例教程（二）五、布局页面——头部和导航有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。
先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。
先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。
另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把log o做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话，那么就不能用背景图片的方法了。
<div id="header"><div id="logo">此处显示id "logo" 的内容</div><div id="search">此处显示id "search" 的内容</div></div>先在header里插入以上两块元素。
然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：<div id="header"><div id="logo"><img src="images/logo.gif" width="181" height="45" /></div><div id="search"><form id="form1" name="form1" method="post" action="">搜索产品<input type="text" name="textfield" id="textfield" /><input type="submit" name="button" id="button" value="查询" /></form></div></div>接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上，看显示的效果和效果图中的效果是不是一样呢？#logo { float:left; margin-top:18px;}#search { float:right; margin-top:30px;}这两项的位置已经差不多了。
CSS DIV布局.ppt
<div> 标签定义（from w3cschoool)
• 定义和用法
• <div> 可定义文档中的分区或节（division/section）。
• <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格 的组织工具，并且不使用任何格式与其关联。
• 如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加 有效。
padding: 10px; width: 450px; height: 260px; border: 1px solid #000000; } #box1 { width: 300px; height: 260px; border: 1px solid #000000; float: left; } #box2 { width: 140px; height: 260px; border: 1px solid #000000; float: right; } </style> </head> <body> <div id="container"> <div id="box1">这里是box1</div> <div id="box2">这里是box2</div> </div> </body> </html>
5. float浮动布局 在前面我们利用float属性实现了定位，实际上当你把它用到<div>标签上时， 浮动就变成了一个强大的网页布局工具。基于浮动的布局利用了float属性来并 排定位元素，我们只需设定一个宽度，将元素设为左浮动和右浮动就可以了。 CSS允许任何元素浮动float，不论是图像，段落还是列表。无论先前元素是 什么状态，浮动后都成为块级元素。浮动元素的宽度默认为auto。
divcss网页布局介绍
divcss网页布局介绍
我们为大家收集整理了关于divcss网页布局，以方便大家参考。
布局(layout)即对事物的全面规划和安排，页面布局是对页面的文字、图像或表格进行格式化版式排列。
网页布局对改善网站的外观非常重要，又称版式布局，大多数网站会把内容安排到多个列中，就像杂志或报纸那样，网页版面的设计延续了传统纸媒的特点，但又比传统的纸媒更灵活，传统的纸媒由于纸张大小的限制，只能在有限的空间内排列内容，而网页版面的布局，可以根据内容自适应宽度和高度。
在HTML 中，常使用div 元素来创建多列，使用CSS 对元素进行浮动、定位等，从而将网页设计稿中的布局样式呈现在网页上。
网页布局是网页制作的基础，通常使用的方式有三中：流式布局，即元素按照标准文档流进行排列;浮动布局和绝对定位布局。
而在各大网站中，常见的布局结构分为：一列布局，两列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照网站的实际需求使用多列进行布局。
目前，大多数的网站仍采用一套通用的排版模式，页头、页脚、侧边栏和内容区域，构成了这种直截了当的布局。
就像传统的报刊杂志编辑一样，而这是人们预期中的网页版面，大致可分为：国字型，即三列布局，最常见的一种布局结构。
标题正文型，即单列布局，类似文章页面。
左右框架型，即两列布局;上下框架型，和两列布局类似，只不过是上下结构。
混合型，即多列布局的结合，多种类型的变化，相对复杂的一种框架结构，也叫综合框架类型。
封面型，常用于网站的首页，大多数在第一屏放置一张精美的图片，。
Div+CSS网站布局应用教程第4章 Div+CSS网页布局
4.1.1
什么是Div
Div是一个容器。在HTML页面中的每个标签对象几乎都可以称得上是 一个容器，例如使用<P>标签对象。 <p>文档内容</p> <P>标签作为一个容器，其中放入了内容。相同的，Div也是一个容器，能 够放臵内容代码如下。 <div>文档内容</div>
4.1.2
插入Div
CSS的排版是一种比较新的排版理念，完全有别于传统的排版方式。它 将页面首先在整体上进行<div>标签的分块，然后对各个块进行CSS定位， 最后再在各个块中添加相应的内容。通过CSS排版的页面，更新十分容易， 甚至是页面的拓扑结构，都可以通过修改CSS属性来重新定位。
4.3.7
理解空白边叠加
空白边叠加是一个比较简单的概念，当两个垂直空白边相遇时，它们将 形成一个空白边。这个空白边的高度是两个发生叠加的空白边中的高度的较 大者。 当一个元素出现在另一个元素上面时，第一个元素的底空白边与第二个 元素的顶空白边发生叠加。
自测4——控制网页元素之间 的间距
自测4：控制网页元素之间的间距 最终文件：光盘\最终文件\第4章\4-3-7.html 视 频：光盘\视频\第4章\4-3-7.swf
CSS中，所有的页面元素都包含在一个矩形框内，这个矩形框就称为盒 模型。盒模型描述了元素及其属性在页面布局中所占的空间大小，因此盒模 型可以影响其他元素的位臵及大小。一般来说这些被占据的空间往往都比单 纯的内容要大。换句话说，可以通过整个盒子的边框和距离等参数，来调节 盒子的位臵。
4.3.2
CSS盒模型的要点
4.3.3
margin（边距）属性
margin属性用于设臵页面中元素和元素之间的距离，即定义元素周围的 空间范围，是页面排版中一个比较重要的概念。margin属性的语法格式如下。 margin: auto | length;
Div + CSS 布局简单实例
Div + CSS 布局简单实例一、准备工作目录及素材1、在D：盘上创建名为myweb的新文件夹。
2、准备所需素材。
拷贝F:\网页素材\网站重构\源文件\第2章中的images 文件夹到D: \myweb 文件夹中。
3、在D:\myweb 文件夹中新建子文件夹style。
二、定义站点1、启动Dreamweaver cs4，选择“站点”>“管理站点”。
2、在弹出的“管理站点”对话框中单击“新建”按钮，然后选择“站点”。
3、在弹出的“站点定义”对话框中，如果显示向导（“基本”选项卡），则单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。
4、在“站点名称”文本框中，输入Cafe 香浓作为站点名称。
5、在“本地根文件夹”文本框中，指定D:\myweb 文件夹。
你可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹”文本框中输入路径。
6、在“默认图像文件夹”文本框中，指定D:\myweb 文件夹中已有的images 文件夹。
你可以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹”文本框中输入路径。
7、从“分类”列表中选择“远程信息”，“访问”选：“FTP” 并填写好相关信息。
8、从“分类”列表中选择“测试服务器”，“访问”选：“FTP” 并填写好相关信息，“URL前缀”须根据实际情况做相应修改。
9、从“分类”列表中选择“本地信息”，“HTTP 地址”须根据实际情况做相应修改。
10、单击“确定”。
随即出现“管理站点”对话框，显示您的新站点。
11、单击“完成”关闭“管理站点”对话框。
此时“文件”面板显示当前站点的新本地根文件夹。
“文件”面板中的文件列表将充当文件管理器，允许你复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。
三、了解你的任务下图是一张为Cafe 香浓站点设计的完整的和符合要求的设计草样。
作为Web 设计人员，你需要对草样进行转换，使之最终形成可以使用的Web 页面。
第7章 CSS+Div布局定位
7.5 实例制作
• 10．删掉各标签的提示文字后即可向里面添加所需 内容。 • 11．用类似的方法向“left”、“right”和“foot er”标签中添加内容。 • 12．当页面制作完成后，如希望将“left”与“rig ht”的位置对调，如果用表格排版更新时相当于重 新制作一遍网页，而用CSS+Div排版只需将“left” 标签CSS规则的“float”属性值由“left”改为“r ight”，“right”标签CSS规则的“float”属性值 由“right”改为“left”即可。
7.5 实例制作
• 5．接下来插入“container”标签。单击“插入” 菜单中“布局对象”的“Div标签”命令。设置该标 签插入位置为“在标签之后”指定位置在“<div id =”header”>”之后插入新的标签，ID号为“conta iner”。 • 6．同理，向网页中插入“right”标签。设置“rig ht”标签的位置为“在开始Байду номын сангаас签之后”选择指定位 置在“<div id=”container”>”之后插入，ID号 为“right”。在代码视图或拆分视图的代码中可以 看到“right”标签是嵌套在“container”标签内 部的。重复前面的操作在网页中插入“left”标签。 可以看到后插入的“left”标签是在“right”标签 前方，同样是嵌套在“container”标签的内部。
7.5 实例制作
• 7．最后插入最底端的“footer”标签。单击“插入” 菜单中“布局对象”的“Div标签”命令。设置“fo oter”标签的位置为“在结束标签之前”选择指定 位置在“<body>”之后插入，ID号为“footer”。 至此整个页面布局的Div标签全部插入完毕 • 8．下面为这些Div标签定义CSS规则。将光标定位在 “header”标签中，单击CSS面板右下角的新建按钮， 在弹出的“新建CSS规则”对话框中设置“选择器类 型”为“ID（仅应用于一个HTML元素）”；选择器 名称文本框中定义为“#header”，单击“确定”进 入规则定义对话框，我们根据实际需要进行参数的 设置。 • 9．同样的方法定义其他标签的CSS规则。
DIV+CSS网页标准布局实例教程(一)
DIV+CSS网页标准布局实例教程（一）将根据本人这些年来的从业经验，从建立站点到一个完整的div+css网页的完成，整个流程下来，希望能对各位有所帮助。
一、建立站点二、结构分析三、搭建框架四、切割效果图五、布局页面——头部和导航六、布局页面——侧边栏七、布局页面——主体部分八、底部和细节调整九、相对路径和相对于根目录路径一、建立站点在D盘建立一个MyWeb文件夹，在dreamweaver cs5(简称DW)里创建一个站点指向这个文件夹，然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。
二、结构分析创建完站点后，就需要对页面结构进行分析了，根据效果图，分析页面分为几大块，该怎么布局更合理。
从图中可以看出整个页面分为头部区域、导航区域、主体部分和底部，其中主体部分又分为左右两列，整个页面居中显示。
整体框架结果图如下：三、搭建框架首先在dw里新建一个html文件，保存为index.html：按照上图的方法依次插入标签，或者直接在代码视图中手工输入，代码如下：<div id="container"><div id="header">此处显示id "header" 的内容</div><div id="nav">此处显示id "nav" 的内容</div><div id="maincontent"><div id="main">此处显示id "main" 的内容</div><div id="side">此处显示id "side" 的内容</div></div><div id="footer">此处显示id "footer" 的内容</div></div>下面就新建一个css样式表文件：在DW文件菜单选择新建，然后在打开的窗口页面类型中选择css，创建后保存在css文件夹中并命名为layout.css保存后先设置全局的样式，而后写每一块单独的样式，全局样式如下：body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}ul { list-style:none;}img { border:0px;}a { color:#05a; text-decoration:none;}a:hover { color:#f00;}四、切割效果图。
DIV+CSS布局大全详解
《Div+CSS 布局大全》整理者：Jesse Zhao网站：blogs.co m第1页目录div＋css 布局入门 (4)XHTML 下c ss+div 布局总结..................................................................................................................... 6 网页设计D IV+CSS——第1天:选择什么样的D OCTYPE ........................................................................... 9 第一天 (9)什么是D OCTYPE (10)我们选择什么样的D OCTYPE ........................................................................................................... 10 补充............................................................................................................................................... 10 网页设计DIV+CSS——第2天:什么是名字空间................................................................................... 10 网页设计DIV+CSS——第3天:定义语言编码....................................................................................... 11 网页设计DIV+CSS——第4天:调用样式表........................................................................................... 11 外部调用样式表............................................................................................................................. 11 双表法调用样式表......................................................................................................................... 12 网页设计D IV+CSS——第5天:head 区的其他设置............................................................................... 12 收藏夹小图标................................................................................................................................ 12 为搜索引擎准备的内容.................................................................................................................. 12 网页设计D IV+CSS——第6天:XHTML 代码规范 (12)1.所有的标记都必须要有一个相应的结束标记 (13)2.所有标签的元素和属性的名字都必须使用小写 (13)3.所有的X ML 标记都必须合理嵌套 (13)4.所有的属性必须用引号""括起来 (13)5.把所有<和&特殊符号用编码表示 (13)6.给所有属性赋一个值 (13)7.不要在注释内容中使“--” (13)网页设计D IV+CSS——第7天:CSS 入门 (14)1.基本语法规范 (14)2.颜色值 (14)3.定义字体 (14)第2页4.群选择器 (14)5.派生选择器 (14)6.id 选择器 (14)6.类别选择器 (15)7.定义链接的样式 (15)网页设计D IV+CSS——第8天:CSS 布局入门 (15)1.定义D IV (15)2.CSS2 盒模型 (16)3.辅助图片一律用背景处理 (17)网页设计D IV+CSS——第9天:第一个C SS 布局实例 (17)1.确定布局 (18)2.定义b ody 样式 (18)3.定义主要的d iv (18)4.100%自适应高度? (20)网页设计DIV+CSS——第10 天:自适应高度 (20)网页设计D IV+CSS——第11 天:不用表格的菜单 (21)1.不用表格的菜单(纵向) (21)2.不用表格的菜单(横向) (22)网页设计D IV+CSS——第12 天:校验及常见错误 (24)1.XHTML 校验 (24)2.CSS2 校验 (25)CSS 的十八般技巧 (25)WEB 打印实例教程 (30)Div+CSS 布局入门教程 (37)第3页div＋css 布局入门你正在学习C SS 布局吗？是不是还不能完全掌握纯C SS 布局？通常有两种情况阻碍你的学习：第一种可能是你还没有理解C SS 处理页面的原理。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 块son1浮动到最左端的位置是父块的padding-left加上自 己的margin-left，而不是父块的border。
3.1 float定位
• 在上例中，当把子块son1的margin设置为负数，子块能浮 动到的最左端,依然是父块的padding-left加上这个负数， 因此子块在视觉上会移动到父块的外面。 • 实例：
margin-top border-top padding-top
2.1 概念
padding-right
margin-right
padding-left
border-right
margin-left
border-left
height
content
padding-bottom border-bottom margin-bottom
#container #banner
#content
#links #footer
• 图中每个色块都是一个<div>，这里直接用ID来表示各个 块。页面的所有div块都属于块#container，便于对页面的 整体进行布局。 • 在每个子块内部，还要加入各种块元素或行内元素，构成 网页。
4.2 常见的布局方式——1-2-1布局
header container
content content
side
pagefooter
4.3 常见的布局方式——1-3-1布局
4.4 常见的布局方式——1-((1-2)+1)-1布局
header container content banner
columns col-a col-b
side
pagefooter
5. 简单CSS布局分析
5.1 固定宽度且居中方法一
• 宽度固定且居中的版式是网络中最常见的排版方式之一。 这里介绍两种实现方法。 • 首先将整个页面内容用一个大的<div>包裹起来，id为 container，对它设置固定宽度且居中，并且让container里 面的内容左对齐。 • 实例：当设置了container的宽度以后，它就自动左对齐了。 方法一实现居中的关键之处在于#container属性中的 “margin:0 auto;”，它使得该块与页面的上下边界距离 为0，左右则自动调整。
CSS的排版是一种全新的排版观念，完全有别于传 统的表格排版习惯。通过CSS排版的页面，更新十分容易， 甚至是页面的拓扑结构，都可以通过修改CSS属性来重新 定位。
大致分为三个步骤： 1. 在整体上进行<div>标记的分块； 2. 对各块进行CSS定位； 3. 在各块中添加相应的内容。
4.1 CSS排版观念
• 当两个子块的position属性都设置为absolute时，此时两个 子块都脱离了父块。 • 实例：
3.3 position定位——relative
• 当子块的position设置为relative时，子块是相对于它在父 块中的原来的位置来进行定位的。同样配合top、right、 bottom和left这4个属性值使用。 • 实例：
border-color: red green; border-width:1px 2px 3px; border-style: dotted dashed
solid double;
2.3 border
• border 一般用于分离元素，计算元素实际的宽和高时， 要将border也考虑进去。 • border的属性主要有3个：color、width、style • 实例：
2.3 border
• 如果希望在某段文字结束后加上虚线用于分割，而不是用 border将整段话框起来，可以通过单独设置border-bottom 来完成。 • 实例：
2.4 padding
• padding用于控制content与border之间的距离，加入paddingbottom的语句，就可以实现如下效果。 • 实例：
块元素1
margin-bottom:50px margin-top:30px
块元素1
块元素2
块元素2
2.8 父子关系的margin
• 当一个div块包含在另一个div块中时，就形成了父子关系， 它们的margin值对CSS排版也有重要的作用。其中子块的 margin将以父块的content作为参考。 • 实例：
3.5 练习——给图片签名
• 要求：使用CSS定位实现给图片签名的效果（图片自选）。 • 提示：将图片放入一个<div>块中，并用盒子模型的方法 给图片加上边框，然后将签名的文字放入另一个<div>块 中，用position定位将其移动到图片中需要的位置上，再 设置相应的字体和颜色即可。
3.6 练习——文字阴影效果
• 在设置4个方向的padding时也可以简写。
2.5 margin
• margin是指元素与元素之间的距离。同样加入marginbottom的语句，实现如下效果。 • 实例：
2.6 行内元素之间的水平margin
• 当两个行内元素紧邻的时候，他们之间的距离为第1个元 素的margin-right加上第2个元素的margin-left。 • 实例：
span.left{ margin-right:30px; background-color:#a9d6ff; } span.right{ margin-left:40px; background-color:#eeb0b0; span 1 }
margin-right
margin-left span 2
3.2 清除浮动的影响
• 其中<h3>标记的背景色和边框由于受到了块1向左浮动的影 响，而处于图片的后面。
• 这时可以通过设置块元素的clear属性，清除float的影响。 • 修改<h3>标记的CSS属性，加上clear:left;这条语句就可以 实现。
3.2 清除浮动的影响
• 当需要同时清除两端的float影响时，可以设置clear:both;来实 现。 • 实例：
5.3 左中右版式
• 将页面分割为左中右3块也是网页中dle
#right
• 这里制作的是左栏与右栏的宽度和位置固定，中间栏的宽 度随页面自动调整。实现的关键在于将左栏与右栏都采用 绝对定位，设置宽度为190px，中间栏的宽度为100%， 并将设置其margin-left和margin-right都为190px（空出左 右块的位置）。
2.盒子模型
2.1 概念
• 什么是“模型”——本质特征的抽象
• 布局的“模型”
• 所有页面中的元素都可以看成一个盒子，占据着一定的页面 空间。可以通过调节盒子的边框和距离等参数，来调节盒子 的位置。 • 一个盒子模型由content（内容）、border（边框）、 padding（内边距）、margin（外边距）这4个部分组成。
• 要求：CSS滤镜也可以实现文字阴影，但是仅适用于IE浏 览器。请使用CSS定位实现文字阴影效果。 • 提示：首先建立两个<div>块，内容都是文字本身，然后 将其中一个<div>块设置为阴影的颜色，用CSS定位移动 到合适的位置，最后再用z-index调整重叠关系即可。
4. CSS排版观念
4.1 CSS排版观念
2.7 块级元素之间的竖直margin
• 两个产生换行效果的块级元素的竖直距离不再是marginbottom与margin-top的和，而是两者中的较大者。 • 实例：
<body>
<div style="margin-bottom:50px;">块元素1</div> <div style="margin-top:30px;">块元素2</div> </body>
• 当子块的position属性设为absolute时，子块已经不再从属 于父块，而是按照设定的距离来绝对定位。
3.3 position定位——absolute
• 当一个父块包含两个子块时，如果将子块1的position属性 设置为absolute，此时子块1已经不再属于父块了，而子 块2就成为了父块中的第1个子块，移动到了父块的最上方。 • 实例：
2.9 负值的margin
• 当margin设为负数时，会使得被设为负数的块向相反的方 向移动，甚至覆盖在另外的块上。 • 实例：
• 当块之间是父子关系时，子块的margin设置为负数会使得 子块从父块中分离出来，这在CSS排版中有很广泛的应用。
3.元素的定位
3.1 float定位
• 这里不再用table的方法进行排版，网页中元素的定位都通 过CSS来实现。 • float定位是CSS排版中非常重要的手段，它的值可以设置 为left、right或是默认值none。当设置了元素向左或向右 浮动时，元素会向其父元素的左侧或右侧靠紧。 • 实例：
• 当position设置为fixed时，本质上与absolute一样，只不 过块不随着浏览器的滚动条向上或向下移动，但是IE不支 持此属性，不推荐使用。
3.4 z-index空间位置
• 该属性用于调整定位时重叠块的上下位置，z-index属性的 值为整数，可以是正数也可以是负数， z-index值大的块 位于其值小的上方，默认值是0。 • 实例：
width
2.2 属性值的简写形式
• 如果给出2个属性值，前者表示上下边框的属性，后者表 示左右边框的属性； • 如果给出3个属性值，前者表示上边框的属性，中间的数 值表示左右边框的属性，后者表示下边框的属性； • 如果给出4个属性值，依次表示上、右、下、左边框的属 性，即顺时针排序。 • 例如：
5.2 固定宽度且居中方法二