关于css:一个常见的手机端页面开发

实现的事

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 布局有利于弹性变动，有利于一行排列，毛病暂且没发现