基础实战页面中HTML和CSS要点个人见解

基础CSS的学习基本上是告一段落，下周应该就要进入JS的学习了。这一周的学习，自认为还是挺有成就感的，至少在不要求交互效果的基础上，我基本上能把网站UI设计版式完全写出来，CSS里面的属性也勉强能够达到百分之八十以上的灵活运用。在这期间，对于如何结合CSS来搭建HTML基础框架，到思考细节的简单交互，都让我对网站前端开发有一个重新的认识。现在回想起上周自己做出来的粗犷页面，真的可以说是有点惨目忍睹，不过毕竟那时候CSS知识量比较少，不知者无罪嘛。

这一周，完成了迪斯尼、豆瓣、阿里云的主页界面基础的前端代码，当然交互效果很少，毕竟还没有开始学习JS。在还不了解给元素设置浮动属性后可能会导致父级元素高度塌陷的情况下，做了迪斯尼的主页，当时遇到了很多问题，这个是这三个主页里面最简单的，但是用的时间却是最多的。虽然知道overflow这个属性，但是并不知道怎么使用，也不知道高度塌陷是个什么东西，几乎怀疑CSS语言的可靠性了，因为觉得不符合常规的逻辑。误以为含文本的元素跟图片元素在一起才会有出现高度为零的情况，在含有文本的父级元素设置“overflow:hidden;”，但是板块排版始终一直不对，出来的效果达不到设计图的效果，不停的检查代码到底是错在哪儿，但是就是不理解，一度抓狂，也走了很多的弯路。不过，从这个作业我倒是基本上对盒模型的一些属性有了充分了解，对于padding和margin的使用基本上没有问题了。

在做第二个模仿作业——豆瓣主页，在老师的讲解下开始知道overflow属性的效果，这个真的是画龙点睛的一个知识点，做盒模型的排版就基本上没什么问题了。但是大概是因为对HTML板块怎么划分上还不够精细，很多细节上调节花费了很多时间。第一次划分好的总体框架，在没有考虑很多细节的情况下直接去写样式代码，最后出来的效果肯定跟原图有差别，明白过来是框架搭错了改好HTML代码，才又发现CSS代码有些也不对，选择器不对又把之前那个勉强有点形状的样式给打乱了，又要花时间另外改CSS，来来回回浪费了不少时间，代码的效率并不高。做完这个页面，明白最基础的框架真的很重要，作为初级前端开发，在拿到UI设计师的效果图的时候，一定要先花时间把框架划分清楚，以便后期做CSS代码时轻松使用选择器。当然在这个作业里面，开始明白为什么会存在上一个作业浮动后的元素不能按照之前想的逻辑排版出来，也熟悉了关于定位的相关知识，基本上没有出现过上一个作业的一些错误，也基本上对BFC原理有个充分的认识了。

在上面两个作业之后，阿里云主页这个作业基本上没有出现我不能实现效果的地方，做起来越来越顺手，成就感也更大了。不过，在还没有学习到针对不同浏览器的兼容知识的情况，用不同浏览器打开肯定还是存在一定的差异，这都是在可以接受的范围内。当然还有交互效果的问题，需要后面接触到JS方面的知识之后再慢慢优化。