zoukankan      html  css  js  c++  java
  • margin百分比的相对值--宽度!

    假设一个块级包含容器,宽1000px,高600px,块级子元素定义 margin:10% 5%; 那么 margin的 top, right, bottom, left 计算值最终是多少px?

    不是100px 30px 100px 30px,而是100px 50px 100px 50px!

    结论:

     margin 的百分比值参照其包含块的宽度进行计算。

    提示:

    在w3c的规范中也是这样描述的: margin 的百分比值参照其包含块的宽度进行计算,同样的padding如果设置成百分数的话,其盒子模型和margin是一样的。

    这只发生在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下,当书写模式变成纵向的时候,其参照将会变成包含块的高度。

    为什么要选择宽度做参照而不是高度呢?

    这其实更多的要从CSS设计意图上去想,因为CSS的基础需求是排版,而通常我们所见的横排文字,其水平宽度一定(仔细回想一下,如果没有显式的定义宽度 或者强制一行显示,都会遇到边界换行,而不是水平延展),垂直方向可以无限延展。但当书写模式为纵向时,其参照就变成了高度而不再是宽度了。

    可参考:

    http://www.ituring.com.cn/article/64581

    http://www.uedsc.com/discussion-margin-and-padding-values.html

  • 相关阅读:
    BlockingQueue(阻塞队列)详解
    异步远程调用线程池队列
    JVM中的五大内存区域划分详解及快速扫盲
    http链接管理器
    influxDB 增加
    ArcGIS的sde数据库连接
    arcgis server注册文件夹
    arcmap编辑oracle数据库
    create database connection
    发布gp服务失败
  • 原文地址:https://www.cnblogs.com/simonbaker/p/5130433.html
Copyright © 2011-2022 走看看