前端初接触-css基础

本科的时候接触过一点前端，为了完成任务，页面设计全靠碰点，对各个元素，其属性的使用并不清楚，对做好的页面也不敢做过多改动，生怕一不小心就面目全非，再也回不到过去。
最近又想系统的学习一下前端，看了网易前端的微课程，里面解答了我之前使用时的一些困惑，但我现在也还是没记住，想着用的时候再去翻阅或者熟了自能生巧。也简单的截了几个图，现在想附上正确的理解，免得以后看到这些图都不知道是讲什么的了~

图片1：盒模型，从外到内，分别为margin、border、padding、content这4个层次，每个层次都有4个属性，分别为top、right、bottom、left。左边的图定义的是content的尺寸，也就是最内部这个层次的尺寸为150*150，而padding为50，则需要再向四方延伸50；这就和右边的图形成了对比，右边的尺寸定义的就是border，也就是最外层的大小。

图片2：盒模型背景设置。默认情况下，背景以border-box为背景图的定位原点，但这个属性是可以根据实际需求进行调整。

图3组合，三种常见的display类型，截图信息比较全了已经，主要是inline-block，可以设置高度，也可以和前面的元素同行显示，但后续换行（仿佛我理解的不太正确）

图4：display：none vs visiblility:hidden 这两个的差别在于，display none，直接在文档流中消失，不占用文档位置。而hidden只是看不见了，位置还是预留的。

组图5：position的一些属性
relative：以自己为参考，偏移设置的位置，原位置仍保留；
absolute：以祖先/根元素为参考物，原位置不保留；
fixed：以视窗为参照物，不保留在文档中位置；

组图6：float，用来做分栏的一个属性，脱离原文档流，使某元素向一个方向移动。

下次写一些小的代码实践~