css盒子模型

1. css 盒子模型

css盒子模型由margin外边距、border边框、pdding内填充、centent内容四个属性组成。
width是内容的宽度，height是内容的高度。
外边距不会影响盒子，但是会影响盒子的位置

标准盒模型
在标准模型中，如果你设置width和height，实际设置的是content box，pdding和border再加上设置的宽高一起决定整个盒子的大小
盒子的可见框大小为:width、height -> content

怪异盒子模型
在怪异模型中，所有宽度都是可见宽度，所有内容宽度是该宽度减去边框和填充部分。
怪异模式下，这个盒子的可见框大小为:width、height -> content + padding + border

2. css3 box-sizing

如何计算一个元素的总宽度和总高度
box-sizing:content-box;
将采用标准模式的盒子模型标准；
宽度和高度分别应用到元素的内边距，在宽度和高度之外绘制元素的内边框和边框
box-sizing:border-box;
将采用怪异模式的盒子模型标准
从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
box-sizing:inherit;
规定应从父元素继承box-sizing属性的值
- 应用1：量取尺寸时不用再去计算一些值
- 应用2：解决一些需要设置百分比的盒模型值

3. css盒模型的注意点

****
 - padding不能为负，而margin可以为负值
 - 背景色会平铺到非margin的区域
 - margin-top传递的现象及解决方案
 - margin上下叠加的现象及解决方案

4. css盒模型的注意点

块级盒子（block box）
div、p、h1、address(联系方式信息)、article、aside、blockquote(块级引用元素)、dd、dl、fieldset(表单元素分组)、figcaption(图文信息组标题)、figure(图文信息组)、footer、form、header、hgroup(标题组)、hr、ol、pre(预格式化文本)、section、table、ul

块级盒子的特性（block box）

• 独占一行
• 支持所有样式
• 不写宽度的时候，跟父容器的宽度相同
• 所占区域是一个矩形

内联盒子（inline box）
b、big、i、small、tt、abbr、acronym、cite、code、dfn、em、kbd、strong、samp、var、a、bdo、br、img、map、object、q、script、span、sub、sup、button、input、label、select、textarea

内联盒子的特性（inline box）

• 盒子不会产生换行
• 有些样式不支持，例如：width、height等
• 不写宽度的时候，宽度由内容决定
• 所占区域不一定是矩形
• 内联标签之间会有空隙

自适应盒模型的特性

自适应盒模型是指当盒子不设置宽度时，盒模型相关组成部分的处理方式是如何的。