邢走在云端

vuePress-theme-reco 邢走在云端    2024
邢走在云端 邢走在云端

Choose mode

  • dark
  • auto
  • light
首页
分类
  • 2019
  • 2020
  • 2021
  • 2022
  • 2023
  • 2024
标签
时间线
关于我
webpack5
h-design
GitHub
author-avatar

邢走在云端

81

Article

99

Tag

首页
分类
  • 2019
  • 2020
  • 2021
  • 2022
  • 2023
  • 2024
标签
时间线
关于我
webpack5
h-design
GitHub

CSS基础之盒子模型

vuePress-theme-reco 邢走在云端    2024

CSS基础之盒子模型

邢走在云端 2020-07-06 CSS

最后发现,巩固基础才是关键。

#盒子模型


# padding

可以设置四个值,如图

padding: 1px 2px 3px 4px;

表示内边距,内容与盒子上右下左的距离。

记住顺时针转就行。

  • 如果padding不全,那么就和对面的padding一样。

    如图,只规定了两个,但是在下面的盒子模型中默认使得对面的padding属性一致。

  • 只规定一个,那么上下左右内边距均为一致。

  • 还可以单独设置内边距

     padding-left: 1px;
     padding-right: 2px;
     padding-top: 3px;
     padding-bottom: 4px;
    

  • 同时设置会怎么覆盖呢

    这是css代码的顺序

    padding-left: 5px;
    padding-right: 6px;
    padding: 1px 2px 3px 4px;
    padding-top: 7px;
    padding-bottom: 8px;
    

    可以清晰地看出,后面的覆盖了前面的属性


# margin

和padding一样,也可以设置四个值。不过表示的是外边距。如图

 margin: 1px 2px 3px 4px;

同样,四个值表示上右下左外边距,顺时针

其他的都和padding一样,也可以单独设置各个方向的margin,如margin-top等,不赘述。


# border

border:10px solid black;

三个参数值,表示边框的粗细,线条样式,颜色

也可以分开设置。

border-style: solid dashed dotted double;

上面将盒子四周的border样式设置不同。


# content

图中的100*100的空间就是content。也即是我们在css中设置的width和height大小

  • 由下图可以看出:div大小

    • 水平空间大小 = border(左右) + padding(左右) + width
    • 垂直空间大小 = border(上下) + padding(上下) + height