盒模型

盒子模型

作用:盒子模型是用来描述一个元素的宽高,边框,内容,距离,边框的大小以及元素与元素的距离

从内到外盒子模型有这几个属性组成

  • width 内容宽度 height 内容高度
  • padding-top、padding-right、padding-bottom、padding-left
    ==padding是内边距,内容距离盒子内边缘的距离==
  • border 边框 边框只有厚度(高度),没有宽高,border也分别为四个方向
  • margin-top、margin-right、margin-bottom、margin-left
    ==margin是位边距 元素元素之间的距离==
image
  • widht/height 内容的宽度和高度,和整个盒子的宽高四两个概念

  • padding 内容边缘距离盒子边框内边缘的距离,有四个方向,有不同的写法

    • padding-top、padding-right、padding-bottom、padding-left
    • padding: 10px 20px 30px 40px; 上 右 下 左
    • padding: 10px 20px 30px; 上 左右 下
    • padding: 10px; 四个方向都是10px;
  • border 边框 由宽度 样式 颜色,默认一个盒子的边框宽度为3px,样式为无,颜色为黑色

这三个属性如果没有设置样式,边框也不会出现

你可能感兴趣的:(盒模型)