CSS边框border与轮廓outline、外边距margin、填充padding

边框样式:

边框宽度:border-width:length/thick /medium(默认值) / thin

"border-width\border-color" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。

边框颜色border-color

边框-单独设置各边等价于border-style:dotted solid;

border简写

轮廓:

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

轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。

outline :简写     outline-color   outline-style(与border-style一致)   outline-width (与border-width一致)

outline是不占空间的,既不会增加额外的width或者height(这样不会导致浏览器渲染时出现reflow或是repaint)

outline有可能是非矩形的(火狐浏览器下)

外边距:auto(结果依赖浏览器)/length

margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。

margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。

 简写:  

填充(padding):%/length  属性与margin一致

猜你喜欢

转载自blog.csdn.net/weixin_36766850/article/details/84939536