【问题标题】:css margin-block-start, border-inline-end, xxx-(block|inline)-(start|end)css margin-block-start, border-inline-end, xxx-(block|inline)-(start|end)
【发布时间】:2021-07-04 02:05:16
【问题描述】:

widthheight 道具是否有 xxx-(block|inline)-(start|end)
类似于margin-(block|inline)-(start|end)padding-(block|inline)-(start|end)border-(block|inline)-(start|end)

我想创建一个可以水平、垂直、反向水平等定向的小部件。
我想设置custom width在水平方向时反映到css width,但在垂直方向时反映到css height

【问题讨论】:

  • 我认为没有。
  • 是否有伪类来检测书写方向?或任何其他技巧来做到这一点?
  • 我错了,看答案。

标签: html css padding inline margin


【解决方案1】:

【讨论】:

  • 背景位置怎么样?因为 left,right,top,bottom 对于方向感知元素将毫无意义。
  • @YunusKurniawan - 在CSS Backgrounds and Borders Module Level 4 草案中有一些属性,但它还处于早期阶段,尚未准备好实施。
【解决方案2】:

每个人。我发现了另一个有趣的 css 道具:

inset: 0left: 0; right: 0; top: 0; bottom: 0; 的简写。

它也有方向意识,所以如果我写inset-inline: 5px 相当于水平方向的left: 5px; right: 5px 或垂直方向的top: 5px; bottom: 5px;

希望这个技巧对你的 CSS 项目有用。

【讨论】:

    猜你喜欢
    • 2011-11-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-27
    • 1970-01-01
    • 2020-05-11
    • 2012-10-21
    相关资源
    最近更新 更多