第一种 Flex盒模式 属性
CSS样式表
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Flex布局属性</title><style>/*公共样式*/* {margin: 0;padding: 0;font-size: 14px;/*添加一个轮廓线*/outline: 1px dashed red;}.container{border: 1px dashed;/*盒子加了padding，border;必须设置box-sizing，防止盒子变大*/box-sizing: border-box;background-color: #55a532;}.item{width: 200px;height: 50px;border: 1px dashed;background-color: #795da3;}.container {/*转为flex弹性盒子*/display: flex;/*1、flex-direaction 容器主轴方向*//*flex-direction: column;*/flex-direction: row; //默认/*2、flex-wrap 是否可多行显示*//*flex-wrap: wrap;*/flex-wrap: nowrap; //默认/*3. flex-flow: 主轴和换行的简写*//*flex-flow: row nowrap;*//*4、设置容器中的项目在主轴上的对齐方式*//*justify-content: flex-start;*//*justify-content: flex-end;*//*justify-content: center;*//*可以分配主轴上剩余空间*//*二端对齐*/justify-content: space-between;/*分散对齐*//*justify-content: space-around;*//*平均对齐*//*justify-content: space-evenly;*//*5. 项目在交叉轴上的排列方式*/height: 200px;/*align-items: flex-start;*/align-items: flex-end;/*align-items: center;*//*6. align-content: 设置项目在多行容器交叉轴上的对齐方式*/align-content: space-between;/*align-content: space-around;*//*align-content: space-evenly;*/}</style></head><body><div class="container"><span class="item">A</span><span class="item">B</span><span class="item">C</span><span class="item">D</span><span class="item">E</span><span class="item">F</span><span class="item">G</span><span class="item">H</span><span class="item">I</span></div></body></html>
12.20作业布局的一点心得体会
css说实话从来没有认真的深入了解过，每次涉及到页面的样式调整，遇到什么问题就百度一堆页面，也没有总结没有思考。比如说左右浮动，就用float，加颜色就是用color，文本框实现圆角显示也是百度。总之没有做到精细化处理，页面效果也只是大致看看，兼容性更不要提。
12月20的作业看似非常简单，就是页头的布局和样式调整，但是却用到浮动+元素的定位。没有认真思考过CSS，一时半会也是难以实现效果。
为难过才思考，思考过才有疑问，昨晚Peter Zhu老师的从无到有的页面实现，看似行云流水，确实历年来的经验积累，冰冻三日非一日之寒。从页面的元素构建、CSS样式实现到PHPStorm的工具软件快捷键的灵活运用，足见其平常的知识积累非常全面。
学习看的不是结果，重点是结果之前的努力过程，外行看笑话，内行看门道，愿以后的学习也能将页面元素作为音符，phpstorm作为钢琴，css作业音谱，弹奏出悦耳的琴声。