想到哪记到哪:CSS和inline-block的bug

1、诸如span的inline元素在给一个flex的时候会默认变成block元素。
2、如果不设置flex-wrap:wrap的话,宽度再大的子元素,即使flex-basis:100%;也会挤在一行内。
3、以上的疑问总结自 四项目的第二个例子
4、flex一开始默认的主轴是水平方向,侧轴是垂直方向,但是如果使用flex-direction:column;以后主轴方向就变成了垂直方向,侧轴就变成了水平方向,这一点要记住。
5、flex的align-content针对的多条主轴进行的操作。
6、关于flex-shrink,它的默认值是1,即当子元素总宽度超过父元素宽度的时候,不设置换行的话都会挤在一行内,并且平分宽度,如果想要让子元素宽度不收缩,设置flex-shrink:0;这样会溢出,但是子元素保持了原来的宽度。想一想轮播当中view的做法。
7、inline-block会出现一些想不明白的bug,将一个span元素设置为inline-block以后撑开父元素,但即便是样式重置了以后尽然会多出5px的高度,不知道原因。
8、href、url和src的区别:href和url只是建立一种连接,它们和链接的元素保持着一种线一样的关系,这种链接是持续的,即使是将对方解析完成以后依然如此,所以如果这一连接中断以后或者是因为元素复制以后,会出现短暂的重新连接过程,复制的新元素会有短暂的无内容时间;但是src不一样,一旦src后面的资源加载和解析完毕,它个内容就相当于下载到了dom上,所以即使复制移动这个元素,也不需要再重新链接,所以也不会产生短暂的无内容。想想环形轮播的图片克隆问题。
9、通过flex-basis设置主轴上方向,通过order设置排列位置,看阮一峰关于圣杯布局的代码。
10、如果要在一屏上固定底栏的话,只需要将footer和header高度固定,整个页面flex-direction:column;然后将主体的content内容设置flex:1;即可。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,805评论 1 91
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,764评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 3,149评论 0 26
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 2,570评论 0 59
  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 4,138评论 0 9
  • 赏花宴(上) “风伯伯这话就不对了。”苏欣梦插话道,“苏心曦能不能继承圣女之位,得看老天爷给不给她灵力,”她...
    凝千寒阅读 81评论 0 1
  • 我每天七点起床,带领成长营的小伙伴们读书一小时。 八点至九点洗漱做早餐。 九点至十二点去咖啡馆写作。 中午准时午休...
    MRAbby阅读 228评论 8 2
  • 上学常听说千金一诺,又称一诺千金,一直呼吁诚信为本的马云,阿里巴巴谋划多年的网商银行上个月25号终于开业了。这是国...
    仝木头阅读 93评论 0 2