一、css常用属性之边框属性
边框风格 border-style
定义某一方向的边框样式:
- 下边框样式border-bottom-style
- 上边框样式border-top-style
- 左边框样式border-left-style
- 右边框样式border-right-style
边框风格样式的属性值
- none 无边框
- solid 直线边框
- dashed 虚线边框
- dotted 点状边框
- .double 双线边框
- groove 凸槽边框
- ridge 垄状边框
- nset inset边框
- outset outset边框
- inherit 继承
边框宽度 border-width
- 下边框宽度border-bottom-width
- 上边框宽度border-top-width
- 左边框宽度border-left-width
- 右边框宽度border-right-width
边框宽度的属性值
定义某一方向的边框宽度:
- thin 细边框
- medium 中度边框
- tick 粗边框
- px 固定值的边框
- inherit 继承
边框颜色
定义某一方向的边框颜色:
- 下边框宽度border-bottom-color
- 上边框宽度border-top-color
- 左边框宽度border-left-color
- 右边框宽度border-right-color
属性值
- 直接写颜色:例如 red、blue
- RGB:rgb(x,y,z)
- RGBA:例如 rgba(255,255,0,0.1)
- 十六位进制:例如 #ff0、#ff0000
- 继承: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是块级元素
盒模型
- 盒子外边距:margin
- 盒子内边距:padding
- 盒子边框宽度:border
- 盒子宽度:width
- 盒子高度:height