盒模型

在HTML中, 基本单位是元素; 而在CSS中, 布局的基本单位是盒, 盒总是矩形的.

盒模型的概念与定义

盒模型: css用于布局的基本单位和数据结构.

盒模型Firefox 盒模型简约图

content(width/height)内容宽高
padding内边距
- 控制内容和边框之间的距离
border边框
margin外边距
- 总是透明

各部分的赋值

在赋值时, 可以使用px, em, ex和百分比, 按照顺时针上右下左赋值:

h1 {
    padding: 10px 0.25em 2ex 20%;
}

当设置为百分比时, 其参考仅为父元素的width, 即10%是父元素width的10%.

# 值未声明时的默认值

padding或border未声明值时, 标准默认值为0, 但是在不同浏览器下又通常不为0, 而是被设为浏览器的默认值. 可以通过覆盖这些属性为0来规避浏览器的不确定性, 但是使用全局reset更安全

# auto

auto常用来实现水平居中, 因为它会使元素先占据指定的width, 剩余的宽度在一分为二成为左右外边距问题是, 当窗口小于width的时候, 浏览器会显示左右滚动条, 有可能使元素展示得像是溢出了一样. 设置max-width可以解决之前的越界问题, 可以很好地适配小窗口的问题.

外边距叠加

当两个垂直外边距相遇时, 会合并成为一个外边距, 大小为两者中较大者. 不会发生层叠的盒子

行内框
浮动框
绝对定位框

盒子大小的计算方式/box-sizing

# 默认算法

在box-sizing这一属性出现以前, css的边框盒大小计算方式为:

边框盒宽度: width(content) + 左右padding + 左右border
边框盒高度: heigth(content) + 上下padding + 上下border

上面这种算法, 也是box-sizing属性的默认值: content-box

# box-sizing

box-sizing是为了解决css盒模型在布局上表现力比较差这个问题而诞生的, 有观点认为css标准盒模型更适合文档排版而不是UI布局, box-sizing一定程度上反映了这个观点. box-sizing有三种值:

content-box: 默认盒模型
border-box : border和padding计入width
inherit : 继承父元素的值

设置box-sizing属性为border-box后, 边框盒的计算方式就发生了变化. width/height不再仅仅代表content, 而是content + padding + border

## width/height默认为content

当不设padding和border的时候, width和height的值就是content的大小. 即 width/height = content + padding(0) + border(0)

## 照实展示padding, border, 压缩content

当设置了padding和border, 那就先从width/height中减去这部分大小, 剩下的大小再用来安排内容content. 当padding+border大于width的时候, padding和border仍然会展现其应有的大小, 但content的大小则相对不确定. 即 content = width/height - padding - border. 但总保留一些最小的空间用于展示content.

为了适配多种内核, 一般需要这样写:

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box; <br>
   box-sizing: border-box;