盒子模型

padding-bottom 和padding-top 的百分比是相对于父元素的宽度  margin 也是

1. 盒子的背景bgc和bgi默认从border开始设置，padding呈现bgc和bgi内容而不是element

2. 如果不设置盒子的宽高和padding，bgc和bgi的height由content高绝对，width由屏幕显示width绝定。如果没有内容，bgc和bgi都不会显示

3. 如果设置padding，bgi和bgc会由padding显示，padding-top和bottom决定是否显示bgc/bgi和显示高度，如果设置了padding高度，bgi和bgc宽度默认占满屏幕width，padding-left/right没有作用

4. 盒子的大小由border+padding+element宽高决定。

5. width和height: box-sizing：content-box时 是element宽高。border-box是border到border的距离

6. float浮动之后，盒子不再独占一行，不能只设置height，也必须设置width才能显示，padding-top/bottom,padding-left/right同样

7. 九宫格任务两种方法

8. 为了实现自适应，无法设置固定PX，em等固定宽高，所以尝试了vw和%两种

9. 1 vw方法

10. 设置body 宽为100vw即100%屏幕尺寸，9个正方形组成的大正方形，高设置为100vw而不是100vh

11. 设置9个div小正方形宽高为30%父元素body的宽高，即屏幕尺寸30%，设置margin-left和bottom各2.5%使float后一行显示三个小正方形，设置border-radius

12. 2 padding %方法

13. 此方法通过学习别的同学问题看到，最后学习到padding可以显示出bgc而不用设置盒子width和height

14. 设置padding-bottom33%设置出占满每行的9个div，float之后，因为类似行内元素，div不再默认占据整行，必须设置宽度，padding-left设置33%后，调整后设置margin-top/left 2.5%padding 30%

15. 
    

16. 
    

17.