CSS 盒模型

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着。盒子的组成：content 内容，padding 内填充，border 边框，margin 外边距

CSS 盒模型的注意点

• padding 不能为负值，margin 可以为负值
• 背景色会平铺到非 margin 的区域，比如 border 无颜色会显示背景色

.box1 {
    width: 100px;
    height: 100px;
    padding: 20px;
    background: pink;
    border: 10px rgba(0, 0, 0, 0.1) solid;
    margin: 20px;
}

• margin-top 传递的现象及解决方案

源码预览打开窗口

查看源码

解决方案可以用下面方式，或 BFC 方式

 /* 可选的解决方法 */
border: 1px solid pink;

• margin 上下叠加的现象及解决方案

源码预览打开窗口

查看源码

解决方案可以用下面方式，或 BFC 方式

 /* 可选的解决方法 */
margin-bottom: 70px;

块级盒子与内联盒子

最常用的两种“盒子”——块级盒子（block box）和内联盒子（inline box）

• 块级盒子：div p h1 ...
• 内联盒子：span a strong ...

块级盒子的特性

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

内联盒子的特性

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

自适应盒模型

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

源码预览打开窗口

查看源码

标准盒模型与怪异盒模型

• 在标准盒模型中，如果你给设置的 width 和 height，实际设置的是 content box，padding 和 border 再加上设置的宽高一起决定整个盒子的大小，即 width = content width
• 在怪异盒模型中，所有宽度都是可见宽度，所有内容宽度是该宽度减去边框和填充部分，即 width= content width + border width + padding width

源码预览打开窗口

查看源码

box-sizing 属性

• content-box: width、height -> content
• border-box: width、height -> content + padding + border
• 应用1：量取尺寸时不用再去计算一些值，比如固定 height 100px

.box{
    height: 100px;
    padding:20px 0;
    box-sizing: border-box;
}

• 应用2：解决一些需要设置百分比和盒模型值，比如 width 100%

input{
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
}