全国热线

025-86901720

全国监督投诉热线:9:00-23:00

关于CSS中包含块原理的简单介绍

CSS中定义了定位显示的元素都具备包含块的性质,包含快中的元素都会以该包含块作为参考来定位和调整,今天学码思Web​老师关于CSS中包含块给大家做一个大致介绍。

  通俗来讲,包含块就是定位坐标参考系或定位参考框,CSS中定义了定位显示的元素都具备包含块的性质,包含快中的元素都会以该包含块作为参考来定位和调整,今天学码思Web老师关于CSS中包含块给大家做一个大致介绍。


  包含块的原理


  一个元素盒子的位置和大小有时是通过相对于一个特定的长方形来计算的,这个长方形就被称之为元素的 containing block。一个元素的 containing block 按以下方式定义:

  1、用户代理选择根元素作为包含块(称之为初始 containing block)。

  2、对于其它元素,除非元素使用的是绝对位置,包含块由最近的块级祖先元素盒子的内容边界组成。

  3、如果元素有属性 'position:fixed',包含块由视口建立。

  4、如果元素有属性 'position:absolute',containing block 由最近的 position 不是 

  static 的祖先建立,按下面的步骤:

  a、如果祖先是块级元素,由祖先的 padding edge 形成。

  b、如果祖先是内联元素,取决于祖先的 direction 属性。


  如果 direction 是 ltr(左到右),祖先产生的第一个盒子的上、左内容边界是包含块的上方和左方,祖先的最后一个盒子的下、右内容边界是包含块的下方和右方。


  如果 direction 是 rtl(右到左),祖先产生的第一个盒子的上、右内容边界是包含块的上方和右方,祖先的最后一个盒子的下、左内容边界是包含块的下方和左方。


  关于CSS中包含块的简单介绍就到这里,包含块是视觉格式化模型的一个重要概念,它与框模型类似,也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

  


上一篇:改善网站页面打开速度的十个要点
下一篇:分享5个H5开发常用框架

相关推荐

免费试听 | 学费咨询 | 在线报名 | 申请补贴 | 软件培训 | 网站地图

2016-2020 南京学码思教育科技有限公司 .All Rights Reserved

苏ICP备16033487号 www.njxms.com.cn

全国热线

400-080-3312

全国监督服务热线:9:00-23:00