CSS中的盒子模型

CSS2

具体参数请查询：MDN Web Docs (mozilla.org)，本文不多做赘述。

盒子模型的组成

1. margin（外边距）： 盒子与外界的距离。
2. border（边框）： 盒子的边框。
3. padding（内边距）： 紧贴内容的补白区域。
4. content（内容）：元素中的文本或后代元素都是它的内容。

盒子的大小 = content + 左右 padding + 左右 border 。

注意：外边距 margin 不会影响盒子的大小，但会影响盒子的位置。

盒子内容区（content）

注意：

1. max-width 、 min-width 一般不与 width 一起使用。
2. max-height 、 min-height 一般不与 height 一起使用。

默认宽度

所谓的默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度。
总宽度 = 父的 content — 自身的左右 margin 。
内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右
padding 。

盒子内边距（padding）

注意：

1. padding的值不能是负数。
2. 行内元素的左右内边距是没有问题的，上下边距不能完美的设置。
3. 块级元素、行内块元素，四个方向的内边距都可以完美设置。

盒子边框（border）

注意：

1. 边框相关属性共20个
2. border-style、border-width、border-color其实也是复合属性

盒子外边距（margin）

注意：

1. 子元素的margin，是参考父元素的content计算的。（因为是父亲的content中承装着子元素）
2. 上margin、左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素的位置。
3. 块级元素、行内块元素，均可以完美地设置四个方向的margin；但行内元素，左右margin可以完美设置，上下margin设置无效。
4. margin的值可以是auto，如果给一个块级元素设置左右margin都为auto，该块级元素会在父元素中水平居中。
5. margin的值可以是负值。（详见CSS进阶–负margin技术 | QT-7274 )

margin塌陷

情形参考文章：CSS进阶–外边距叠加 | QT-7274

如何解决margin塌陷？

• 给父元素设置不为0的padding。
• 给父元素设置宽度不为0的border。
• 给父元素设置CSS样式：overflow:hidden。

margin合并

情形参考文章：CSS进阶–外边距叠加 | QT-7274 (qt7274.co)

如何解决margin合并？

无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距即可。

处理内容溢出

注意：

1. overflow-x、overflow-y 不能一个是hidden，一个是visible，是实验性属性，不建议使用。
2. overflow常用的值是hidden和auto，除了能处理溢出的显示方式，还可以解决很多其他问题。

隐藏元素的方式

visibility属性

visibility属性默认值是show，如果设置为hidden，元素会隐藏。

但元素仍占据原有位置。

display属性

设置display:none，就可以让元素隐藏。

彻底隐藏，无法被看见，也不占用任何位置，没有大小宽高。

布局技巧

1. 行内元素、行内块元素，可以被父元素当作文本处理。

   可以像处理文本对齐一样，去处理：行内、行内块元素在父元素中的对齐。text-align、line-height、text-indent等。

2. 子元素在父元素中的水平居中：

   • 若子元素为块元素，给父元素加上：margin: 0 auto;。
   • 若子元素为行内元素、行内块元素，给父元素加上：text-align: center;。

3. 子元素在父元素中的垂直居中：

   • 若子元素为块元素，给子元素加上： margin-top，值为（父元素content - 子元素盒子总高）/ 2。

   • 若子元素为行内元素、行内块元素：

     让父元素的height = line-height，每个子元素都加上：vertical-align : middle;。

     若想绝对垂直居中，父元素font-size设置为0。

4. 使用负margin技术也可实现水平垂直居中，详见：CSS进阶–负margin技术 | QT-7274

元素之间的空白问题

产生的原因：

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

解决方案：

1. 方案一：去掉换行和空格（不推荐）。
2. 方案二：给父元素设置font-size: 0，再给需要显示文字的元素，单独设置字体大小（推荐）。

行内块的幽灵空白问题

产生原因：

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。

解决方案：

1. 方案一：给行行内块设置vertical，值不为baseline即可，设置为middel、bottom、top即可。
2. 方案二：若父元素中只有一张图片，设置图片为display: block。
3. 方案三：给父元素设置font-size: 0。如果该行内块内部还有文本，则需单独设置font-size。

CSS3

CSS3 新增盒模型相关属性

box-sizing 怪异盒模型

使用box-sizing属性可以设置盒模型的两种类型

可选值	含义
content-box	width 和 height 设置的是盒子内容区的大小。（默认值）
border-box	width 和 height 设置的是盒子总大小。（怪异盒模型）

resize调整盒子大小

使用 resize 属性可以控制是否允许用户调节元素尺寸。

值	含义
none	不允许用户调整元素大小。 (默认)
both	用户可以调节元素的宽度和高度。
horizontal	用户可以调节元素的宽度 。
vertical	用户可以调节元素的高度。

box-shadow 盒子阴影

使用 box-shadow 属性为盒子添加阴影。

• 语法

  box-shadow: h-shadow v-shadow blur spread color inset;

• 各个值的含义

  值	含义
  h-shadow	水平阴影的位置，必须填写，可以为负值
  v-shadow	垂直阴影的位置，必须填写，可以为负值
  blur	可选，模糊距离
  spread	可选，阴影的外延值
  color	可选，阴影的颜色
  insert	可选，将外部阴影改为内部阴影

• 默认值：box-shadow:none 表示没有阴影

