CSS入门三

来源：互联网发布：网络控制室设备编辑：程序博客网时间：2024/05/19 14:15

一、框与边框

基本元素框

CSS中，所有文档元素都生成一个矩形框，称为元素框

左边框线左边界左边框左补白左内边框宽度宽度右内边框左补白右边框右边界右边框线

Width

允许值 <长度> | <百分比> | auto

初始值 auto

可否继承否

适用于块级元素和替换元素

注意：百分比是指相对于父元素的宽度。

height

允许值 <长度> | auto

初始值 auto

可否继承否

适用于块级元素和替换元素

注意：百分比是指相对于父元素的宽度。

大多情况下，边界、补白及边框的宽度均为0，此时元素的宽度和父元素内容区域的宽度相同。

三种方法生成元素额外空间

1、只对元素增加补白

2、只对元素增加边框

3、既增加补白，又增加边框

选择何种不重要，但是元素使用背景，则与选择有关了。因为背景将扩展到补白里，但是不会扩展到边界中。

边界

margin

允许值 <长度> | <百分比> | auto {1,4}

初始值未定义

可否继承否

适用于块级元素和替换元素

注意：百分比是指相对于父元素的宽度。

margin:top right bottom left; 上/右/下/左

从元素的顶端开始,顺时针围绕元素

复制值

单侧边界属性

margin-top,margin-right,margin-bottom,margin-left

允许值 <长度> | <百分比> | auto {1,4}

初始值未定义

可否继承否

适用于块级元素和替换元素

注意：百分比是指相对于父元素的宽度。

边框

边框就是一条（有时多条）围绕元素内容及补白的线。

边框特征：宽度或粗度、样式或外观、以及颜色

边框宽度的缺省值是medium，通常为两个货三个像素

缺省样式为none

如果一个边框没有样式，那么它不会出现。缺少边框样式也会重设置宽度。

边框缺省颜色是元素本身的前景色。如果没有声明前景色，那么他的颜色与元素文本颜色相同。若一个元素没有文本，边框的颜色是其父元素的文本颜色。

带样式的边框

border-style

初始值 none

可否继承否

适用于块级元素和替换元素

可以给边框定义多种样式

按照top-right-bottom-left顺序排列的值

边框宽度

border-width

允许值 [ thin | medium | thick | <长度>] {1,4}

初始值未定义浓缩属性

可否继承否

适用于所有元素

缺省为medium

border-top-width,border-right-width,border-bottom-width,border-left-width

允许值 thin | medium | thick | <长度>

初始值 medium

可否继承否

适用于所有元素

边框颜色

border-color

允许值 <颜色> {1,4}

初始值元素的颜色

可否继承否

适用于所有元素

border-top-color,border-right-color,border-bottom-color,border-left-color

允许值 thin | medium | thick | <长度>

初始值 medium

可否继承否

适用于所有元素

压缩边框属性

border-top,border-right,border-bottom,border-left

允许值 <边框宽度> || <边框样式> || <颜色>

初始值参考各个属性

可否继承否

适用于所有元素

快速设置边框

border

允许值 <边框宽度> || <边框样式> || <颜色>

初始值参考各个属性

可否继承否

适用于所有元素

补白

补白位于元素框的边界与内容区之间。

padding

允许值 [ <长度> | <百分比>] {1,4}

初始值 0

可否继承否

适用于所有元素

注意：百分比是指相对于父元素的宽度。

单侧补白

padding-top,padding-right,padding-bottom,padding-left

允许值 <长度> | <百分比>

初始值 0

可否继承否

适用于所有元素

注意：百分比是指相对于父元素的宽度。

补白与内联元素：应用与内联元素，边界和补白没有大的差别。

同边界一样，左侧补白应用在元素的开头，右侧补白应用在元素的结尾。

顶端与低端补白：与用户代理有关。

浮动与清除

float

允许值 left | right | none

初始值 none

可否继承否

适用于所有元素

clear

允许值 left | right | both | none

初始值 none

可否继承否

适用于所有元素

列表

列表项类型

list-style-type

初始值 disc

可否继承是

适用于列表元素元素

disc ：实心圆

circle ：空心圆

square ：实心或空心方块

decimal ：1、2、3、4、...

upper-alpha ：A、B、C、D、...

lower-alpha ：a、b、c、d、...

upper-roman ：I、II、III、IV、V、...

lower-roman ：i、ii、iii、iv、v、...

none：不使用项目符号

列表图像

list-style-image

允许值 <url> | none

初始值 none

可否继承是

适用于列表元素

列表项位置

list-style-position

允许值 inside | outside

初始值 outside

可否继承是

适用于列表元素

缩略列表样式

list-style

允许值 <列表项类型> || <列表项图像> || <列表项位置>

初始值参考各项

可否继承是

适用于列表元素

0 0