CSS:轮廓属性 & 盒子模型

1 轮廓属性

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

轮廓和边框的区别:

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

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

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

 

2 盒子模型

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

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

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

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

 

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

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

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

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

原文地址:https://www.cnblogs.com/JasperZhao/p/15120745.html