• CSS 宽高的计算


    height和margin的计算

    计算 'top', 'margin-top', 'height', 'margin-bottom', and 'bottom' 的时候。需要对不同类型的盒子进行区分。

    1.inline, non-replaced elements
    2.inline, replaced elements
    3.block-level, non-replaced elements in normal flow
    4.block-level, replaced elements in normal flow
    5.floating, non-replaced elements
    6.floating, replaced elements
    7.absolutely positioned, non-replaced elements
    8.absolutely positioned, replaced elements
    9.'inline-block', non-replaced elements in normal flow
    10.'inline-block', replaced elements in normal flow
    

    行内,非替换元素

    'height'属性不起作用。内容区域的高应该基于字体。
    行内非替换元素的竖直的padding,border,margin在内容区域的上面和下面开始,和‘line-height’没有影响。只有‘line-height’用来计算行框的高。

    行内可替换元素,自然流中的可替换块级元素,自然流中的可替换行内块和浮动可替换元素

    如果,'margin-top','margin-bottom'值是'auto',使用值是0

    如果'height','width'都是'auto'并且元素有固有的高度。那么固有的高度就是使用的高度。

    否则:如果高是auto,元素有固有的比率。那么使用的高是:

    (used width)/( intrinsic ratio)
    

    否则:元素的高设置为最大的符合比例2:1,高小于150,width小于设备宽。

  • 相关阅读:
    提高软件开发内功的推荐阅读列表
    oracle如何使用dblink链接另一个数据库
    代码不可读
    oracle如何使用dblink链接另一个数据库
    程序猿的吐槽三——改进还是不改进
    程序猿的吐槽一
    软件模式
    用户分类
    Matplotlib简介和pyplot的简单使用——subplot
    Linux下Eclipse的PyDev和CDT的安装和配置
  • 原文地址:https://www.cnblogs.com/diaoxiong/p/5685701.html
Copyright © 2020-2023  润新知