关于盒子模型的边框和轮廓,听得不明白?

来源:3-1 盒子模型(上)

lin丶林

2019-11-23 09:04:42

问1:轮廓是虚的东西,不占空间?位置在外边距和边框之间显示,没有实际宽度,只有显示宽度,仅体现在外边距中,和外边距重叠?

问2:边框是实际的东西,位置在外边距和内边距之间,有实现宽度。

问3:边框和轮廓属性相同?

问4:老师要是看不懂我的理解,能解释下边框和轮廓不同吗?


http://img.mukewang.com/climg/5dd883c90952ebf400000000.jpg

写回答

1回答

时间,

2019-11-24

同学,你好。

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

2、outline是不占空间的,既不会增加额外的width或者height,而border会增加盒子的宽度和高度

3、outline不能进行上下左右单独设置,而border可以。

outline有outline-color,outline-style,outline-style,outline-width,还有一个用于设置偏移位置的属性:outline-offset,当offset为负值时,表示像内偏移多少像素。outline-color的默认值是黑色,而border-color的默认值是字体的颜色

通俗的说:outline 就像是在装好了的一幅画的边框上镶上一层东西,为的是让这幅画这个边框更醒目。border 就是这幅画的边框了,它决定了这幅画的大小。

例:

http://img.mukewang.com/climg/5dd9ef4b097df4e303920484.jpg

如果我的回答解决了您的疑惑,请采纳!祝学习愉快~~~~

0

0 学习 · 3562 问题

查看课程