第二讲 CSS页面布局设计

第二讲CSS页面布局设计第二讲CSS页面布局设计1.CSS盒子模型2.盒子的浮动与定位3.CSS+div布局方法1.1CSS盒子模型的组成盒子模型由content(内容)、border(边框)、padding(内边距)、margin(外边距)组成。图1.1盒子模型margin-topmargin-bottompadding-toppadding-bottompadding-leftmargin-leftmargin-rightpadding-right1.2盒子边距的赋值方式完整赋值：盒子边距可通过top、right、bottom、left四个方向赋值简写赋值：如果给出1个属性值，那么表示四个方向的属性值相同如果给出2个属性值，那么前者表示上下两边的属性，后者表示左右两边的属性如果给出3个属性值，那么前者表示上边属性，中间的数值表示左右两边的属性，后者表示下边的属性。如果给出4个属性值，那么依次表示上、右、下、左的属性，即顺时针排序。1.3盒子之间的关系DOM是DocumentObjectModel的缩写，即文档对象模型DOM树（示例）bodyulullilililibodyulliliullilidiv与spandiv与span都是区块容器标记，可以容纳段落、标题、表格、图像等各种HTML元素div与span区别（示例）div是块级元素，div内的元素会自动换行。span是行内元素，在它前后不会自动换行，没有结构意义，纯粹应用CSS。1.3盒子的定位原则行内元素之间的水平定位margin示例span1Margin-rightMargin-leftspan2块级元素之间的垂直margin示例嵌套盒子之间的margin示例设margin为负值，会使设为负值的块向反方向移动，甚至覆盖在另一个块上面。示例1.4综合示例示例abdcefghijklmnop2.1盒子的浮动float1.没有浮动的盒子（效果）2.向左浮动第一个盒子（效果）3.向左浮动第二个盒子（效果）4.向左浮动第三个盒子（效果）5.向右浮动第三个盒子（效果）6.向右浮动第二个盒子（效果）7.增加第三个盒子高度（效果）8.清除左浮动的影响（效果）9.清除右浮动的影响（效果）10.删除父盒子的文字（效果）11.扩展父盒子的高度（效果）2.2盒子的定位广义的“定位”：要将某个元素放到某个位置的时候，这个动作可以称为定位操作。狭义的“定位”：在CSS中有一个非常重要的属性position。然而要使用CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。2.3定位方式static：静态定位，这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。示例relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。示例absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。（示例）fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。2.4空间位置z-index属性用于调整区块重叠时的上下位置，z-index值大的区块位于其值小的区块的上方。3.1CSS排版观念CSS排版将页面在整体上进行div分块，然后对各个块进行CSS定位，最后在各个块中添加相应的内容普遍的页面分为：Banner、主体(content)、菜单导航(links)、脚注(footer)3部分组成通常为了容易控制页面这3个部分，会为它们添加一个父div3.2固定宽度且居中的版式宽度固定而且居中的版式是网络中最常见的排版方式之一#container#banner#content#links#footer在相应的元素块中也可以加入相应的元素，如#content、#links#content.blog.date.blogcontent…….update.page#links.calendarhead.calendartable…….friends.syndicate.side固定宽度且居中的版式示例#apTop{position:relative;margin:auto;width:600px;text-align:center;border:#00F1pxsolid;}#apCenter{position:relative;margin:5pxauto;width:600px;height:240px;border:#00F1pxsolid;}#apMain{position:relative;margin:auto;width:600px;height:250px;border:#00F1pxsolid;}#apMainLeft{position:absolute;left:0px;bottom:0px;border:#F001pxsolid;}#apMainRight{position:absolute;right:0px;bottom:0px;border:#F001pxsolid;}3.3左中右版式将网页分割为左中右3块也是网页中常见的一种排版方式#container#banner#middle#left#footer#right设计思路：将左中右3块放在一个区域中(示例）divid=“mainbox”divid=“left/divdivid=“middle”/divdivid=“right”/div/div#mainbox#middle#left#right3.4CSS+div与表格排版以下图所示排版效果进行分析#container#banner#middle#left#footer#right通过table各个单元格可以轻松划分各个模块，制作简单容易；CSS通过div来划分模块，同时需要调整各模块之间的位置距离及排列；各模块放在table单元格内，会随着单元格的大小自动调整，背景颜色等设置比较简单；CSS+div的模块层层嵌套，背景颜色等样式属性设置比较复杂；单元格可加入CSS的margin与padding等属性控制效果表格布局比CSS+div布局维护要困难。例如要对换left和right的内容，表格布局的工作量与制作新的页面相当，而CSS+div布局方式只需修改位置即可实现