盒模型（非要让我凑满五个字标题）

盒模型

标准盒模型

上面就是一个标准盒模型：

1. content:代表内容区域，存放内容，文本或者里面图片等等

2. padding：内边距，盒子内部的空间，内容与边框之间的间距，相当于快递中的泡沫

3. border：盒子的边框，四周边框可以分别设置。

4. margin：代表外边距，盒子和盒子之间的间距（分为父子关系和兄弟关系）

边框border

• 给盒子添加边框

• 语法:

  设置单独一条边框的样式
  border-方位-width: 宽度;
  border-方位-style: 类型；
  border-方位-color: 颜色；
  
  复合属性：
  设置一条边框的样式
  border-方位: 宽度   类型   颜色;
  
  同时设置四条边框的 样式
  border:  宽度   类型   颜色；
  

  • 类型：solid 实线 dashed 虚线 dotted 点线 double双边线

• 注意：

  • 边框必须设置至少两个值：宽度和类型，默认显示是黑色
  • 边框可以撑大盒子
  • 边框渲染原理：只设置一条边框时，显示为矩形，如果设置相邻的边，相接部分是沿着对角线均分
  • 通过边框可以绘制三角形，设置三边透明，一边不透明
    • transparent：设置为透明
    • 步骤：
      1. 设置一个width：0px的盒子
      2. 分别设置三边透明，一边不透明

内边距padding

• 设置盒子中内容到边框的距离

• 语法：

  分别设置每个方向的内边距
  padding-top：大小；
  padding-left
  padding-right
  padding-bottom
  
  复合属性
  padding
  设置一个值：上下左右
  设置两个值：上下   左右
  设置三个值：上   左右   下
  设置四个值：上    右   下   左
  

• 注意：padding会撑大盒子，背景颜色会铺设padding区域

• 应用场景：可以作为导航左右间距

外边距margin

• 盒子与盒子之间距离，外边距

• 语法：

  分别设置每个方向的内边距
  margin-top：大小；
  margin-left
  margin-right
  margin-bottom
  
  复合属性
  margin
  设置一个值：上下左右
  设置两个值：上下   左右
  设置三个值：上   左右   下
  设置四个值：上    右   下   左
  

margin重叠性

• 盒子和盒子之间是兄弟关系，margin在垂直方向会发生重叠，以其中最大的值为准
• 注意：margin在水平方向是叠加的

margin-top传递性

• 盒子和盒子之间是父子关系，子元素设置margin-top会传递给父元素
• 原因：子元素设置margin-top后找不到父元素的边界，就传递给了父元素
• 解决方案：
  1. 给父元素设置border：1px solid transparent；会更改盒子的大小
  2. 给父元素设置padding，也会改变盒子的大小
  3. 给父元素设置overflow：hidden；借助BFC容器的特点，容器里面的元素如何排列不会影响容器外面的元素。

标准盒子的大小的计算

css中设置的width和height分别代表内容区域（content）的大小

标准盒子真正的大小的计算：

• 宽度= content(width)+ padding * 2（左右）+ border * 2(左右)
• 高度=content（height）+ padding * 2(上下) + border * 2（上下）

标准盒子所占空间的大小计算：

• 宽度= content(width)+ padding * 2（左右）+ border * 2(左右) + margin * 2（左右）
• 高度=content（height）+ padding * 2(上下) + border * 2（上下）+ margin * 2（上下）

怪异盒子（IE盒模型）

width和height包含了content和padding和border，目前主流的浏览器默认都是标准盒模型

• 可以通过box-sizing来转换盒模型
  • content-box：标准盒模型
  • border-box：怪异盒模型

怪异盒子真正的大小的计算：

• 宽度= width（包含了content+padding+border）
• 高度= height（包含了content+padding+border）

怪异盒子所占空间的大小的计算：

• 宽度=width（包含了content+padding+border）+ margin * 2（左右）
• 高度 =height（包含了content+padding+border）+ margin * 2（上下）

拓展

width设置百分比和默认不设置的区别

• 百分比：参考父元素的宽度，设置content内容区域的宽度，添加border+padding会更改盒子的大小，添加margin会改变盒子所占空间的大小
• 默认不设置：相当于auto，代表动态获取到f父元素内容区域的宽度，包含了border+padding+margin

margin：0 auto；

• 上下外边距为0 ，左右为auto，代表自适应，将剩余空间均分左右两侧，可以让盒子水平居中

占空间的大小

• 默认不设置：相当于auto，代表动态获取到f父元素内容区域的宽度，包含了border+padding+margin

margin：0 auto；

• 上下外边距为0 ，左右为auto，代表自适应，将剩余空间均分左右两侧，可以让盒子水平居中

说明：本笔记主要根据网络视频教程整理。