WEB前端技术第8讲CSS页面布局设计.pptVIP

* 2)overflow属性：内容溢出处理 使用overflow属性可使用不同方式处理内容的溢出。处理方式依据其属性值。 overflow属性取值： * * * * * * 第8讲 CSS页面布局设计 8.1网页布局概述 8.2 CSS 盒子模型 8.3 盒子之间的关系 8.4 div与span 8.5 盒子的外边距计算规则 8.6 盒子的CSS排版方法 8.7 CSS +DIV布局 8.1 网页布局概述 网页布局是把即将要出现在网页中所有元素进行定位。 网页布局方式： 表格布局：传统布局方式 CSS布局：WEB标准推荐方式 * 8.2 CSS盒子模型 盒子模型是CSS布局页面元素的一个重要概念 在盒子模型中，所有页面中的元素被看做是一个个盒子，它们占据一定的页面空间，在其中放着特定的内容。 盒子模型由content(内容)、border(边框)、padding(内边距)、margin(外边距)组成。 一个盒子在页面上占据的实际空间是 “内容+内边距+外边距+边框”组成的空间，可通过设定这些组成部分的样式来实现各种各样的排版效果 * 图1.1 盒子模型 margin-top margin-bottom padding-top padding-bottom padding-left margin-left * 1. 盒子的边框 它包围了盒子padding和内容，形成盒子的边界 border的属性主要有3个，分别是颜色(color)、宽度(width)、样式(style) 。 边框的属性 边框属性及其属性值 属 性 属性值 描 述 border color_value、width_value、style 同时设置上、右、下、左边框的颜色、宽度和样式 border-top color_value、width_value、style 同时设置上边框的颜色、宽度和样式 border-left color_value、width_value、style 同时设置左边框的颜色、宽度和样式 border-right color_value、width_value、style 同时设置右边框的颜色、宽度和样式 border-bottom color_value、width_value、style 同时设置下边框的颜色、宽度和样式 border-color color_value 同时设置上、右、下、左边框的颜色 border-width width_value 同时设置上、右、下、左边框的宽度 border-style style 同时设置上、右、下、左边框的样式 顺时针方向 取值参见下一页 属 性值 描 述 none 设置无边框 dotted 设置边框由点组成 dash 设置边框由短线组成 solid 设置边框为实线 double 设置边框是双实线 groove 设置边框带有立体感的沟槽 ridge 设置边框成脊形 inset 设置边框内嵌一个立体边框 outset 设置边框外嵌一个立体边框 边框style属性值 边框属性设置方法： 在一行中同时设置不同边框的同一属性 border-color:red; border-color:red blue ; border-width:5px 3px 0px; border-style:dotted solid double dashed ; 在一行中同时设置边框的宽度、颜色和样式 border:4px red solid 对一条边框设置与其他边框不同的属性 border:4px red solid ; border-top:2px blue double ; 只设置一条边框的某一属性 border-top-color: blue ; 上下:red;左右:blue 上:5px;左右: 3px;下:0px 按上、右、下、左顺序依次设置 四条边框颜色都是:red 边框属性示例 * 2. 盒子的边距 内边距padding：它一边是盒子内容，一边是盒子的边界，即边框和内容之间的空白区域就是内边距。 外边距margin：指的是页面上元素和元素之间的空白区域 边距的属性 边距属性及其属性值 属 性 边距值 描 述 padding value 同时设置上、右、下、左内边距，像素值或百分数 padding-top value 设置上内边距，像素值或百分数 padding-left value 设置左内边距，像素值或百分数 padding-right value 设置右内边距，像素值或百分数 padding-bottom value 设置下内边距，像素值或百分数 margin value 设置上、右、下、左外边距，像素值或百分数 margin-top value、 设置上