CSS3 Test: 新border,padding,margin,offset

新边框现在还是草案阶段,还未有相关浏览器规范,目前仅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完成。

参考:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,018评论 1 92
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,678评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,780评论 0 26
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 2,043评论 0 2
  • UDID和UUID的区别 1.1【UDID】 UDID的全名为 Unique Device Identifier ...
    晓飞90阅读 1,401评论 0 0

友情链接更多精彩内容