一个常见的手机端页面开发

完成的事

1. bananer图的设置：背景图片的设置，背景的模糊化和其他效果
2. 页首页脚固定，中间内容滑动的布局。overflow-y的使用
3. 竖杠，横杠的控制
4. 利用float布局图文混排
5. flex布局的使用。flex语法
6. 大体了解了下css代码规范css编码规范

解决的问题

1. 以前一直以为只有块级元素才能使用盒子模型，其实行内元素也可以，可以用来画竖杠，垂直居中等等。
2. 中间页面无法滑动的问题，是因为中间页面未独立于固定定位的页面，使固定定位的元素覆盖了其内容，无法出现滚动条。可以考虑使用相对定位使中间内容独立出来
3. 缩放扩展页面，页面小于内容，内容溢出，页面过大，显示页面不再扩张，可以考虑给父容器使用min-width和设置width：100%

仍有的困惑

1. flex布局仍未了解透彻，flex:1,inline-flex一知半解，考虑在以后的学习中不断提高认识。
2. rem是怎么实现自适应的，rem是相对根元素字体大小的单位，根元素字体大小可以随页面自适应吗？
3. vw,vh的应用有些麻烦
4. nginx网页可以通过电脑访问，但不能通过手机访问了，以前还行

开发步骤

1. html骨架构建，header main footer
2. html细节构建，考虑各元素的位置，是否垂直/水平居中，横杠竖杠，考虑用什么标签实现，还是套个父容器。应当优先考虑带有语义化的标签，class命名也也要易懂，专业。
3. css整体构建，去除元素自带的样式，设置好根元素的字体大小，

4. css细节构建

   • 了解浮动的影响，浮动有利于图文混排，但是会破坏文档流
   • 了解定位的作用，优势大于浮动，不会破坏文档流，可以覆盖或被覆盖在元素上。定位主要是位置距离不太好控制。
   • 了解flex布局，flex布局有利于弹性变化，有利于一行排列，缺点暂且没发现