【CSS练习】IT修真院--练习1-九宫格

九宫格——用html+css制作一个网页

一. 目标效果：

二. 效果描述

圆角橙色九宫格，自适应页面大小

三. 开发计划

1. 开发

• [x] index.html建九个div.block
• [x] app.css设定block大小颜色圆角横排

• [x] 寻找自适应方法

  • 重点：

    • div大小随屏幕变化
    • 令block的高度等于宽度

  • [x] 猜想：block父级宽度跟随屏幕变化，block始终为父级30%左右

    • [x] 方案一：Flex布局

      • 步骤:

        1. 简单分三行div.wrap(display:flex)，各带三个div.block(flex:1)，宽度自适应成功

        2. 将div.block高度自适应宽度,根据这篇文章padding-top百分比值参考容器宽度，可以尝试使用padding-top来为div.block顶出高度，但是这种写法div.block的margin只能很小，否则在小屏幕上会变成长方形

           • 效果：已实现
             
           • 代码：见div.container-flex
           • 特点：flex对移动设备适配好

        3. 步骤2中margin只能用很小数值的处理，根据任务要求最终的页面应该是九宫格，方块和方块间有间隔，方块和容器也有间隔，所以横纵的设计应该是用凑100%容器宽度的方法,按照这个设计来使用百分比,使用first-child & last-child伪类来完善布局.效果如下：
           

           • margin(1%) + 方块(32%) + margin(1%) + 方块(32%) + margin(1%) + 方块(32%) + margin(1%) = 100%
           • margin(4%) + 方块(28%) + margin(4%) + 方块(28%) + margin(4%) + 方块(28%) + margin(4%) = 100%

    • [x] 方案二：Flex布局2

      • 步骤：

        1. 方案一用了flex，但是那种用flex:1之前还要把div分三行再均等分，还要额外做margin处理，烦透. 学习阮一峰-Flex语法篇后，尝试div.wrap使用默认横排flex & flex换行 & justify-content:space-around, div.block设定百分比宽度，轻松实现目标效果：
           
• [x] Chrome自适应效果调试
• [x] 装Node.js开http-server开端口给手机看

2. 完成任务之后

• [x] A. 验收标准

  1. [x] 还原设计图

     • [x] 圆角：10%
     • [x] 颜色：换windows取色,#FFA600
     • [x] 设计图：基本一致
  2. [x] 自适应：宽度无滚动条，格子随窗体变化
  3. [x] 移动端：Chrome响应式测试和真机均通过

  4. [x] 编码规范

     • [x] UTF-8: <meta>的charset默认UTF-8
     • [x] 标签小写 & 闭合
     • [x] 元素属性值已用双引号包含
     • [x] css外联引用
     • [x] css不用id控制样式
     • [x] 用div实现布局

• [x] B.深度思考

  1. Doctype作用： 声明解析器

  2. 盒模型理解：用东西放在盒子中来类比元素在网页中的显示效果。

     • content: 物品，存储于海绵(padding)的包裹中，并由箱子(border)包装;
     • padding: 类比用来包裹贵重物品的海绵，最靠近物品(content)，在箱子(border)里面;
     • border: 箱子。箱子大小厚度可调整，箱子会被物品(content)及其海绵(padding)撑大;
     • margin: 箱子要求与其他东西保持的距离，处于最外层;

  3. display:

     • inline:

       • 行内元素，文本元素一般都是，两个inline元素连续写，其显示效果不换行;
       • 修改width & height无效， 可以通过修改line-height来改变高度，内容撑开宽度;
       • 代码换行被解析为空格
       • 不支持样式：width&height、text-align、background-position、clear

     • block:

       • 块状元素，div是其代表。一个块状元素会新开始一行并尽可能撑满容器;
       • 可通过修改width & height 来修改宽高;

       • 不支持样式：

         • vertical-align

     • inline-block：

       • 行内块元素，兼具block和inline特性,可通过修改width&height来修改宽高,且不独占一行;
       • 代码换行被解析为空格
     • none: 在不删除元素的情况下show|hide元素;

  4. 使用浏览器的F12调试界面方法 【调试】chrome谷歌浏览器-DevTool开发者工具-详细总结

     • Element：查看界面元素，可查看元素的对应css样式、计算后样式、事件监听器、属性.
     • Console: 控制台。用于显示日志信息及输入一些命令.

     • Network：请求监听。可获得请求列表，点开某一项将看到Headers、Preview、Response、Timing数据.

       • Headers: 头部数据。包含General、Response Heaeder、Request Headers

         • General：本次请求的URL、请求方法、状态码、请求服务器的地址、其他一些设置.
         • Response Headers: 响应头部.
         • Request Headers: 包含用户代理User-Agent，帮服务器识别设备用.
       • Preview： 预览。如果是图片html将直接显示界面，如果是数据则以其格式优化后展示，如果是代码则直接展示.
       • Response: 响应结果原始数据.
       • Cookies(有些有)：请求用到的cookies.
       • Timing: 请求时间使用情况.
     • Sources: 看代码 & 开断点.
     • Performance: 网页加载时记录情况, 帧数、CPU资源，据此可提出性能优化点;
     • Memory: 分析开销大的js函数
     • Application: 应用资源面板。存储LocalStroage、Session、Cookies等.
     • Security: 网页安全情况.

  5. 九宫格布局其他方法实现及其优劣

     • 九宫格布局 在 CSS 中，用 float 和 position 的区别是什么？

       • float:

         • 优点：浏览器兼容性好
         • 缺点：不是一种真正的布局方式。比较trick, 问题也比较多(移动端)

       • 当前使用的flex布局：

         • 优点：flex是真正的布局方式。移动设备友好，微信小程序也用flex做布局
         • 缺点：浏览器兼容性(支持IE10+)

     • block正方形化 移动端布局，div按比例布局，宽度为百分比，但又想让高度和宽度一样，即让div为正方形，怎么做布局呢？

       • vw & vh: 移动设备兼容性存在问题
       • 当前使用的padding-top：简单，兼容性好

  6. IDE意思 & 与文本编辑器的对比（后者被前者集成）

     • IDE(Integrated Development Environment)即集成开发环境，提供程序开发环境，一般集成了代码编辑器、编译器、调试器以及图形化用户界面。具有丰富的工具和流畅的开发体验。
     • 文本编辑器：单纯进行编辑用的应用。代码型的一般具有插件扩展功能。

  7. 加不加<meta>的viewport的区别 Responsive Web Design - The Viewport

     • 加<meta>的viewport:

       • width=device-width 将会一直帮你根据屏幕宽度设置界面宽度
       • initial-scale=1.0 将会在浏览器首次加载页面的时候帮你设置好页面缩放比例

     • 不加：

       • 无论什么设备显示效果都是一样的，移动设备上的页面可能会被等比例缩小到看不清

四. 上线

• 购买服务器，选用CentOS7
• 学习安装Nginx
• 将工程放到/usr/share/nginx/html目录下

五. 效果

• Github: cssup
• 线上展示： Task1-9blocks
• Readme.md下载: Readme

六. 系列文章

• 【CSS练习】IT修真院--练习1-九宫格
• 【CSS练习】IT修真院--练习2-开发工具
• 【CSS练习】IT修真院--练习3-简单界面
• 【CSS练习】IT修真院--练习4-移动端界面
• 【CSS练习】IT修真院--练习5-护工个人界面
• 【CSS练习】IT修真院--练习6-护工列表界面