04_框模型(盒子模型)概要.ppt

框模型(盒子模型) 框模型(盒子模型) CSS中，HTML文档中的每个元素都会生成一个或多个矩形框，这称为元素框。各元素框中心有一个内容区。这个内容区周围有可选的内边距、边框和外边距。 之所以被认为是可选的，原因是它们的宽度可以设置为0，实际上这就从元素框去除了这些项 可以应用多种属性到这些元素框中 空白区 外边缘 边框区 内边缘 图为元素框的组成，其中内边缘和外边缘并不会显示在浏览器中 边框边椽 内容区 填充区 填充边椽 元素框的组成 完整的框模型 框模型多种长度的定义 Css-magin-padding.html 设置内容区 使用width和height属性指定元素内容区的宽和高。 这两个属性能应用于块级别和无文本的内嵌元素，不能应用于内嵌文本（也叫不可替换的）元素。 属性名称：width 属性值：长度计量值|百分比值|auto|inherit 默认值：auto 使用对象：块级别元素和可替换的内嵌元素 是否可继承：否 属性名称：height 属性值：长度计量值|百分比值|auto|inherit 默认值：auto 使用对象：块级别元素和可替换的内嵌元素 是否可继承：否 通常，块元素的宽和高由浏览器自动计算； 它将跟浏览器窗口或其他块元素容器一样宽，高度正好容纳内容。 但也可以使用width和height属性设置元素内容区域为一个特定值。 em、像素和百分比值是最常用的度量元素大小的方法。 注意 宽和高只应用到内容区域； 元素框的总宽度=2*填充+2*边框+2*空白边+宽度 元素框的总高度=2*填充+2*边框+2*空白边+高度 一般不指定元素的高度，允许高度基于文本和其他内容来自动计算 如果指定高度，请确保考虑到内容不适用的情况。 说明 当元素设置得太小，容不下内容时，可使用overflow属性来指定如何处理内容不适合的问题。 属性名称：overflow 属性值：visible | hidden | scroll | auto | inherit 默认值：visible 适用对象：块级别元素和可替换的内嵌元素(比如img) 是否可继承：否 处理溢出 Css-overflow.html 填充(padding) 填充是内容区和边框之间的空间，也称内边距； 添加填充很有用，它给内容一点空间，防止背景的边框或边缘与文本冲撞。 可以给元素的每个方向添加填充，也可以一次添加所有边的padding属性。 属性名称：padding 属性值：长度计量值|百分比值|auto|inherit 默认值：0 使用对象：所有元素 是否可继承：否 属性名称：padding-top、padding-right、padding-bottom、padding-left 属性值：长度计量值|百分比值|auto|inherit 默认值：0 使用对象：所有元素 是否可继承：否 填充属性 快捷padding属性 padding属性添加元素周围所有的填充 可以给1个padding属性指定四个、三个、两个或一个值 1个值 padding: 10px; 应用于所有的方向 2个值 padding: 10px 5px; 第一个值应用于上和下，第二值应用于右和左 3个值 padding : 10px 6px 4px； 第一个值应用于上，第二个值应用于右和左，第三个值应用于下 4个值 padding: 10px 6px 4px 10px； 依次顺时针应用于上、右、下、左 填充快捷属性 Css-padding.html 边框(border) 边框是围绕元素内容区和内边距的一条或多条线 每个边框都有3个方面： 边框样式或外观(border-style) 边框宽度或粗细(border-width) 边框颜色(border-color) 其中，边框样式是最重要的 没有指定边框样式，边框将不存在（必须声明边框的样式，否则其他边框属性将被忽略） 可使用定向边框属性应用一个样式到一个方向，也可用快捷border-style属性一次应用到四个方向 属性名称：border-style 属性值：none|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit 默认值：none 使用对象：所有元素 是否可继承：否 属性名称：border-top-style、 border-right-style 、 border-bottom-style 、 border-left-style 属性值：none|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit 默认值：none 使用对象：所有元素 是否可继承：否 边框样式 Css-border