[三天学会PHP]02层叠样式表CSS剖析.ppt

9. 和页面布局有关的CSS属性 属 性 描 述 top 层距离顶点纵坐标的距离 left 层距离顶点横坐标的距离 text-align 横向排列，可以使用left(左对齐)、right(右对齐)和center局中 line-height 指定行高，内容都是在行的中间，所以可以使用这个属性设置内容垂直居中。这个属性接受一个控制文本基线之间的间隔值，可以是数字，表示字体大小乘以该数所得。也可以使用百分比 属 性 描 述 padding 用于设置区块的内边距属性，是边框和元素内容之间的间隔距离。与margin属性相返，但使用的是相同属性值。是上补白padding-top、右补白padding-right、下补白padding-bottom和左补白padding-left属性的略写 float 设置区块漂浮属性，允许网页制作者将文本环绕在一个元素的周围，可以使用左漂浮left值，右漂浮right值 clear 清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面；同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值，和移动元素到其两边的漂浮的元素的下面的both值 10、使用盒子模型的浮动布局 虽然使用绝对定位可以实现页面布局，但由于调整某个区块框时其它区块的位置并不会跟随着改变，所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流中，所以文档的普通流中的区块框表现得就像浮动框不存在一样。 10.1 设置浮动 10.2 行框和清理 在进行页面布局时，经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性，再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时，就会在行框中留出一定的宽度，而下面的某个区块框又恰好满足这个宽度，则很可能会向上提，和上一行并列的区块框在同一行排列。而这不并是我们想要的结果，所以可以使用clear属性解决这一问题，该属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。 htmlhead style .left { /* 声明一个css类选择器，名子为left */ width:200px; /* 盒子模型宽度为200px*/ height:200px; /* 盒子模型高度为200px */ margin:10px; /* 盒子模型外边距为10px */ border:solid 1px; /* 盒子1像素的实线边框 */ float:left; /* 设置盒子向左浮动，脱离了文档流 */ } .noleft { /* 声明另一个css类选择器，名子为noleft */ width:200px; /* 设置盒子模型的宽度为200px */ height:200px; /* 设置盒子模型的高度为200px */ border:solid 1px; /* 设置盒子有一个像素的实线边框 */ background:#ccc; /* 设置盒子模型背景为灰色 */ } /style /head body div class=left 框（一）/div !--使用类left,设置左浮动，脱离了文档流 -- div class=left 框（二）/div !-- 也用类left,也设置左浮动，和第一个盒子同一行-- div class=noleft 框（三）/div !-- 使用类noleft,没有设置浮动，在文档流中 -- /body/html html head style .left { /* 声明一个css类选择器，名子为left