CSS趣味见闻2

日期:2015-9-18 11:26 | 标签: | 阅读:589

这里记录我平常使用CSS时遇到的好玩的东东,当然,如果您见得多了话,也就见怪不怪了。

table-cell

其可以用来实现垂直居中(常用,特别是不定高元素),还有就是天生具有登高布局的优势。

margin

也许你想说这么一个简单的属性有啥趣味,:)~我找到的趣味是margin值为百分数时,其会相对于宽度值进行计算,不仅仅是左右外边距,上下外边距也一样。上下外边距为啥也会根据宽度进行计算呢? 答案解析

如果一个元素的上下外边距是父元素height的百分数,会导致死循环,以为父元素的height会增加,以适应后代元素上下外边距的增加,而相应的外边距又会增加以适应父元素高度的增加...(如此反复,冤冤相报何时了)

position:fixed

  1. 当父元素启用了3d转换时,子元素使用position:fixed只是相对父元素进行定位 http://www.cnblogs.com/yunfour/p/3928724.html
  2. 性能优化有说到,设置该属性后,会脱离文档流,从而可以很大程度上避免重排,但是打开Google的paint flashing会发现,每次滚动都会触发重排(出现一种跳跃效果),当然,设置为transform: translate3d(0, 0, 0)后不触发重排,但是至于重排的原因始终不得其解。参考segmentfault上的一个解释

    正常情况下,页面滚动,每个元素之间没有相对的位移, 所以浏览器只要把视图平移一下就可以了, 这样 fixed的元素也会往上平移,然后浏览器发现这是一个fixed元素不应该网上平移, 就再放回去,于是就有抖动了。 也就是MX3 android的问题可能来自于浏览器的过度优化代码, 添加一些东西不让浏览器做这些优化就可以了

图片延迟加载

可以采用的方法有:

  1. 背景图
    使用css设置background: none!important,需要时,再移除样式就行。
  2. img 标签
    将图片地址不写在 src 里就可以了,可写在 data-src 里,在合适的时机使用js赋给src就ok了。

方法参考自sneezry:
提高页面加载体验——延时加载你的图片
实现可以参考小胡子哥的代码片:
http://snippets.barretlee.com/#!/snippets/javascript

css3的all属性

http://web.jobbole.com/85441/ by 张鑫旭
通篇看完我就记住了结尾一个应用场景,div里放input,input可强制继承div的属性。

.inherit > * {
    all: inherit;
}

css两端对齐

  1. 使用flex布局,缺点是每行都是独立的。
  2. display: inline-block 结合 text-align: justify ,缺点是结束 div 与最后一个列表之间不要有间隙,要么结束 div 与最后一个列表之间还有一个空行。
    参考:CSS中的两端对齐

vertical-align不起作用

只有一个元素属于 inline 或是 inline-block(table-cell也可以理解为inline-block水平)水平,其身上的 vertical-align 属性才会起作用。vertical-align 的本质上是个独立的个体,与后面的line水平的元素是不存在直接的关系的。
注意和 line-height 结合使用时的场景,vertical-align 指定为具体的数字或百分比是其实就是参考 line-height 的高度。此外,

作用块级元素的css属性

text-indent

height:100%

宽/高度计算方式
计算有效宽度会自动将页面内容平铺填满整个横向宽度,但不会计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)或设置一个绝对高度,所以当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度
专业解答
一般使用设置CSS height:100%来实现。但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的效果。其实问题在于该元素的父级元素,当父级元素没有设置高度时,子元素的该属性并不会出现效果。所以,当要设置height:100%这个属性时,该元素的所有嵌套的父元素都必须设置高度,或者height:100%属性。

注意事项

  1. Margins 和 padding 会让你的页面出现滚动条。
  2. 如果你的元素实际高度大于你设定的百分比高度,那元素的高度会自动扩展。

与position属性的关系
在满足专业解答的情况下以及注意事项的情况下,元素本身的position设置会影响相对父级是谁(准确的讲叫做祖先)。注意:跟父(祖先元素)的定位时没有啥关系的!

webview不支持flex

android 4.4以上版本支持display:flex,低版本不支持。可以混合使用display:box和display:flex来实现支持。 参考链接: https://segmentfault.com/a/1190000003978624

grid-layout

大漠整理
https://github.com/airen/grid-layout

float&inline-block

float: 每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,“锯齿相错”,例如一个左浮动列表布局,如果第一行有个列表高度高于其他列表,那就在第二行,第一个元素会沿着最高元素的右侧对齐;此外还会发生高度塌陷,需要一些手段才能解决。
inline-block:空格处理麻烦

Shadow DOM

使用 ::shadow 选择器的一个只能穿透一层影子边界。如果你在一个影子树中嵌套了多个影子树,那么使用 /deep/ 组合符更为简便。

浮动

  1. 浮动元素周围的外边距不会合并
  2. 浮动元素不能比之前所有浮动元素或块级元素的顶端更高
  3. 浮动元素会延伸,从而使其包含所有后代元素
  4. 行框与浮动元素重叠时,位于浮动元素之上,块框则会位于其下。

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式