CSS盒模型的注意点

1.padding不能为负值，而margin可以为负值

2.背景色会平铺到非margin的区域

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

意思给子元素设置margin-top会把父元素往下拉

解决方法：给父元素加边框，父元素开启BFC，弹性布局和网格布局

4.上下排列的盒子，效果是取margin大的值

解决方式：只给一个盒子设置margin,开启BFC，flex和网格布局

4.块级盒子与内联盒子

块级元素的特性：

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

行内元素的特点：

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

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

不给盒子的宽度，不写宽度的时候，跟父容器的宽度相同

标准盒模型和怪异盒模型

在标准盒模型中，如果你给盒子设置了width和height，实际设置的是content box。padding和border再加上设置的宽高一起决定整个盒子的大小。

在怪异盒模型中，所有宽度都是可见宽度，所有内容宽度是该宽度减去边框和填充部分。

通过设置box-sizing属性

• content-box: width、height--->content
• border-box:width、height--->content+padding
• 应用1：量取尺寸时不用再去计算一些值
• 应用2：解决一些需要设置百分比的盒模型值

https://www.ukoou.com/register?ucode=0G5G