发表于： 2016-03-11 09:31:40
3 1908
今天完成的事情：
1、老大说先不要用框架，于是用原来的方法做了task8，目前只剩翻转效果未完成
明天计划的事情：
1、完成task8；
2、开始task9；
遇到的问题：
1、Q：看到一篇关于浮动的文章
第一次听见有人说，绝对定位的元素脱离了文档流，浮动元素依旧在文档流中，理由是处于文档流中的文字实体不会与浮动元素重叠，而会与绝对定位元素重叠。虽然我之前也一直不明白，为什么浮动能实现文字环绕而不会重叠，但是我觉得这可以看成浮动的特有属性，不能因为这个就否定浮动是脱离文档流，因为W3C里面明确说明了，浮动会脱离文档流
http://www.w3school.com.cn/css/css_positioning_floating.asp
当然，可能有人认为这个不够权威，下面的评论也有人贴出了
CSS2.1的官方描述
”In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.”
—-http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme
A：在知乎上看到一篇介绍浮动与文档流关系的文章
https://www.zhihu.com/question/24529373/answer/29135021
里面有3D视图，看起来挺直观的，大家可以自己演示一下
我比较赞同这个作者的观点：
“脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。”
（这点还是无法解释，可能规则就是这样吧 ╮(╯▽╰)╭）
2、Q：box中avatar下面的一排字，要求实现两个宽度为50%带border的li并排显示，我两个都设置了box-sizing: border-box和display：inline-block，但是第二行还是会被挤下去
A：把两行的display：inline-block都改成float：left，display就成了默认的list-item，第二行就上去了
把第一行改成float：left，第二行还是display：inline-block，也可以，但是反过来就不行了 why ?
收获:
1、CSS图片翻转动画技术详解
http://www.webhek.com/css-flip/
应用得还不熟练，明天再看看
感想:
task8全都是用ul做的，一层套一层，眼睛都快花了，还好有注释和less
返回列表
评论