1、盒子布局顺序： 从外往内，从上往下
盒子布局工具：PxCook
盒子样式：宽度，辅助的背景颜色，盒子模型部分border,padding,margin
2.盒子计算公式：
案例：盒子尺寸300*300，背景粉色，边框10PX实线黑色
知识点：box-size 设置为 “border-box”。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度
<style>
</style>
<title>表格实例</title>
<style>
/* 用box-sizing 自减 默认值为 */
div{
box-sizing: border-box;
width: 300px;height: 300px;
background-color: pink;
border: 10px solid black;
}
</style>
</head>
<body>
<div>我是一个盒子</div>
</body>
</html>
3.清除默认外边距：
快捷的方式使用通用属性
*{
margin: 0;
padding: 0;
}
4.外边距折叠现象，在垂直布局的块级元素，上下margin会合并
解决方案：只给一个盒子就可以设置margin
5.外边距 坍陷现象:互相嵌套的块级元素，子元素margin-top会作用在父级元素上
解决办法：
5.1 给父元素设置border-top 或者 padding-top 分割父子元素的margin-top
5.2 给父元素设置overflow:hiden
5.3 转换成行内块元素--子元素不是块元素了
5.4 设置浮动
6.行内元素magin和padding无效的情况
1.水平方向的maagin 和 padding布局中有效
2.垂直方向的margin 和 padding布局中无效---用行高解决 行内元素的垂直布局
7.不会撑大盒子的特殊情况
1.如果盒子没有设置宽高，此时的宽高默认就是父盒子的宽度
2.此时给盒子设置左右的padding 或者右边的border 此时不会撑大盒子
