美文网首页CSS3 Test
CSS3 Test: 新border,padding,margi

CSS3 Test: 新border,padding,margi

作者: 恬雅过客 | 来源:发表于2017-08-05 12:20 被阅读272次

新边框现在还是草案阶段,还未有相关浏览器规范,目前仅firefox 41以上的版本才支持。

border-inline-start,border-inline-end,border-block-start,border-block-end

兼容性不说了,目前仅firefox 41以上的版本才支持。新边框跟已有的border一样,具备width,style,color三个参数。不一样的是,它取决于写入模式,方向和文本方向定义的值。看名字也能想到,inline文本行,block文本块。每行文字有顺序,上下左右。文本块亦如此。意思就是,border-inline-XX(start/end)是沿着文本行的方向,border-block-XX(start/end)是沿着文本块的方向。常规默认:文本行:left -> right;文本块:top -> bottom。如下图:


border-inline.png

示例代码,点此查看,效果图如下:

效果图.png

padding-inline-start,padding-inline-end,padding-block-start,padding-block-end

它也是取决于写入模式,方向和文本方向定义的值。
只是相关效果都能用已有的padding完成。

magin-inline-start,margin-inline-end,margin-block-start,margin-block-end

它也是取决于写入模式,方向和文本方向定义的值。
只是相关效果都能用已有的margin完成。

offset-inline-start,offset-inline-end,offset-block-start,offset-block-end

它也是取决于写入模式,方向和文本方向定义的值。
只是相关效果都能用已有的位移left,right,top,bottom完成。

参考:

相关文章

  • CSS3 Test: 新border,padding,margi

    新边框现在还是草案阶段,还未有相关浏览器规范,目前仅firefox 41以上的版本才支持。 border-inli...

  • 用JS制作一个点击向下滚动,点击返回顶部(用Tween函数)

    *{margin: 0;padding: 0;}.test{border...

  • 盒子模型

    一个盒子我们会分成几个部分:内边区(content)内边距(padding)边框(border)外边距(margi...

  • 盒子模型概念及代码

    一个盒子我们会分成几个部分:内容区(content)内边距(padding)边框(border)外边距(margi...

  • 盒子模型

    一个盒子我们会分成几个部分:内边区(content)内边距(padding)边框(border)外边距(margi...

  • CSS calc计算属性

    calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border、margi...

  • 无标题文章