盒模型汇总盒模型汇总

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

文章图片
快递小哥的盒子

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

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

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

width

语法:width: | | 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: | | 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

文章图片
image.png margin

文章图片
image.png

border

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

文章图片
border border-radius

文章图片
圆角

语法:border-radius:[|]{1,4}[/|]{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 是默认值。如果你设置一个元素的宽为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(阴影)