2020-08-19（盒子模型）

盒模型、盒子模型、框模型（box model）
每一个盒子都由以下几个部分组成：

• 内容区（content）
• 内边距（padding）
• 边框（border）
• 外边距（margin）

1.内容区（content）
元素中所有的子元素和文本内容都在内容区中排列
内容区的大小由width和height两个属性来设置

2.边框（border）
边框的大小会影响到整个盒子的大小
要设置边框，至少需要设置三个样式：

• 边框的宽度 border-width
  （border-width不写时有默认值，一般是3px）
  border-width可以用来指定四个方向的值

border-width：10px 20px 30px 40px;

除了border-width还有一组border-xxx-width，xxx的值可以是top、right、bottom、left（用来单独指定某一个边的宽度）

border-left-width：20px；

• 边框的颜色 border-color（同上类似）
  border-color也可以省略不写，自动使用color的值
• 边框的样式 border-style（同上类似）
  solid 实线
  dotted 点状虚线
  dashed 虚线
  double 双线
  border-style的默认值是none，没有边框

border简写属性，通过该属性可以设置边框所有的相关样式，并且顺序没有要求

border：10px  red  solid;

除了border以外还有四个border-xxx

border-top:10px red solid;
border-right:20px blue dashed;
border-bottom:30px orange dotted;
border-left:40px pink double;

若只想设置三个边的边框，则

border:10px red solid;
border-right:none;

3.内边距（padding）
内容区和边框之间的距离是内边距
一共有四个方向的内边距：
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响到盒子的大小
内容区的背景颜色会延申到内边距上
一个盒子的可见框的大小，由内容区、内边距、边框共同决定，在计算盒子的大小时，需要将这三个区域加到一起计算。
padding内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样

padding：10px 20px 30px 40px;

4.外边距（margin）
外边距不会影响盒子可见框的大小
但是外边距会影响盒子的位置
一共有四个方向的外边距：

• margin-top：上外边距，设置一个正值，元素会向下移动

• margin-right：

• margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动

• margin-left：左外边距，设置一个正值，元素会向右移动
  margin也可以设置负值，如果是负值则元素会向相反的反向移动

• 元素在页面中是按照自左向右的顺序排列的，所以默认情况下设置左和上外边距会移动元素自身，而设置下和右外边距会移动其他元素

• margin的简写属性，margin可以同时设置四个方向的外边距，用法和padding一样。

• margin会影响到盒子实际占用空间