CSS包含块(the containing block)和与之相关的百分比属性
来源:互联网 发布:淘宝 prd mrd 模板 编辑:程序博客网 时间:2024/05/21 22:42
一个元素的大小和位置的设置与它的包含块有关。CSS包含块是个很重要的概念,通常人们认为一个元素的包含块就是它的父元素的内容区域,这是不对的。
一个元素的包含块取决于该元素的position属性的值。
- position:static/relative 元素的包含块为离它最近的块状祖先元素的content-box的大小。 - position:absolute 元素的包含块为离它最近的设置定位属性为非static的祖先元素的padding-box的大小。 - position:fixed 元素的包含块为视口的大小。 - position:absolute/fixed 元素的包含块也可能是由满足下列条件之一的最近的祖先元素的padding-box的大小。(设置了transform属性并且该属性不为none或者是设置了filter)
另外,根元素所处的包含块被称为初始包含块。(the initial containing block. )
- content-box:width/height=内容区域的宽/高
- padding-box:width/height=内容区域的宽/高+padding
- border-box:width/height=内容区域的宽/高+padding+border
当以百分比的形式设置width,height,padding,margin这类与盒子模型有关的属性或top,right,bottom,left这类与定位有关的属性时,它们的实际大小与它们的包含块有关。
- top,bottom,height是基于包含块的height计算的,若包含块的height是由内容撑开的,那么这些值最终就会变为0。
- left,right,margin,padding,width是基于包含块的width计算的。(其中也包括padding-top,padding-bottom,margin-top,margin-bottom)。
参考链接:
https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block
阅读全文
0 0
- CSS包含块(the containing block)和与之相关的百分比属性
- CSS核心:包含块(Containing Block)
- 什么是CSS包含块(Containing Block)
- CSS包含块(Containing Block)
- CSS概念之包含块(containing block)
- 浅谈CSS包含块Containing Block
- css笔记:包含块(Containing Block)
- 关于包含块(containing block)的理解
- 包含块(containing block)学习
- css 包含块(Containing Box)
- Definition of "containing block" 细说包含块
- 【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之一:包含块(containing block)
- CSS中的containing block
- containing block和BFC
- css块元素的 display 属性 inline-block 的应用
- 浅谈js里的attributes和与之相关的一些属性
- Containing Block
- CSS 属性之中经常出现的百分比
- datebox默认显示为上个月最后一天
- C语言第一课
- 【项目实战】多线程环境下正确创建单例
- Samba
- 基于Springmvc的web应用的跨域实现
- CSS包含块(the containing block)和与之相关的百分比属性
- mybatis调用oracle自定义函数
- KMP中的一些技巧(°ο°)~ @
- [My SQL] 创建表和操纵表
- 【Android 多媒体开发】 MediaPlayer 状态机 接口 方法 解析
- 一步一步教你centos7.3安装redis
- PHP对接微信公众号,并实现返回给用户文字或图片或图文的内容。
- GET和POST区别
- Zookeeper报错 len4807928 is out of range!