发表于： 2018-07-20 23:52:42
1 704
今天完成的事情：
1.flex的各种属性,有几个不常用的就只是混了个眼熟，还是得实际使用才能完全记得住。
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素盒子类型。 |
| flex-direction | 指定了弹性容器中子元素的排列方式 |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| order | 设置弹性盒子的子元素排列顺序。 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
| flex | 设置弹性盒子的子元素如何分配空间。 |
2.发现了个很有意思的标签：@media修真院的主页应该也用了这个标签
用法为@media all and (min-width:500px){ }
意思是：在所有设备上时，当页面宽度大于500px时，则显示以下css样式；
3.看flex的时候看到个“圣杯布局，”所以就去了解了一下，但还没看完：
圣杯布局： 1.三列布局，中间宽度自适应，两边定宽
2.中间栏要在浏览器中优先展示渲染（第一个div为中部栏【middle】）
3.允许任意列的高度最高
4.任务5用flex+div写了个大致的框架，不知道明天加内容的时候会不会出问题。
5.margin取值为负值的时候可以减小div的普通流判定框（但视觉判定框不变）
【https://www.jianshu.com/p/549aaa5fabaa】
明天计划的事情：
1.任务5
2.margin取值为负的具体原理
3.了解双飞翼布局
遇到的问题：margin取值为负值这一部分有点晕，只知道配合float使用的话可以达到fixed的效果，但是设什么值会具体产生怎样的效果，为什么会产生这样的效果这一点还没搞清楚。
收获：没啥大的收获，更清楚的了解了flex的使用方法，了解了圣杯布局，突然发现任务四的header就是个圣杯布局
返回列表
评论