发表于： 2019-05-30 22:13:11
1 832
今天完成了什麽：
完成任务7第三页面，优化页面。
今天遇到什么问题：
做页面三的时候遇到这文字不知道怎么像上面一样文字都对整齐，跟左边边框的距离都一样。后面发现使用margin: 0 4rem;可以实现效果。
第一张图首页三角形按钮用了固定定位脱离了文档流。滚动不会随着滚动，后面改了下布局结构使用绝对定位处理好了。
提交任务后发现在不同电脑的浏览器显示这样子，应该是我没给图片设置不重复平铺。
文字被挤下去，可能是宽度设置有问题，还需要调下。
三个小盒子不会随着分辨率变大而变化，这问题应该跟任务一一样的，但是我今天花了一个晚上的时间去弄还是没搞明白，我用弹性盒子去但是发现高无法设置，很是奇怪，高宽百分比相等都不行吗、一个晚上的时间都花在这里了，原本是晚上可以搞定任务的。明天再看看吧。任务7又要花5天了，哎。自己另外新建文件来写九宫格又一下子断片了单位总是搞不清楚为什么。好像是最近写过的代码一下子就忘记了。自己开始写能写对，然后重新删了再写回去要花很长的时间才能写好，对于水平居中垂直居中常常会断片卡壳，- -代码明明是自己敲出来的，自己也写了注释。看样子要多会去看看以前写的代码才行；
今天收获了什么：
今天主要都在写页面，对常用的属性还是居中这些经常搞混，
课堂接触到了BFC的知识：
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与（在下面有解释）， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。
FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。
常见的FC有BFC、IFC（行级格式化上下文），还有GFC（网格布局格式化上下文）和FFC（自适应格式化上下文），这里就不再展开了。
通俗一点的方式解释:
BFC 可以简单的理解为某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。
BFC布局规则：
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算
BFC有哪些作用：
- 自适应两栏布局
2可以阻止元素被浮动元素覆盖
3可以包含浮动元素——清除内部浮动
4.分属于不同的BFC时可以阻止margin重叠
明天计划：赶紧完成任务7！
返回列表
评论