CSS——盒子模型 列表样式 边框属性 轮廓（outline，外边框）

盒子模型

我们可以把html中的所有元素都看成是一个盒子，盒子与盒子之间的距离，盒子的墙壁，盒子里装的东西，盒子里的东西与盒子墙壁的距离组成一个盒子。
即边距，边框，填充，和实际内容组成了一个盒子
盒子允许我们在其它元素和周围元素边框之间的空间放置元素即两个盒子之间我们可以放其它的东西，比如文字。
下面的图片说明了盒子模型(Box Model)：

列表样式

取消列表前面的符号

link-style: none

不同的列表项标记

list-style-type指定列表项标记的类型

• circle 空心圆
• square 实心矩形
• upper-roman 英文 I II III 顺序标记
• lower-alpha 英文abc顺序标记

作为列表项标记的图像

ul
{
    list-style-image: url('01.gif');
}

边框属性

边框样式

border-style

取值	描述
none	默认无边框
dotted	定义一个点线边框
dashed	定义一个虚线边框
solid	定义实线边框
double	定义两个边框。 两个边框的宽度和 border-width 的值相同
groove	定义3D沟槽边框。效果取决于边框的颜色值
ridge	定义3D脊边框。效果取决于边框的颜色值
inset	定义一个3D的嵌入边框。效果取决于边框的颜色值
outset	定义一个3D突出边框。 效果取决于边框的颜色值

border-style的多种写法

border-style:dotted solid double dashed;

• 上边框是 dotted
• 右边框是 solid
• 底边框是 double
• 左边框是 dashed

border-style:dotted solid double;

• 上边框是 dotted
• 左、右边框是 solid
• 底边框是 double

border-style:dotted solid;

• 上、底边框是 dotted
• 右、左边框是 solid

border-style:dotted;

• 四面边框是 dotted

轮廓（outline，外边框）

属性	说明	值
outline	在一个声明中设置所有的轮廓属性	outline-color ； outline-style ； outline-width ； inherit
outline-color	设置轮廓的颜色	color-name； hex-number； rgb-number ； invert ； inherit
outline-style	设置轮廓的样式	none ； dotted ； dashed ； solid ；double； groove ；ridge； inset ； outset ；inherit
outline-width	设置轮廓的宽度	thin ； medium ； thick； length； inherit

注意：outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）
outline有可能是非矩形的（火狐浏览器下）