盒模型 -- CSS基础回顾（三）

---

元素宽度

魔术数值：通过多次尝试修改样式得出的值
默认的盒模型，指定的宽高，指定为内容的宽高，该模型在进行布局时，需要多次考虑padding的影响，并调用calc（）进行调整。

通过box-sizing：border-box进行调整，调整后的盒模型，该模型包含padding，可通过width直接解决

全局设置border-box

:root{
	box-sizing:border-box;
}
*,
::before,
::after{
	box-sizing: inherit;
}

给所有元素和伪元素设置border-box，当使用第三方组件时，可以在其顶级容器中设置为content-box，便于第三方组件的应用

元素高度

控制溢出行为：
overflow属性进行控制，visible（默认值，溢出边缘）；hidden（溢出部分被剪裁）；scroll（出现滚动条，通过滚动查看内容）；auto（当内容溢出时产生滚动条）
等高列：
可用表格布局替代浮动布局

.container{
	display:table;
	width: 100%;
}
.main{
	display:table-cell;
	width:70%;
}
.sidebar{
	display:table-cell;
	width:30%;
}

**非特殊需求，不要明确设置元素的高度。

外边距折叠

• 对容器使用 overflow：auto
• 外边距间加边框或内边距
• 使用flexbox布局

容器内元素间距

猫头鹰选择器

body * + *{
	margin-top：1.5em;
}