一、盒模型概述(框模型)

• 描述盒子位置、尺寸的属性，分别是宽度 width、高度 height、内边距 padding、边框 border、外边距 margin。

• 盒模型分类：

  • 一种是 W3C 规定的标准盒模型

  • 一种 IE 浏览器特有的怪异盒模型。

  • 目前的浏览器大部分都支持标准盒模型，与此同时也保留了对怪异盒模型的支持。

  • 可以使用 CSS 属性 box-sizing 来控制盒模型

    • 设置 box-sizing: content-box浏览器选择使用标准盒模型方式来解析
    • 设置 box-sizing: border-box，浏览器将采用怪异盒模型来解析。

  • 标准盒模型：

    • 元素总宽 = margin + border + padding + width ；
    • 内容总宽：content = width ；

  • 怪异盒模型

    • 元素总宽：总宽 = margin + width；
    • 内容总宽：content = width - boredr - padding；
    • 特点：当总宽高大于所设宽高，内容区挤压

• 常见盒模型区域

  • 根据不同属性的效果划分区域：
    • 书写元素内容区域：width+height
    • 盒子可以实体化的区域：width+height+padding+border
    • 盒子实际占位的位置：width+height+padding+border+margin

01.盒模型-width（宽度）

• 作用:设置可以添加元素内容的区域的宽度。
• 默认值：

属性值	说明
auto	默认值，浏览器可计算出实际的宽度
px	像素值定义的宽度
%	定义参考父元素宽度 width 的百分比宽度

• 特殊应用
  • 如果一个元素不添加 width 属性，默认属性值为 auto，不同的元素浏览器会根据其特点自动计算出实际宽度，例：
    • 元素等独占一行的，width 属性的值会自动撑满父元素的 width 区域
    • 元素等不需要独占一行的，width 属性的值是内部元素内容自动撑开的宽度。
    • 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度

02.盒模型-height（高度）

• 作用:设置可以添加元素内容的区域的高度。
• 属性值：

属性值	说明
auto	默认，浏览器会计算出实际的高度
px	像素值定义的高度
%	定义参考父元素高度 height 的百分比高度

• 特殊应用 如果一个元素不添加 height 属性，默认属性值为 auto，浏览器会自动计算出实际的高度（内部元素内容自动撑开的高度）。元素的高度自适应内部内容的高度。

03.盒模型-padding(内边距)

• 内边距padding
  • 作用:设置的是元素的边框内部到宽高区域之间的距离
  • 特点：可以加背景，不能嵌套的内容
  • 属性值：常用 px 为单位的数值。 - padding 是一个复合属性，可根据内边距的方向不同划分为四个方向的单一属性。

• 单一属性

padding-top`: 40px;上
padding-right`: 30px;右
padding-bottom: 20px;下
padding-left: 10px; 左

• 简写：

  • 化简书写：一般习惯将四个方向的单一属性进行合写成 padding 属性。
  • padding 属性值：可以有 1-4 个值，值之间用空格进行分隔。
  • 根据四个方向属性值不同，padding 有多种书写方法。
  • 根据 padding 的属性值的个数不同，区分了四种表示法：
    • 四值法(设置四个值分配给上、右、下、左)
    • 三值法(设置三个值分配给上、左右、下)
    • 二值法(设置两个值，分配给上下、左右)
    • 单值法(设置属性值只有一个，分配方向上右下左，四边的值相同)

04.盒模型-border（边框）

• 边框 border
  • 作用:设置的是内边距外面的边界区域，作为盒子的实体化的最外层。
  • 属性值：三个值组成，分为线的宽度、线的形状、线的颜色。
  • border 属性：一个复合属性，根据划分依据不同可以有两种单一属性的划分方式。
  • 按照属性值的类型划分：
    • 线宽:border-width
    • 线型：border-style
    • 颜色：border-color
• 线宽 border-width
  • 作用:设置边框线的宽度。
  • 属性值：常用 px的数值，四个方向都有边框，属性值类似于 padding，也有四种写法。
• 线型border-style
  • 作用:设置边框的线条形状。
  • 属性值：形状的单词，总体也是类似于 padding 的综合属性的写法。 属性值 | 说明 | | ------ | ----------------------------------- | | none | 无边框 | | solid | 实线 | | dashed | 虚线，在大多数浏览器中为实线 | | dotted | 点状边框，在大多数浏览器中未实现 | | double | 双线，双线的宽度=border-width 的值 | | groove | 3D 凹槽边框。效果取决 border-color 的值 | | ridge | 3D 垄状边框。效果取决于 border-color 的值 | | inset | 3D 内容凹陷效果。效果取决于 border-color 的值 |outset |3D 内容凸出效果。其效果取决于 border-color 的值

• 边框颜色 border-color

  • 作用:设置边框的颜色。
  • 属性值：颜色名或颜色值，整体类似 padding 综合属性写法。

• 根据边框的方向划分
  • 上边框：border-top
  • 右边框:border-right
  • 边框:border-bottom
  • 左边框:border-left
  • 每个单一属性都必须与复合属性 border 一致，设置三个属性值。
• 根据方向和类型进一步细分
  • 类似 border-top 的单一方向属性，也可根据属性值类型继续进行单一属性划分。
  • 单一属性写法：border-方向-类型。
  • 注意：细分时必须先写方向划分再写类型划分，否则属性名错误

05.盒模型-margin（外边距）

