CSS：轮廓属性 & 盒子模型

1 轮廓属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓和边框的区别：

　　边框 (border) 可以是围绕元素内容和内边距的一条或多条线；

　　轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

 

 

2 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：　　

 

 

 

margin(外边距) - 盒子与盒子之间的距离

border(边框) - 盒子的保护壳

padding(内边距/填充) - 内填充，盒子边与内容之间的距离

content(内容) - 盒子的内容，显示的文本或图像