#

盒子模型(Box Model)

HTML 中每一个元素都可以看成一个个的盒子模型
盒子模型一般具备四个属性

• 内容(content): 元素的内容的 width/height
• 内边距(padding): 元素和内容之间的间距
• 边框(border): 元素的边框
• 外边距(margin): 元素和其他元素之间的间距

内容

设置内容时时通过宽度和高度设置的

可以设置如下属性

• min-width: 最小宽度，无论内容多少，宽度都大于等于 min-width
• max-width: 最大宽度，无论内容多少，宽度都小于等于 max-width
• 移动端适配时，可以设置最大宽度和最小宽度

  不常用属性

• min-height
• max-height

width 在没有设置具体值情况下的默认值

width 在没有设置具体值时，浏览器默认设置宽度为auto,不是100%
height 属性在没有设置具体的值时同样也是auto，不会被继承

width: auto

对于块级元素来说是独占一行的
对于行内级元素来说，包裹内容

padding-内边距

padding 属性用于设置盒子的内边距，通常用于设置边框和内容之间的间距
padding 包括四个方向，padding-top/padding-right/padding-bottom/padding-left
padding 的顺序是 上 右 下 左

border

border 用于设置盒子的边框
border 属性区别于 content, padding, margin

• border 具备 width 属性
• border 具备 style
• border 具备 color

边框样式的值以及对应的效果

border-radius

border-radius 用于设置盒子的圆角

border-radius 设置的值

• 数值，例如 10px，通常那个用来设置小的圆角
• 百分比，通常用来设置一定的弧度或者圆形

margin 外边距

用于设置盒子的外边距，用于设置元素和元素之间的间距

margin-top 传递

如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的 margin-top 值会传递给父元素

<style>
  .box {
    width: 300px;
    height: 300px;
    background-color: red;
    padding-left: 30px; /* 父元素设置padding值使得的父元素的宽度撑大 */
  }
  .container {
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 100px;
  }
</style>
<div class="box">
  <div class="container"></div>
</div>

浏览器渲染结果

解决方案

• 给父元素设置border (不建议使用，因为盒子会多出边框的尺寸) border: 1px solid transparent
• 触发父级盒子的BFC 常见方法 给父级元素设置overflow: auto
• 最优的解决方案：给父元素设置 padding 属性

margin-bottom 传递

如果块级元素的底部线和父级元素的底部线重叠，并且父元素的高度是 auto, 那么这个块级元素的 margin-bottom 值会传递给父元素

<style>
  .box {
    width: 300px;
    background-color: red;
    padding-left: 30px; /* 父元素设置padding值使得的父元素的宽度撑大 */
  }
  .container {
    width: 100px;
    height: 100px;
    background-color: green;
    margin-bottom: 100px;
  }
</style>
<div class="box">
  <div class="container"></div>
</div>

渲染结果

这里父元素的高度必须是 auto, 即使父元素的高度也设置为height: 100px与子元素高度一致，也不产生这种情况

如何防止出现传递问题

• 给父元素设置 padding-top/padding-bottom
• 给父元素设置 border
• 触发 BFC: 父元素设置overflow:auto

注意

• margin 通常用来设置兄弟元素之间的间距
• padding 一般用来设置父子元素之间的间距

margin 折叠

垂直方向上相邻的两个 margin(margin-top, margin-bottom) 有可能会合并为一个 margin, 这种现象叫做 collapse(折叠)
水平方向上的 margin 永远不会折叠

这叠后最终值的计算规则

两个值进行比较，取较大的值

如何防止 margin 折叠

只设置其中一个元素的 margin

上下 margin 折叠的情况

• 两个兄弟块级元素之间上下 margin 的折叠
• 父子块级元素之间 margin 的折叠
  

行内级(inline)元素设置 margin 属性是无效的

块级元素的水平居中方案

• 针对行内级元素 行内级元素(inline/inline-block)水平居中，在父元素中设置text-align: center
• 块级元素 水平居中: margin: 0 auto;

块级元素占据父元素一整行并且可以自动居中以及给块级元素设置宽度后仍然占据一整行的原理

• 块级元素默认占据父元素的一整行
• 块级元素的宽度计算方法 父元素width = width+padding+border+margin
  所以如果没有给元素设置具体的宽度值结果为父元素width = width+0+0+0
  如果给元素设置了具体的宽度值，例如宽度为 100px, 剩余的空间需要 margin 去占满父元素width=100px+0+0+margin

外轮廓--outline

outlin 表示的是元素的外轮廓

• 不占据空间
• 默认显示在 border 的外面

outline 相关属性

• outline-width: 外轮廓的宽度
• outline-style: 取值和 border 样式一致
• outline-color: 外轮廓的颜色
• outline 是 outline-width, outline-style, outline-color 的简写

应用场景

• 去除 a 元素、input 元素的 focus 轮廓效果

盒子阴影--box-shadow

box-shadow 属性可以设置一个或者多个阴影

• 每个阴影使用 shadow 表示
• 多个阴影之间使用逗号隔开，从前向后叠加 box-shadow: 5px 5px 10px yellow, 10px 10px 10px green

shadow 的常见格式 shadow: offset-x offset-y blur-radius spread-radius color inset/outset(outset默认值)

• 第一个值 offset-x 水平方向的偏移，正数向右偏移
• 第二个值 offset-y 垂直方向的偏移，证书向下偏移
• 第三个值 blur-radius 模糊半径 可不写
• 第四个值 spread-radius 延伸半径 可不写
• 第五个值 color 阴影的颜色，如果没有设置就跟随 color 属性的颜色 可不写
• 第六个值 inset/outset 默认值 外边框阴影变为内边框阴影，不设置就是 outset 可不写
  

在线调试阴影 https://html-css-js.com/css/generator/box-shadow/

文字阴影--text-shadow

text-shadow 使用方式类似于 box-shadow, 用于给文字添加阴影效果
text-shadow 没有 spread-radius, inset/outset 属性
在线调试阴影 https://html-css-js.com/css/generator/box-shadow/

行内非替换元素的注意事项

以下属性对行内非替换元素不起作用、

width, height, margin-top, margin-bottom

以下属性对行内级非天魂元素的效果比较特殊

padding-top, padding-bottom 上下方向的 border, padding 和 border 会把内容撑开，但是上下不占据空间

color 属性

• 背景色会设置到 border 下面
• 在 border 属性没有设置颜色的情况下，会显示 color 属性设置的颜色

CSS 属性---box-sizing

box-sizing 用来设置盒子模型中宽高的行为

contet-box

content-box 情况下 padding 和 border 都布置在 width, height 外面
这种模式下

• 元素的实际占用宽度 = border+padding+width
• 元素的实际占用高度 = border+padding+height

border-box

padding,border 都在 width, height 里面
在这种模式下

• 元素的实际占用宽度 = width
• 元素的实际占用高度 = height

盒子模型示意图

W3C 标准盒子模型

IE 盒子模型(IE8 以下浏览器)