• 外边距 margin

  • 作用:设置的是盒子与盒子之间的距离
  • 特点：不能渲染背景
  • 属性值：常用 px 为单位的数值，外边距的设置方式与内边距 padding 一模一样

• 单一属性

  • margin-top :20px; - margin-right:20px;
  • margin-botton:20px;
  • margin-left:20px;

• 复合属性的四种值写法

  • margin:10px 20px 30px 40px;
  • margin:10px 20px 30px;
  • margin:10px 20px;
  • margin:10px;

二、盒模型扩展

01.盒模型扩展-清除默认样式

• 清除默认样式
  • 大部分标签都有一个浏览器加载的默认样式，
  • 会对布局造成一些影响。为避免默认样式对整体布局效果造成影响，一定要清除默认样式。
  • 盒模型属性中内边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么用通配符清除。
  • <ul>两种列表有默认列表前缀：清除 list-style 属性
  • 标签的默认样式:顺带设置页面中常用的
  • a 的公共样式：设置 color 和 text-decoration.
  • 清除默认加粗效果：设置 font-weight.

02.盒模型扩展-height 应用

• 高度 height 应用

  • 根据不同的需求，高度属性可以设置也可以不设置
  • 如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载
  • 如果不设置高度：会根据标签内部内容高度自动撑开
  • 以标签为例，根据情况不同选择是否设置高度

• overflow 属性

  • 设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。
  • 可以通过一个溢出的属性 overflow，进行溢出部内容的显示效果设置。 属性值 | 说明 | | ------- | ----------------------------------------------------------- | | visible | 默认值，可见的可视的，溢出部分显示的 | | hidden | 溢出部分直接隐藏，隐藏超过边框范围的内容 | | scroll | 溢出的部分出现滚动条，可以拖动滚动条看到隐藏的部分，多出盒子部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条。 | | auto | 自动的，如没有溢出就正常显示，如有溢出，溢出的方向自动出现滚动条

• 必须不设置高度

  • 要求盒子高度必须自适应内部内容的高度或者设置height的属性值是自动的

03.盒模型扩展-居中

• 文本水平居中

  • 水平居中(text-align):可以设置单行或多行

• 文本垂直居中

  • 单行文本垂直居中（line-height):
    • 让文字行高line-height等于盒子高度height
  • 多行文本垂直居中：
    • 让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同。

• 元素垂直居中

  • 一个元素内部嵌套的子元素，在父元素中居中
  • 垂直居中：父级元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设相同上下边距

• 元素水平居中

  • 必须独占一行的盒子，如果盒子宽度低于父盒子宽度，可设置盒子margin值，水平方向值设auto
  • auto只对水平方向有作用

04.盒模型扩展-父子盒模型

• 父子盒模型

  • 一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的足够（不考虑溢出的情况），需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度width。
  • 父元素的width>=所有子元素width+padding+border+margin
  • 如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素

• 特殊情况：盒模型自动内减

  • 父子盒模型中，只有一个子元素，且子元素是类似<div>标签必须占一行的。
  • 不设置子元素的width属性，子元素的width属性值会自动加载父级元素的width。
  • 如同时设置了子元素水平方向的padding和border、margin，不需要手动去进行内减，子元素的width会自动收缩尺寸。
  • 子元素所有的水平方向的位置所有属性的加和等于父元素的width。

05.margin塌陷现象

margin塌陷现象：在垂直方向有连个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大，边距值小的塌陷到了边距值大的值内部。

• 同级元素塌陷 上面的元素有边距，下面的元素有上边距，两个边距相遇，真正的盒子间距距离都是较大的那个值。

• 父子元素塌陷

  • 父子元素之间也会出现margin塌陷，父元素和子元素设置了同方向的margin-top值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发现margin塌陷

  • 例（父子）：

    • 给子盒子设置margin-top时，会作用到了父盒子身上。那我们有四种方法可以解决这个问题，如下：
    • 给父盒子或者子盒子设置浮动 float: left;
      • 给父盒子设置 overflow: hidden; 溢出隐藏、清除浮动、解决外边距塌陷、触发BFC规则等等。
    • 给父盒子设置 padding-top: ; 设置内边距，但是padding会撑开盒子，会使盒子变大，所以父元素的高我们要减掉，这样设置的话，盒子宽和高不变。
      • 给父盒子设置边框 border: 1px solid green; 高度也需重新计算，高和宽都需减，这样设置的话，盒子宽和高不变。

• 解决margin塌陷问题的方法

  • 同级元素： 如果两个元素垂直方向有间距，只需设给一个元素，不要进行拆分。
  • 父子元素：
    • 让两个边距不要相遇，中间可以使用父元素border或者padding将边距分隔开；
    • 常用的方法：父子盒模型之间的距离就不要用儿子的margin去踹出来，而是父级的padding挤出来。
  • 注意：水平方向的margin没有塌陷现象。 BFC的基本概念–BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

06.BFC

• BFC的原理
  • 内部的Box会在垂直方向上一个接一个的放置
  • 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
  • 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
• BFC创立条件
  • float属性不为none
  • position属性为absolute或fixed
  • display属性为inline-block、table-cell、table-caption、flex、inline-flex
  • overflow属性不为visible（overflow: auto/ hidden;）
• BFC的使用场景
  • 可以用来自适应布局
  • 可以清除浮动（塌陷问题）
  • 解决垂直边距重叠