• containing block


    1(position:static和relative)

    它的包含块由它最近的块级、单元格(table cell)或者行内块(inline-block)祖先元素创建。

    2.position:fixed

    如果元素是固定定位元素,那么它的包含块是当前可视窗口

    3.position:absolute

    总的来说,绝对定位("position: absolute")元素的包含块由离它最近的 'position' 属性为 'absolute'、'relative' 或者 'fixed' 的祖先元素创建。

    1)

    如果其祖先元素是行内元素,则包含块取决于其祖先元素的 'direction' 特性

    一. 如果 'direction' 是 'ltr',包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ,右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges)  (记着:第一元素左上,最后元素右下)

    二。如果 'direction' 是 'rtl',包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ,左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding edges)(记着:第一元素右上,最后元素左下)

    如果祖先元素不是行内元素,那么包含块的区域应该是祖先元素的内边距边界

    iniital containing block就是   “初始viewport“

    The initial containing block cannot be positioned or floated

    background属性仅仅作用于content 和padding

    The background of the box generated by the root element covers the entire canvas.

    direction bidi  http://blog.ieph.net/archives/446  (太技术流了吧~~)

    height property

    1,height的百分比是相对于containingblock来计算的(这点不用怀疑).

    2,对于position不为absolute的元素,如果containingblock没有设置height属性,即height:auto那么这个百分比是相对于auto的,所以还是auto;

    3,如果这个元素是absolute的,那么这个元素的containingblock的高度等于元素的高度本身,所以这个absolute的元素的百分比可以根据containingblock来自适应

  • 相关阅读:
    nginx启动时指定配置文件
    idea修改忽视文件产生得bug
    SpringBoot整合RabbitMQ出现org.springframework.amqp.AmqpException: No method found for class
    解决git速度太慢的问题,亲测有效
    HttpRequestException encountered解决方法
    mybatis大于等于小于等于的写法
    Could not initialize class sun.awt.X11GraphicsEnvironment异常处理
    CF377C Captains Mode
    AT1251 たのしいたのしい家庭菜園
    CF1057C Tanya and Colored Candies
  • 原文地址:https://www.cnblogs.com/chengzhenping/p/3488107.html
Copyright © 2020-2023  润新知