想到哪记到哪: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;即可。

你可能感兴趣的:(想到哪记到哪:CSS和inline-block的bug)