stylesheet

css 3D 空间

涉及属性perspectiveperspective-origintransform-styletransform ( rotateX, rotateY, translateZ )transform-origin必要条件要实现 3D 效果必须要先理解 3D 空间是怎么形成的,以及实现 3D 效果的必要条件是什么。Z 轴区别与 2D 场景,3D 场景与 2D 场景最大的区别是有了 Z 轴,那么 Z 轴在 css 中该如何产生呢?这就涉及到上面列出的第一个属性: perspective(景深) MDN。首先我们必须要知道 Z

  • aco Yang
    aco Yang
10 min read
stylesheet

INLINE-BLOCK

常用的默认 display 值为 inline-block 的元素有 img 。应该没有别的常用的了。inline-block 特点:被设定的对象的内容以 block 方式显示,但呈现形式以 inline 方式。换句话说,除了显示上在同一行,元素被当成 inline 来处理外, block 有的它全有。inline-block 的一些特点以及一些特殊的点:拥有完整的盒模型,但不会默认占一整行当一个空元素设置成 inline-block 或是 img 元素时,默认的 baseline 为元素盒模型的最底部(

  • aco Yang
    aco Yang
3 min read
stylesheet

CSS INLINE 的一些特点以及需要注意的点

支持样式:这里仅仅讨论不会改变元素类型的属性content : 内容的高度 font : 支持 line-height : 多行有效,但是上下会缺,用js获取元素高度会比显示少一点,也就是第一行文字的上面和最后一行文字的下边不计算在元素大小内,但显示上算进去了。 margin/padding : 显示上仅在左右有效,上下设置多少都没用,但用js获取或是设置背景时会包括 padding background : 会包括padding(这点应该是正常现象),但显示上由于 padding 的特殊性显示上感觉异常 border : 和background同理在padding外显示 (min-/max-)height/(min-/max-)width : 无效 overflow

  • aco Yang
    aco Yang
2 min read