你真的了解CSS包含块么?
我所了解的CSS包含块
包含块有什么作用呢?下文接下来带你知晓
↓↓↓↓↓↓↓文章目录
- 我所了解的CSS包含块
- 指出错误观念
- 什么是包含块?
- 根元素包含块
- 其他元素的包含块
- 如何确定元素的包含块?
- 元素包含块的作用?
- 下面看些例子
- 示例一
- 示例二
- 示例三
- 示例四
- 示例五
- 后记
指出错误观念
许多开发者认为一个元素的包含块就是他的
父元素的内容区
,其实这是错误的(至少不完全正确)!
一个元素的尺寸和位置经常受其包含块的影响。大多数情况下,包含块就是这个元素最近的祖先块元素的内容区,但也不是总是这样。
下面我们看看盒模型:
当浏览器展示一个文档的时候,对于每一个元素,它都产生了一个盒子。每一个盒子都被划分为四个区域:
- 内容区
- 内边距区
- 边框区
- 外边距区
什么是包含块?
包含块有分为根元素包含块和其他元素的包含块。
根元素包含块
- 根元素html的包含块是一个矩形,叫做初始化包含块(initial containing block)。
可以看到html外面还有空间,这个包含html的块就被称为初始包含块(initial containing block)
,它是作为元素绝对定位和固定定位的参照物
。 - 对于
连续媒体设备
(continuous media),初始包含块的大小等于视口viewpor的大小
,基点在画布的原点(视口左上角);对于分页媒体(paged media),初始包含块是页面区域(page area)
。初始包含块的direction属性与根元素的相同。
其他元素的包含块
大多数情况下,包含块就是这个元素最近的祖先块元素的内容区
,但也不是总是这样,下面就来学习如何确定这些元素的包含块。
如何确定元素的包含块?
确定包含块的过程完全依赖于这个包含块的 position 属性,大致分为下列场景:
- 如果 position 属性是
static 或 relative
的话,包含块就是由它的最近的祖先块元素(比如说inline-block, block 或 list-item元素)
或格式化上下文BFC(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘
组成的。- 如果
position 属性是 absolute
的话,包含块就是由它的最近的 position 的值不是 static (fixed, absolute, relative, or sticky)的祖先元素的内边距区的边缘组成的
。- 如果 position 属性是 fixed 的话,包含块就是由 viewport (in the case of continuous media) or the page area (in the case of paged media) 组成的。
- 如果
position 属性是 absolute 或 fixed
,包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的:
- A transform or perspective value other than none
- A will-change value of transform or perspective
- A filter value other than none or a will-change value of filter (only works on Firefox).
元素包含块的作用?
元素的尺寸和位置经常受其包含块的影响。对于一个绝对定位的元素来说(他的
position 属性被设定为 absolute 或 fixed
),如果它的 width, height, padding, margin, 和 offset 这些属性的值是一个比例值(如百分比等)
的话,那这些值的计算值就是由它的包含块
计算而来的。
简单来说,如果某些属性被赋予一个百分值的话,它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性:
height, top, bottom
这些属性由包含块的 height 属性的值来计算它的百分值。如果包含块的 height 值依赖于它的内容,且包含块的 position 属性的值被赋予 relative 或 static的话,这些值的计算值为0。width, left, right, padding, margin, text-indent(
2018-05-27修改)这些属性由包含块的 width 属性的值来计算它的百分值。
下面看些例子
HTML代码
<body><section><p>This is a paragraph!</p></section>
</body>
示例一
body {background: beige;
}
section {display: block;width: 400px;height: 160px;background: lightgray;
}
p {width: 50%; /* == 400px * .5 = 200px */height: 25%; /* == 160px * .25 = 40px */margin: 5%; /* == 400px * .05 = 20px */padding: 5%; /* == 400px * .05 = 20px */background: cyan;
}
在这里,这个P标签position为默认的static,所以它的包含块为Section标签,通过我们的判断规则一来确定。
示例二
body {background: beige;
}
section {display: inline;background: lightgray;
}
p {width: 50%; /* == half the body's width */height: 200px; /* Note: a percentage would be 0 */background: cyan;
}
在这里,这个P标签position为默认的static且它的父标签Section的display为inline,所以P标签的包含块为body标签,通过我们的判断规则一来确定。
示例三
body {background: beige;
}
section {transform: rotate(0deg);width: 400px;height: 160px;background: lightgray;
}
p {position: absolute;left: 80px;top: 30px;width: 50%; /* == 200px */height: 25%; /* == 40px */margin: 5%; /* == 20px */padding: 5%; /* == 20px */background: cyan;
}
在这里,这个P标签position为absolute且它的父标签Section的transform不为none,所以P标签的包含块为Section标签,通过我们的判断规则四来确定。
示例四
body {background: beige;
}
section {position: absolute;left: 30px;top: 30px;width: 400px;height: 160px;padding: 30px 20px;background: lightgray;
}
p {position: absolute;width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */height: 25%; /* == (160px + 30px + 30px) * .25 = 55px */margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */background: cyan;
}
在这里,这个P标签position为absolute且它的父标签Section的position不为static,所以P标签的包含块为Section标签的padding边缘算起(前提是不能 box-sizing设置为border-box),通过我们的判断规则二来确定。
示例五
body {background: beige;
}
section {width: 300px;height: 300px;margin: 30px;padding: 15px;background: lightgray;
}
p {position: fixed;width: 50%; /* == (50vw - (width of vertical scrollbar)) */height: 50%; /* == (50vh - (height of horizontal scrollbar)) */margin: 5%; /* == (5vw - (width of vertical scrollbar)) */padding: 5%; /* == (5vw - (width of vertical scrollbar)) */background: cyan;
}
在这里,这个P标签position为fixed,所以P标签的包含块为初始包含块(viewport),通过我们的判断规则三来确定。
后记
你真的了解CSS包含块么?相关推荐
- html怎么做包含块,字节前端都知道的CSS包含块规则
你是否曾对CSS中的百分比单位非常疑惑?是否简单认为百分比的基准值就是所在元素的宽高?本文将从包含块角度帮助大家理解记忆百分比单位的计算规则,便于巧妙运用包含块规则解决实际开发中的布局问题! 一.确立 ...
- CSS绝对定位absolute元素的初始包含块不是body元素,也不是html元素
position为absolute的元素会相对于距离最近的position为relative/fixed/absolute的上级元素进行定位,如果上级元素都没有position属性,那么则相对于初始包 ...
- 一文读懂css【css3】绝对(absolute)定位和相对(relative)定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
目录 何为定位 偏移量 垂直方向 top bottom 水平方向 left right relative-相对定位 何为相对定位 相对定位的特点 实例 元素代码的起始位置 元素若不开启相对定位,即便设 ...
- Web学习笔记13:CSS代码块1
目录 sorry 回归正题~ 怎么写 一些常见的属性名 1.font-size:设置字体大小 2.font-weight:设置字体粗细 3.font-style:斜体 4.font-family:设置 ...
- CSS中块级格式化上下文(BFC)的特性与应用
一.何为BFC 块级格式化上下文(Block Formatting Context)是网页CSS视觉渲染的一部分,并用于决定盒子的布局.在定位体系中属于常规流(Normal Flow)(另外两种定位体 ...
- 下面html标签元素中不属于块元素的是,HTML中为何P标签内不可包含块元素?
起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...
- HTML P不能包含块级元素(包括自身)
abcc项目中碰到的,在一个表单中用P包含一个label和div,从Firebug中看html结构div却跑到P外面去了.甚是诧异,原来P元素是不能包含块级元素(包括P自身)的. The P elem ...
- css分块代码,30 Seconds of CSS代码块解读(视觉篇)
30 Seconds of CSS代码块解读(视觉篇) 这是第二篇视觉篇,主要包括用纯CSS画圆和三角形.利用伪元素和背景实现各种美妙的装饰.利用渐变生成一系列赏心悦目的效果.通过美化视觉让页面上的元 ...
- p标签内不能包含块级元素
发现一个不常用的冷知识 学html的时候,以为块级元素可以包含任意的块级元素 事实并非如此,p标签是不可以包含任何跨级元素的 有些块元素不可以包含另一些块元素 ,DTD中规定了块级元素是不能放在P里 ...
最新文章
- java遍历数据库的东西_java遍历读取整个redis数据库实例
- 鲜为人知的6个黑科技网站_6种鲜为人知的熊猫绘图工具
- 【英语学习】【English L06】U08 News L2 Have you read the news about the light show?
- 序列(【CCF】NOI Online能力测试 提高组第一题)
- 移除元素所有事件监听_前端日记—DOM 事件机制和事件委托
- 美图 android sdk,ADT中使用Android SDK Manager安装X86的System Image | 在路上
- 关系分类 relation classification
- Socket网络编程--聊天程序(9)
- rebar3 的使用
- android图片尺寸大小设置
- c语言中元音字母对应的的值,c语言输入一个字符串,统计这个字符串的元音字母...
- 李春葆《数据结构》第五版
- 小书匠配置github图床服务(详细版)
- NB-IoT对接电信物联网开放平台
- gradle7打包libs目录中的jar生成fat jar
- python计算均值方差模型_如何从Python中的FIGARCH模型中得到条件均值和标准差?...
- IT监控:Grafana vs Datadog详细比较
- 老男孩python培训课件
- 美业小程序要如何复盘
- 紫光展锐全面出击,力争在5G时代成为全球领军芯片企业
热门文章
- gl studio 5.1 仪表仿真软件 介绍及安装
- 电能管理系统在惠氏公司的应用
- python opencv 条形码及二维码检测识别
- 安卓开发之自定义控件TipView仿QQ长按后的提示窗口
- WebView 使用系统服务下载 实现文件下载功能
- LeetCode第 546 题:移除盒子(C++) (弃)
- FIR数字信号滤波器
- 如何设置卫星系统和频点
- 处理/root/jdk8/jdk1.8.0_241/bin/java: /lib/ld-linux.so.2: bad ELF interpreter: No such file or di错误
- 行人轨迹预测方法综述