03_CSS概要.ppt

完整的框模型 框模型多种长度的定义 设置内容区 使用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) 是否可继承：否 处理溢出 填充(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； 依次顺时针应用于上、右、下、左 填充快捷属性 边框(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 使用对象：所有元素 是否可继承：否 边框样式 可给每个方向应用一个单向属性，也可使用快捷border-width属性依顺时针方向一次指定多个方向。 属性名称：border-width 属性值：长度单位|thin|medium|thick|inherit 默认值： medium 使用对象：所有元素 是否可继承：否 属性名称：border-top-width、 border-right-width 、 border-bottom-width、 border-left-width 属性值：长度单位|thin|medium|thick|inherit 默认值：medium 使用对象：所有元素 是否可继承：否 边框宽度 用相同的