CSS排版.ppt

CSS布局 本章将讲述如何运用DIV对页面进行布局，再通 过CSS样式表，实现页面结构和内容分离。 什么样的方式才称得上是CSS布局 CSS网页布局有哪几种分类 制作一个网站页面讲解如何运用DIV+CSS对页面进行布局 2.1 网页布局概述 2.1.1 网站布局设计原则 网页设计布局就是把进入网页页面的诸多构成 要素（文字、图像、图标、表单等）在网页浏览 器里有效安排起来。 多多参考别人的布局方法。 仔细研究优秀的布局方式 2.12 CSS框模型 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 CSS框模型图 内外边距设置: * { margin: 0; padding: 0; } 宽度：width 高度：height 边框：border 内边距：padding 外边距：margin 浮动：float 清除：clear 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。 #box { width: 70px; margin: 10px; padding: 5px; } 计算对象的实际高度与宽度： 内容+边框+填充+边界 2.13 边框 border 边框的样式 ：border-style 单边边框样式：border-left-style p {border-style: solid solid solid none;} p {border-style: solid; border-left-style: none;} 注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。 边框的宽度：border-width border-width: 15px; border-width: 15px 5px； border-width: 15px 5px 15px 5px; p {border-style: none; border-width: 50px;} h1 {border-width: 20px;} 边框颜色：border-color 2.14 内边距：padding CSS padding 属性定义元素的内边距。padding 属性接受长度值，但不允许使用负值。 例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样： h1 {padding: 10px;} 还可以按照上、右、下、左的顺序分别设置各 边的内边距，各边均可以使用不同的单位或百分 比值： h1 {padding: 10px 0.25em 2ex 20pt;} padding-top: 10px; 2.15 外边距：margin margin 属性接受任何长度单位，可以是像素、 英寸、毫米或 em。 margin 可以设置为 auto。更常见的做法是为外 边距设置长度值。 h1 {margin : 20px;} 2.16外边距合并 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并： 一般的页面布局样式 2.17CSS网页布局分类 一列固定宽度 #game { background-color:#CCCCCC; border:2px solid #333333; width:300px; height:300px; } 2、一列自适应 #game { background-color:#cccccc; border:2px solid #333333; width:80%; height:300px; } 3、一列固定宽度居中（一） #game { background-color:#CCCCCC; border:2px solid #333333; width:300px; height:300px; margin:0px auto; } 3、一列固定宽度居中（二） #game { background-color:#CCCCCC; border:2px solid #333333; width:700px; position:relative; left:50%; margin-l