2020.12.9学习关于盒子模型

盒子模型

• 盒子：可以理解为是一个容器。
• 盒子模型用英文表示：box model
• 最常见的盒子有：div span
• 一个盒子的区域主要包括：
  内容：content
  1、宽 weidth 单位：px 设置在content的区域
  2、高 heigth 设置在content的区域
  3、内边距 padding
  4、外边距 margin
  5、边框 border
  【注意】标准盒模型的宽和高和盒子真实占有的宽高不是一个概念，设置宽和高是盒模型内容的宽和高。
  【注意】
  盒子的宽不设置时，默认为100%；但是宽度一般会做设置，高度却不一定。高度一般是由内容自适应填充。

内边距（padding）

定义：内容与边框的距离，内边距的区域也会被背景渲染。

• padding可以设置四个方向：上下左右

• 写法：
  1.小属性
  padding-left 左边距
  padding-right 右边距
  padding-top 上边距
  padding-bottom 下边距
  
  

• 2复合属性写法：
  四种写法：
  一值法：
  padding:20px; 上下左右的padding相等。
  二值法
  padding:20px 10px; 上下 左右
  三值法：
  padding:20px 10px 30px; 上 左右 下。
  四值法：
  padding：10px 20px 30px 40px; 上 右 下 左 顺时针。

• 小技巧：
  若只有单个方向的内边距与其他内边距不同，可以先设置总体，再用单一属性单独设置不同的内边距。

边框 （border）

• 定义：盒子占有的最外层的区域。

• border是一个复合属性

• border有三个要素：宽度，线的类型，颜色

• 按三要素拆分：
  border-width 设置宽度
  border-style 设置线的类型
  border-color 设置颜色

• 按照方向设置：
  border-left
  border-right
  border-top
  border-bottom

• 复合写法： border：1px solid red;

外边距（margin）

• 定义：盒子与盒子之间的距离

• margin有四个方向：上下左右。

• 写法：它的写法与内间距雷同。
  - 1.小属性
  margin-left
  margin-right
  margin-top
  margin-bottom
  - 2.复合属性写法：

  四种写法：
  一值法：
  margin:20px; 上下左右的margin相等。
  二值法
  margin:20px 10px; 上下 左右
  三值法：
  margin:20px 10px 30px; 上 左右 下。
  四值法：
  margin：10px 20px 30px 40px; 上 右 下 左 顺时针。

• eg 下面两个盒子之间外边距为margin：50px

外边距塌陷

• 上面盒子的底部和下面盒子的顶部都设有外边距，两个外边距没有相加，而是重合，他们的间距依旧是50px，这就是外边距塌陷
• 在垂直方向上，margin有相遇的部分，不是取两个margin的和，而是取最大值。

盒子模型内嵌

• 一个盒子里面再装一个盒子

• 子盒子的整体占有的位置不要超过父盒子的内容区域
  若子盒子不设置宽度，会自动撑满父盒子的内容区域。
  若不设置宽，只设置内边距和边框，宽度会自适应。
  

内嵌盒子外边距塌陷

• eg：父盒子没有填充内容，也没有设置顶部边框，那么子盒子的margin-top会让父盒子与子盒子一起掉下来。

• 父盒子设置顶部边框后，就不会被子盒子拉下来

标准文档流

• 定义：内容必须是从左到右，由上往下书写。前面的内容大小或位置发生变化时，后面的内容也会随之变化。
• html网页就是一个标准文档流
• 1.空白折叠现象
  无论多少个空格，换行 缩进，都会折叠成一个空格。
  2.高矮不齐，底部对齐。
  3.自动换行

标准文档流将HTML分成三种

• 行内元素 inline
  可以与其他行内元素并排展示。
  设置宽高无效。
  际的宽高，由内容的宽高来决定。

• 块级元素 block
  独占一行。
  可以设置宽高

• 行内块元素 inline-block
  可以设置宽高
  可以与其他行内元素或行内块元素并排。

• 行内元素：除了p标签之外，所有的文本级标签都是行内元素。p标签是文本级标签，但属于块级元素。

• 块级元素：所有的容器级标签都是块级元素，包括p标签。

• 通过display属性来查看当前元素的类型，也可以通过该属性修改当前元素的类型。

• 块级元素转行内元素

   display:inline;  拥有行内元素的属性，块级元素属性就会失效。
  

• 行内元素转块级元素

   display:block;  拥有块级元素的属性，行内元素属性就会失效。
  

• 转行内块元素

   display:inline-block；
   1.可以设置宽高
   2.可以与其他行内元素并排。
  

浮动（flot）

• 未设置浮动时的效果

• 两个盒子上下默认排列

• 标准文档流的限制比较多，导致页面效果很多无法实现。
  为了可以并排展示，又可以设置宽高，我们可以脱离标准文档流。

• css中一共有三种方法可以设置脱离文档流：
  1.浮动
  2.绝对定位
  3.固定定位

• 设置浮动的方法：

  float：left/right
  

元素贴靠

• 定义：每一个浮动元素都会去紧靠上一个浮动元素
  

字围效果

• 标准文档流的文字不会被浮动元素遮挡。

收缩

• 一个浮动的元素，如果没有设置宽高，那么元素将自动收缩为内容的宽高
  

浮动嵌套

• 如果浮动的子元素的宽的和大于父盒子的宽，那么后面的子元素会换行。