• 示例：

  /* 写两个值，含义：水平位置、垂直位置 */
  box-shadow: 10px 10px;
  /* 写三个值，含义：水平位置、垂直位置、颜色 */
  box-shadow: 10px 10px red;
  /* 写三个值，含义：水平位置、垂直位置、模糊值 */
  box-shadow: 10px 10px 10px;
  /* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
  box-shadow: 10px 10px 10px red;
  /* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
  box-shadow: 10px 10px 10px 10px blue;
  /* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
  box-shadow: 10px 10px 20px 3px blue inset;

opacity 不透明度

• opacity属性能为整个元素添加透明效果， 值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完
  全不透明。

  opacity 与 rgba 的区别？
  opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
  rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

伸缩盒模型

伸缩盒模型简介

• 2009 年， W3C 提出了一种新的盒子模型 —— Flexible Box （伸缩盒模型，又称：弹性盒子）。
• 它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序 …
• 截止目前，除了在部分 IE 浏览器不支持，其他浏览器均已全部支持。
• 伸缩盒模型的出现，逐渐演变出了一套新的布局方案 —— flex 布局。

伸缩容器、伸缩项目

伸缩容器： 开启了 flex 的元素，就是：伸缩容器。

1. 给元素设置： display:flex 或 display:inline-flex ，该元素就变为了伸缩容器。
2. display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。
3. 一个元素可以同时是：伸缩容器、伸缩项目。

伸缩项目：伸缩容器所有子元素自动成为了：伸缩项目。

1. 仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
2. 无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。

主轴与侧轴

• 主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。
• 侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）。

主轴方向

• 属性名： flex-direction
• 常用值如下：
  • row ：主轴方向水平从左到右 —— 默认值
  • row-reverse ：主轴方向水平从右到左。
  • column ：主轴方向垂直从上到下。
  • column-reverse ：主轴方向垂直从下到上。

注意：改变了主轴的方向，侧轴方向也随之改变。

主轴换行方式

• 属性名： flex-wrap

• 常用值如下：

  1. nowrap ：默认值，不换行。

     

  2. wrap ：自动换行，伸缩容器不够自动换行。

     

  3. wrap-reverse ：反向换行。

flex-flow

• flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要求。

  flex-flow: row wrap;

主轴对齐方式

1. 属性名： justify-content
2. 常用值如下：
   1. flex-start ：主轴起点对齐。—— 默认值
   2. flex-end ：主轴终点对齐。
   3. center ：居中对齐
   4. space-between ：均匀分布，两端对齐（最常用）。
   5. space-around ：均匀分布，两端距离是中间距离的一半。
   6. space-evenly ：均匀分布，两端距离与中间距离一致。

侧轴对齐方式

一行的情况

• 所需属性： align-items
• 常用值如下：
  1. flex-start ：侧轴的起点对齐。
  2. flex-end ：侧轴的终点对齐。
  3. center ：侧轴的中点对齐。
  4. baseline : 伸缩项目的第一行文字的基线对齐。
  5. stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）

多行的情况

• 所需属性： align-content
• 常用值如下：
  1. flex-start ：与侧轴的起点对齐。
  2. flex-end ：与侧轴的终点对齐。
  3. center ：与侧轴的中点对齐。
  4. space-between ：与侧轴两端对齐，中间平均分布。
  5. space-around ：伸缩项目间的距离相等，比距边缘大一倍。
  6. space-evenly : 在侧轴上完全平分。
  7. stretch ：占满整个侧轴。—— 默认值

flex实现水平垂直居中

方法一：父容器开启 flex 布局，随后使用 justify-content 和 align-items 实现水平垂直居中

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
} 
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
}

方法二：父容器开启 flex 布局，随后子元素 margin: auto

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
} 
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: auto;
}

伸缩性

flex-basis

• 概念： flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效。

  备注：主轴横向：宽度失效；主轴纵向：高度失效

• 作用：浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值 auto ，即：伸缩项目的宽或高。

flex-grow（伸）

• 概念： flex-grow 定义伸缩项目的放大比例，默认为 0 ，即：纵使主轴存在剩余空间，也不拉伸（放大）。
• 规则：
  1. 若所有伸缩项目的 flex-grow 值都为 1 ，则：它们将等分剩余空间（如果有空间的话）。
  2. 若三个伸缩项目的 flex-grow 值分别为： 1 、 2 、 3 ，则：分别瓜分到： 1/6 、 2/6 、3/6 的空间。

flex-shrink（缩）

• 概念： flex-shrink 定义了项目的压缩比例，默认为 1 ，即：如果空间不足，该项目将会缩小。

• 收缩项目的计算，略微复杂一点，我们拿一个场景举例：

  例如：
  三个收缩项目，宽度分别为： 200px 、 300px 、 200px ，它们的 flex-shrink 值分别为： 1 、 2 、 3
  若想刚好容纳下三个项目，需要总宽度为 700px ，但目前容器只有 400px ，还差 300px
  所以每个人都要收缩一下才可以放下，具体收缩的值，这样计算：

  1. \1. 计算分母： (200×1) + (300×2) + (200×3) = 1400
  2. \2. 计算比例：
     • 项目一： (200×1) / 1400 = 比例值1
     • 项目二： (300×2) / 1400 = 比例值2
     • 项目三： (200×3) / 1400 = 比例值3
  3. 计算最终收缩大小：
     • 项目一需要收缩： 比例值1 × 300
     • 项目二需要收缩： 比例值2 × 300
     • 项目三需要收缩： 比例值3 × 300

flex复合属性

flex 是复合属性，复合了： flex-grow 、 flex-shrink 、 flex-basis 三个属性，默认值为 0 1 auto。

• 如果写 flex:1 1 auto ，则可简写为： flex:auto
• 如果写 flex:1 1 0 ，则可简写为： flex:1
• 如果写 flex:0 0 auto ，则可简写为： flex:none
• 如果写 flex:0 1 auto ，则可简写为： flex:0 auto —— 即 flex 初始值。

项目排序

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0 。

单独对齐

• 通过 align-self 属性，可以单独调整某个伸缩项目的对齐方式
• 默认值为 auto ，表示继承父元素的 align-items 属性。