2021-01-17

CSS中的“盒子”

   我们先看一个盒子基本的属性:
     width & height
     用于设置内容区的宽高,该片区域用于显示内容。盒子高度默认为内容的高度。
     padding  内间距   
     代表内容盒子的外边界与外边框的内边界之间的距离border设定介于padding的外边缘与margin
     的内边缘之间,默认值为0。
     border
     设定介于padding的外边缘与margin的内边缘之间,默认值为0。
     margin  外边距    
     代表盒子四周的区域。设值方法与padding类似。相邻元素的边距会合并。


一、盒子的组成

  盒子主要由内容、内边距、边框和外边距四个部分组成。
  盒子的高度则是由内容、内边距和边框组成。
  而盒子所占空间的高度则要加上外边距,由内容、内边距、
  和外边距组成。

二、盒子的分类

  盒子主要分为两类
  1、标准盒子,也被称为w3c盒子。一般默认都为标准盒子。
  2、边框盒子,也被称为怪异盒子。

三、盒子的特点

  标准盒子的特点:设置的宽高属性直接设置给元素内容。
     (VS code中使用box-sizing属性可以改变盒子模型,取值“content-box”的盒子为默认盒子模型。)
  边框盒子的特点:设置的宽高属性直接设置给盒子。
     (VS code中使用box-sizing属性可以改变盒子模 型,取值“border-box”的盒子为默认盒子模型。)

接下来具体在VS code中理解一下:

我们先简单的写一个div标签,并设置宽高,内外边距及边框。

在这里插入图片描述

效果如下:在这里插入图片描述

这时,系统默认为标准盒子也就是:content-box。
盒子内容区宽度:100px
盒子宽度:100+20+2=122px
盒子所占空间的高度:122+20=142px 

此时,我们将box-sizing改为border-box(边框盒子)效果如下:
在这里插入图片描述

此时, 
盒子内容区宽度:100-20-2=78px
盒子宽度:100px
盒子所占空间的高度:100+20=120px

虽然页面表现出的差距不大,但是在后期加入动画时,就十分好看与明显,例如呼吸灯的设计。

下次再见!bye

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页