九宫格——用html+css制作网页1.目标效果：2.效果描述圆角橙色九宫格，自适应页面大小3.开发计划1.开发[x]index.html构建九个div.block[x]app.css设置块大小和颜色圆角水平行[x]寻找自适应方法重点：div大小随屏幕变化使块高度相等tothewidth[x]]猜测：block的parent的宽度随着屏幕的变化而变化，block总是在parent的30%左右。flex:1),宽度自适应成功将div.block的高度适配到宽度上，根据这篇文章padding-top的百分比值指的是容器宽度，可以尝试使用padding-top来顶出高度div.block的，但是这种写法div.block的边距只能很小，否则在小屏幕上会变成矩形效果：实现代码：见div.container-flex特点：flex很好适配mobiledevicesstep2中，margin只能使用很小的值根据任务要求，最终页面应该是九方格。方块之间有间隔，方块与容器之间也有间隔。因此，横向和纵向设计应采用补足100%容器宽度的方法。根据此设计使用百分比。使用first-child和last-child伪类来改进布局。效果如下：margin(1%)+square(32%)+margin(1%)+square(32%)+margin(1%)+square(32%)+margin(1%)=100%margin(4%)+square(28%)+margin(4%)+square(28%)+margin(4%)+square(28%)+margin(4%)=100%[x]选项2：flex布局2步：方案一使用flex，但是在使用flex:1之前，需要把div分成三行然后平分，还需要额外做margin处理，比较烦人。学完阮一峰-Flex语法，试试div.wrap使用默认水平flex&flex换行&justify-content:space-around,div.block设置百分比宽度，轻松实现目标效果：[x]Chrome自适应效果音尝试[x]安装Node.js并打开http-server开启手机端口看取色，#FFA600[x]设计图：基本相同[x]Adaptive：宽度无滚动条，网格变化withtheform[x]移动端：Chrome响应测试和真机均通过[x]编码规范[x]UTF-8:的默认字符集为UTF-8[x]标签为小写&封闭[x]元素属性值用双引号括起来[x]css外部引用[x]css不使用id来控制样式[x]]使用div实现布局[x]B.作用的深入思考Doctype:Declareparserboxmodel理解：把东西放在盒子里比较元素在网页内容上的显示效果：items，存放在sponge(padding)包中，用box(border)包装；padding：类似于用来包裹贵重物品的海绵，最靠近物品（内容），在盒子（边框）内；边框：盒子。盒子的大小和厚度可以调整，盒子会随着内容及其填充而放大；margin：盒子与其他东西的距离，在最外层；display:inline：内联元素，文本元素一般为，两个内联元素连续写入，显示效果不换行；修改width&height无效，可以通过修改line-height改变高度，扩展内容的宽度；codewrapping被解析为空格，不支持样式：width&height,text-align,background-position,clearblock:块元素，div是它的代表。块元素将开始一个新行并尽可能地填充容器；可以通过修改width&height来修改width和height；不支持样式：vertical-aligninline-block：内联块元素，兼具块和内联特性，可以通过修改width&height来修改宽高，不占用单行；代码换行符被解析为空格none:show|hideelement不删除元素；使用浏览器的F12调试界面方法【调试】chrome谷歌浏览器-DevTool开发者工具-详细汇总元素：查看界面元素，可以查看元素对应的css样式、计算样式、事件监听器、属性。控制台：控制台。用于显示日志信息和输入一些命令。网络：请求监控。您可以获取请求列表，单击一个项目可以查看Headers、Preview、Response、Timing数据。标头：标头数据。ContainsGeneral,ResponseHeader,RequestHeadersGeneral：本次请求的URL，请求方法，状态码，请求服务器的地址，以及其他一些设置。ResponseHeaders：响应头。RequestHeaders：包含UserAgentUser-Agent，帮助服务器识别Device.Preview：Preview。如果是图片html，则直接显示界面。如果是数据，将以优化格式显示。如果是代码，则直接显示。Response：响应结果的原始数据。Cookies（有些有）：请求中使用的Cookies。Timing：请求时间Usage.Sources：看代码&断点。Performance：记录网页加载时的情况，帧数，CPU资源，据此可以提出性能优化点；Memory：昂贵的js分析functions应用程序：应用程序资源面板。存储LocalStroage、Session、Cookies等。Security：网页安全情况。九宫格布局的其他方法及其优缺点九宫格布局在CSS中，使用float和position有什么区别？float：优点：浏览器兼容性好缺点：不是真正的布局方式。相比tricks，问题多多（移动端）。目前使用的flex布局：优点：flex才是真正的布局方式。移动设备友好，微信小程序也使用flex进行布局缺点：浏览器兼容性（支持IE10+）块方形移动布局，div按比例布局，宽度为百分比，但是想要高宽一样，也就是让div一个正方形，如何布局？vw&vh:移动设备兼容性有问题目前使用padding-top:简单，兼容性好IDE含义&与文本编辑器的比较（后者由前者集成）IDE（IntegratedDevelopmentEnvironment）是集成开发环境，提供程序开发环境一般集成了代码编辑器、编译器、调试器和图形用户界面。拥有丰富的工具和流畅的开发体验。文本编辑器：仅用于编辑的应用程序。码型一般都有插件扩展功能。添加视口与或不响应式网页设计的区别-添加viewport:width=device-width的视口将始终帮助您根据屏幕宽度设置界面宽度。initial-scale=1.0会在浏览器第一次加载页面的时候，帮你设置页面的缩放比例。不放大：无论在什么设备上显示效果都是一样的，移动设备上的页面可能会缩小到看不清楚的程度。把项目放在/usr/share/nginx/html目录下5.效果Github：cssup在线展示：Task1-9blocksReadme.md下载：Readme6.系列文章【CSS实践】IT修真学院-习题1-九宫格【CSS练习】IT修真--练习2-开发工具【CSS练习】IT修真--练习3-简单界面【CSS练习】IT修真--练习4-移动界面【CSS练习】IT修真--练习5-护士工个人界面【CSS习题】IT神学院--习题6-护士工作人员列表界面
