盒模型汇总

盒模型其实就是一个个的生活中盒子类似的东西,比方我们拿快递的盒子,那是什么样的呢?

快递小哥的盒子

那我们再来看一下CSS盒模型是什么样子的?

css盒模型

---

是不是非常的相似,那我们就来来学习一下css中的盒模型

盒模型概念、width、 height、 padding、 margin(水平居中)、 border、 border-radius、 overflow、 box-sizing、 box-shadow、 outline

width

• 语法:width: <length> | <percentage> | auto | inherit
  • length:长度,单位有px em rem...等
  • percentage: 百分比 %
  • auto width默认值
• min-width
  • min-width属性为给定元素设置最小宽度。它可以阻止 width属性的应用值小于 min-width的值。
• max-width
  • max-width 属性用来给元素设置最大宽度值. 定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大.

height

• 语法:height: <length> | <percentage> | auto | inherit
  • length:长度,单位有px em rem...等
  • percentage: 百分比 %
  • auto height默认值
• min-height
  • min-height 通常用来设置一个元素的最小高度。这个属性（min-height）不允许一个元素的高度（height）小于这个元素指定的最小高度（min-height）。
  • min-height的值会覆盖max-height 和height（译者：这句话我的理解是，当该元素的高度小到最小高度的时候，最大高度和高度值将不会有效。）
• max-height
  • max-height这个属性会阻止 height属性的设置值变得比 max-height
    更大。
  • max-height 属性用来设置给定元素的最大高度. 如果height
    属性设置的高度比该属性设置的高度还大,则height 属性会失效.
  • max-height 重载（覆盖掉） 但是min-height又会重载（覆盖掉max-height)

参考:box-Model

---

在介绍padding margin border等属性之前,我们来了解几个知识,以padding为例,margin border也适合以下规则

Top Left Bottom Right

上右下左顺时针

值缩写

值缩写

---

padding

• 语法:padding: [<length> | <percentage>]{1,4} | inherit

image.png

margin

• 语法:padding: [<length> | <percentage> | auto]{1,4} | inherit

image.png

• margin合并
  • 毗邻元素,外边距会合并,取较大值
  • 父元素与第一个/最后一个子元素也会合并(不是所有的情况)
  • margin合并问题，详见 MDN 外边距合并
    image.png

• 水平居中
  • margin:0 auto;

border

说明: ... 代表不常用的

• 语法:border: [<border-width>||<border-style>||<border-color>] | inherit

1. 语法:border-width:[<length>|...]{1,4} | inherit
2. 语法:border-style:[solid | dashed | dotted | ...]{1,4} | inherit
3. 语法:border-color:[<color>| transparent]{1,4} |inherit

border

---

border-radius

圆角

• 语法:border-radius:[<length>|<percentage>]{1,4}[/<length>|<percentage>]{1,4}]?
  • 语法代表一个是水平半径,一个是垂直半径,可以最多有八个值,中间用/分开

image.png

overflow

• overflow;visible| hidden | scroll |auto
  • overflow:visible默认值
  • overflow:hidden 超出隐藏
  • overflow:scroll一直显示滚动条,不管又没有超出
  • overflow:auto 内容少的时候没有滚动条,多了就有
• overflow-x
• overflow-y

box-sizing

• box-sizing:content-box| border-box | inherit

box-sizing

• content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  • 尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。
• border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
  • width = border + padding + 内容的 width，
    height = border + padding + 内容的 height。

box-shadow(阴影)

• box-shadow:none| <shadow>[,<shadow>]*
• <shadow>:inset?&&<length>{2,4}&&<color>?
  • inset 内阴影
  • color可写可不写,不写就是字体的颜色
  • 阴影不占空间

值的意思 阴影用法

outline(轮廓)

• outline:[<outline-width>||<outline-style>||<outline-color>]
  • 不占空间
  • borde外

image.png

---

关于CSS属性的浏览器兼容性，可以通过 caniuse 查询。

• border-radius ie8及以下不支持

• box-sizing ie7及以下不支持

• box-shadow ie8及以下不支持

• outline ie7及以下不支持