css的常用属性（边框、列表）和div+span以及盒模型

一、css常用属性之边框属性

边框风格 border-style

定义某一方向的边框样式：

• 下边框样式border-bottom-style
• 上边框样式border-top-style
• 左边框样式border-left-style
• 右边框样式border-right-style

边框风格样式的属性值

1. none 无边框
2. solid 直线边框
3. dashed 虚线边框
4. dotted 点状边框
5. .double 双线边框
6. groove 凸槽边框
7. ridge 垄状边框
8. nset inset边框
9. outset outset边框
10. inherit 继承

边框宽度 border-width

• 下边框宽度border-bottom-width
• 上边框宽度border-top-width
• 左边框宽度border-left-width
• 右边框宽度border-right-width

边框宽度的属性值

定义某一方向的边框宽度：

1. thin 细边框
2. medium 中度边框
3. tick 粗边框
4. px 固定值的边框
5. inherit 继承

边框颜色

定义某一方向的边框颜色：

• 下边框宽度border-bottom-color
• 上边框宽度border-top-color
• 左边框宽度border-left-color
• 右边框宽度border-right-color

属性值

1. 直接写颜色：例如 red、blue
2. RGB：rgb（x，y，z）
3. RGBA:例如 rgba（255,255,0，0.1）
4. 十六位进制：例如 #ff0、#ff0000
5. 继承：inherit

属性值的四种情况所代表的结果

• 一个值：border-color：（上、下、左、右）
• 两个值：border-color：（上下）（左右）
• 三个值：border-color：（上）（左、右）（下）
• 四个值：border-color：（上）（下）（左）（右）

二、css常用属性之列表属性

标记的类型——list-style-type

常见：

• none 无标记。
• disc 默认。标记是实心圆。
• circle 标记是空心圆。
• square 标记是实心方块。
• decimal 标记是数字。
• decimal-leading-zero 0开头的数字标记。 (01, 02, 03,等)
• lower-roman 小写罗马数字(i, i, ii, iv,v,等。)
• upper-roman 大写罗马数字(I, II, II,IV,V,等。)
• lower-alpha 小写英文字母The marker is lower-alpha(a,b,c,d,e,等)
• upper- alpha 大写英文字母The marker is upper-alpha(A, B,C,D,E,等)

不常见：

• lower-greek 小写希腊字母(alpha, beta, gamma,等)
• lower-latin 小写拉丁字母(a,b,c,d,e,等)
• upper-latin 大写拉丁字母(A,B,C,D,E,等）
• hebrew 传统的希伯来编号方式
• armenian 传统的亚美尼亚编号方式
• georgian 传统的乔治亚编号方式(an, ban, gan,等。)
• cjk-ideographic 简单的表意数字
• hiragana 标记是: a,i,u,e,o,ka,ki,等。(日文片假名)
• katakana 标记是: A,I,U,E, O, KA, KI,等。( 日文片假名)
• hiragana-iroha 标记是: i, ro, ha, ni, ho, he, to,等。( 日文片假名）
• katakana-iroha 标记是: 1, RO, HA, NI, HO, HE, TO,等。(日文片假名)

三、div+span以及盒模型

div和span

• DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式
• DIV和span的区别在与，span是内联元素，div是块级元素

盒模型

1. 盒子外边距：margin
2. 盒子内边距：padding
3. 盒子边框宽度：border
4. 盒子宽度：width
5. 盒子高度：height