盒子模型(二):外边距和填充、详解轮廓(第五天)

文章目录

  • margin(外边距)
  • padding(填充)
  • 轮廓(outline)
    • outline-color【invert不重要】
    • outline-offset(在 border 边缘外的偏移)
    • outline-style
    • outline-width
    • outline

margin(外边距)

CSS margin(外边距)属性定义元素周围的空间

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

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

不清楚规则,见:
盒子模型(一):初识盒模型 、 边框 [第四天]
盒子模型(二):外边距和填充、详解轮廓(第五天)_第1张图片
auto详情,见:

重学前端 概括元素和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css(font-weight)] / 详解分割线hr标签 / 初见border / 详解auto(第二天)

padding(填充)

CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。

当元素的 padding(填充) 内边距被设置时,所该区域将会受到元素背景颜色的填充

单独使用 padding 属性可以改变上下左右的填充。
盒子模型(二):外边距和填充、详解轮廓(第五天)_第2张图片

盒子模型(二):外边距和填充、详解轮廓(第五天)_第3张图片

轮廓(outline)

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

outline 不是元素尺寸的一部分,因此元素的宽度和高度属性不包含轮廓的宽度。

代码如下:

<body>
    <div
        style="width: 300px;height: 30px;outline-style:solid;outline-color: red ; outline-width:5px;border: solid blue 3px;">
        this is a outline
    div>
    <div style="width: 300px;height: 30px;border: solid yellow 10px;z-index=10000;">
        see the result
    div>
    <div>
        <p style="display: inline;outline-style:solid;outline-color: red ; outline-width:20px;">this is a outlinep>
        <p style="display: inline;border: solid blueviolet 10px;">see the resultp>
    div>
body>

运行结果:
盒子模型(二):外边距和填充、详解轮廓(第五天)_第4张图片
这里可见:

  1. outline确实不占空间,因为底下元素的border被覆盖了一部分;也由此可见,outline的z-index较高,反正菜鸟将底下的黄色边框的div的z-index调整到10000都无法显示在上面!

  2. 大家可以看见,最上方的div没有和黄色边框的div对齐,其实是对齐了的,只是outline不占空间,所以覆盖了body默认的边距的一部分!

  3. 由此可见,元素对齐,其实是元素最边缘相互对齐,因为outline不属于元素,所以才会看起来像没有对其!如图:
    盒子模型(二):外边距和填充、详解轮廓(第五天)_第5张图片

轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。
盒子模型(二):外边距和填充、详解轮廓(第五天)_第6张图片
Outlines在两个方面不同于边框

  • Outlines 不占用空间
  • Outlines 可能非矩形

outline-color【invert不重要】

outline-color属性指定轮廓颜色

注意:

请始终在 outline-color 属性之前声明 outline-style 属性,元素只有获得轮廓以后才能改变其轮廓的颜色。


同border一样,现在先后顺序错了还是能正确显示。但是最好按规定来,先outline-style,然后outline-color和outline-width随意!

盒子模型(二):外边距和填充、详解轮廓(第五天)_第7张图片
注意

这里第二个,菜鸟摸不着头脑,不知道是什么意思!因为菜鸟设置父元素、该元素的背景色为黑色,但是这个invert还是没有把outline-color变成白色,而且在goole、Firefox中,发现根本无法设置!如图:
goole
盒子模型(二):外边距和填充、详解轮廓(第五天)_第8张图片
Firefox
盒子模型(二):外边距和填充、详解轮廓(第五天)_第9张图片
2020/8/11补
该参数值目前仅在IE及Opera下有效!

outline-offset(在 border 边缘外的偏移)

outline-offset属性设置轮廓框架在 border 边缘外的偏移
盒子模型(二):外边距和填充、详解轮廓(第五天)_第10张图片
注意

这个属性,无法分开设置上下左右;一旦设置,就是四边都产生相应的偏移!

outline-style

outline-style属性指定outline的样式。(和border类似,但是没有hidden)
盒子模型(二):外边距和填充、详解轮廓(第五天)_第11张图片
对应的效果:(这里前四个太简单,所以不作展示)
盒子模型(二):外边距和填充、详解轮廓(第五天)_第12张图片
注意

  1. 这里要注意的是,这里和border一样,默认为3px!

  2. 同样,如果你设置的宽度能整除3,则每一部分都是 宽度/3 ;如果余1,则加到中间空白部分;余2,则分别加到里、外两个边框上!

outline-width

outline-width指定轮廓的宽度
盒子模型(二):外边距和填充、详解轮廓(第五天)_第13张图片
注意

经菜鸟实验,这里也和border一致,thin=1px、medium=3px、thick=5px!

outline

outline简写属性在一个声明中设置所有的轮廓属性

可以设置的属性分别是(按顺序):outline-style,outline-color, outline-width

注意

如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。必须带上outline-style,没有样式,其它都无从实现,另外两个,可以省略,会按默认值处理!

你可能感兴趣的:(重学前端2,css,css,详解轮廓,外边距和填充,经验分享,其他)