CSS 中的一些重要概念
在CSS的最后一个博客中,将学习整理一些CSS中的重要概念,对这些重要概念的掌握,将对CSS的认识十分重要。
了解这些概念对深入理解CSS的本质十分重要:(1)包含块containing block (2)BFC和IFC (3)层叠上下文
如果要真正地掌握CSS,一定要对此认真研读、一定认真研读、一点认真研读(重要的事情说三遍)。
1:包含块
我们都知道,如果有两个div,一个是父元素,另外一个是子元素,父元素会决定子元素的大小和定位。包含块是什么呢?简单来说,就是可以决定一个元素大小和定位的元素。包含块是视觉格式化模型中的一个重要概念,它与CSS盒子模型类似。包含块也可以理解为一个矩形盒子、这个矩形的作用是为这个矩形内部的后代元素(子元素、孙元素等)提供一个参考。一个元素的大小和定位往往是由该元素所在的包含块决定的。
通常情况下,一个元素的包含块由离它最近的“块级祖先元素”的“内容边界”决定的。但当元素被设置为绝对定位时,此时该元素的包含块是由离它最近的“position:relative”或"position:absolute"的祖先元素决定。一个元素生成的盒子会扮演该元素的内部元素包含块的角色。也就是说,一个元素的CSS盒子为它的内部元素建造了包含块。
****包含块的判定以及包含块的范围
一个元素会为它的内部元素创建包含块,内部元素的大小以及定位都跟它的包含块有关。那么是不是说一个元素的包含块就是它的父元素呢?答案是否定的。
(1)根元素
根元素(HTML)元素,是一个页面中最顶端的元素,它没有父元素。根元素存在的包含块,被称为“初始包含块”。
(2)固定定位元素
如果元素的position属性为fixed,那么它的包含块是当前可视窗口,也就是当前浏览器窗口。
(3)静态定位元素和相对定位元素
如果元素的position属性为static或relative,那么它的包含块是它最近的块级祖先元素创建的。祖先元素必须是block、inline_block或者table-cell类型。
(4)绝对定位元素
如果元素的position属性为absolute,那么它的包含块是由最近的position属性不为static的祖先元素。这里的祖先元素可以是块元素,也可以是行内元素。因此,我们可知,绝对定位元素是根据其包含块来定位的,这个包含块是离它最近的position属性不为static的祖先元素。如果绝对定位元素找不到position属性不为static的祖先元素,则它的包含块是根元素(html元素)。
对于包含块的范围,也分为两种情况考虑。
(1)如果祖先元素是块元素,则包含块的范围为祖先元素的padding edge形成。
(2)如果祖先是行内元素,则包含块取决于祖先元素的direction属性。
2:层叠上下文
理解层叠上下文,不仅可以帮助我们深入理解z-index对元素堆叠顺序的控制,而且对于我们深入理解浮动和定位也是非常重要的。
(1)层叠上下文
层叠上下文,是HTMl中的一个三维的概念,我们知道,网页是三维结构的,它有X,Y,Z轴,Z轴往往都用来设定层的先后顺序的。层叠上下文跟块级格式上下文(BFC)相似,是可以创建出来的,也就是说,你可以在CSS中添加一定的属性来将某个元素创建一个层叠上下文出来。
如果一个元素具备以下任何一个条件,则该元素会创建一个新的层叠上下文。
(1)根元素 (2)z-index不为auto的定位元素
(2)层叠级别
层叠级别是针对同一个层叠上下文而言的。层叠级别与层叠上下文,是两个不同的概念。
在同一个层叠上下文中,层叠级别从低到高排列。
层叠级别由低到高:(1)背景和边框(父级),也就是当前层叠上下文的背景和边框。 (2)负z-index:z-index为负值的“内部元素”。 (3)块盒子:普通文档流下的块盒子(block-level box)。 (4)浮动盒子:非定位的浮动元素(也就是排除了position:relative的浮动盒子)。 (5)行内盒子:普通文档流下的行内盒子(inline-level box)。 (6)z-index:0:z-index为0的“内部元素”。(7)正z-index:z-index为正值的“内部元素”。
背景和边框一般为装饰属性,所以层叠级别最低。浮动元素和块元素一般用作布局,而行内元素都是内容,对于一个页面来说,最重要的当然是内容。因此,一定要让内容的层叠级别相当高。
(3)层叠上下文的特点
一个元素在z轴方向上的堆叠顺序,是由“层叠上下文”和“层叠级别“这两个因素决定的:
①同一个层叠上下文中,我们比较的是“内部元素层叠级别”。层叠级别大的元素显示在上,层叠级别小的元素显示在下。
②同一个层叠上下文中,如果两个元素的层叠级别相同(即z-index值相同),则后面的元素堆叠在前面元素的上面,遵循“后来者居上”原则。
③不同的层叠上下文中,我们比较的是“父级元素层叠级别”。元素显示顺序以“父级层叠上下文”的层叠级别来决定显示的先后顺序,与自身的层叠级别无关。
3:BFC和IFC
(1)基本概念
在CSS中,页面中任何一个元素都可以看成是一个盒子。在普通文档流中,盒子会参与一种格式上下文。这个盒子可能是块盒子,也可能是行内盒子。一个盒子只能是块盒子或者行内盒子,不能同时是块盒子又是行内盒子。其中块盒子参与BFC(块级格式上下文),行内盒子参与IFC(行级格式上下文)。
(2)格式上下文
它指的是页面中的一块渲染区域,并且这个格式上下文有一套自己的渲染规则。格式上下文决定了其他内部元素将如何定位,以及和其他元素之间的关系。
格式上下文有两种:(1)块级格式上下文(BFC) (2)行级格式上下文(IFC)
(3)盒子
盒子,又称CSS盒子,是CSS布局的基本单位。元素的类型和display属性决定了盒子的类型。不同类型的盒子,会参与不同的格式上下文。
盒子的类型一般有“块盒子”和“行内盒子”这两种:
①块盒子
块盒子,即block-level box。元素类型(即display属性)为block、table、list-item的元素,会生成块盒子。
块盒子会参与块级格式上下文。也就是说,元素类型为block、table、list-item的元素都会参与块级格式上下文(BFC)。
②行内盒子
行内盒子,即inline-level box。元素类型(即display属性)为inline、inline-block、inline-table的元素,会生成行内盒子。
行内盒子会参与行级格式上下文。也就是说,元素类型为inline、inline-block、inline-table的元素都会参与行级格式上下文(IFC)。
(4)BFC
BFC 全称Block Formatting Context(块级格式上下文)。它是一个独立的渲染区域,只有块盒子(block-level box)参与。块级格式上下文规定了内部的块盒子是如何布局的,并且这个渲染区域与外部区域毫不相关。
①如何创建BFC
W3C标准中对BFC的定义:浮动元素,绝对定位元素(position为absolute或fixed),元素类型(即display属性)为inline-block、table-caption、table-cell,以及overflow属性不为visible的元素将会创建一个新的块级格式上下文(BFC)。
如果一个元素具备以下任何一个条件,则该元素都会创建一个新的BFC。
Ⅰ:根元素
Ⅱ:float属性除了none以外的值,也就是“float:left”和“float:right”
Ⅲ:position属性除了static和relative以外的值,也就是“position:absolute”和“position:fixed”。
Ⅳ:overflow属性除了visible以外的值,也就是“overflow-auto”“overflow:hidden”和“overflow:scroll”。
Ⅴ:元素类型(即display属性)为inline-block、table-caption、table-cell。
②BFC的特点
(1)在一个BFC中,盒子从顶端开始垂直一个接着一个地排列,两个相邻盒子之间的垂直间距由magin属性决定。在同一个BFC中,两个相邻盒子之间垂直方向上的外边距会叠加。
(2)在一个BFC中,没一个盒子的左外边界(margin-left)会紧贴着容器的左边(border-left)(对于从右到左的格式化,则相反),即使存在浮动元素也是如此。
因此,得出的一下几点重要结论十分重要。
(1)在一个BFC内部,盒子会在垂直方向上一个接着一个地排列。
(2)在一个BFC内部,相邻的margin-top和margin-bottom会叠加。
(3)在一个BFC内部,每一个元素的左外边界会紧贴着包含盒子的左边,即使存在浮动元素也是如此。
(4)在一个BFC内部,如果存在内部元素是一个新的BFC,并且存在内部元素是浮动元素。则该BFC区域不会与float元素的区域重叠。
(5)BFC就是页面上的一个隔离的盒子,该盒子内部的子元素不会影响到外面的元素。
(6)计算一个BFC的高度时,其内部浮动元素的高度也会参与计算。
③BFC的用途
(1)创建BFC来避免垂直外边距叠加。
(2)创建BFC 来清除浮动。
①BFC包含浮动 ②BFC避免文字环绕
(3)创建BFC来实现自适应布局。
上一篇: css 基础问题
下一篇: Edge 浏览器快捷方式
推荐阅读
-
css 代码中的定位和浮动
-
位、字节、WORD、DWORD 的区别和联系 - Unicode 和 ANSI 的区别就像输入法中 "全宽 "和 "半宽 "的区别一样。 由于不同的 ANSI 编码有不同的标准(不同的字符集),对于给定的多字节字符串,我们必须知道它使用的是哪种字符集,才能知道它包含哪些 "字符"。对于 UNICODE 字符串来说,无论环境如何,它所代表的 "字符 "内容始终是相同的。Unicode 有一个统一的标准,定义了世界上大多数字符的编码,因此拉丁文、数字、简体中文、繁体中文和日文都可以存储在一个编码中。统一码是一个统一的标准,定义了世界上大多数字符的编码。 比特(Bit)和字节(Byte)的区别:例如USB2.0 标准接口的传输速率为 480Mbps,有一些人误认为是每秒 480 兆比特,同样网络带宽为 2MB,就容易误认为是每秒 2 兆比特。其实,480Mbps 应该是 480 兆比特/秒或 480 兆字节/秒,它等于 "60 兆字节/秒";同样,2MB,应该是 256 兆字节/秒。 Bit 和 Byte 译为 "比特",都是数据计量单位,比特="位 "或 "比特"。 Byte = 字节,即 1byte = 8bits,两者的换算关系为 1:8。 Mbps = mega bits per second(兆位/秒)是速率单位,因此 2M 带宽应为 2 兆位/秒,即 2MBps。MB = 兆字节(Megabytes,兆字节)是单位量,1MB/S(兆字节/秒)= 8MBPS(兆字节/秒)。 通常所说的硬盘容量是指 40GB、80GB、100GB,其中的 B 是指 Byte 也称为 "字节"。 1 KB=1024 字节 1 MB=1024 KB=1024*1024 字节 1 GB=1024 MB=1024*1024*1024 字节 例如,以前所谓的 56KB MODEM 转换过来的 56KBps 除以 8 就是 7Kbyte,所以真正从网上下载文件存在硬盘上的速度也是每秒 7Kbyte;也就是说,用 B 表示传输速度一般指 Bit;用 B 表示容量一般指 Byte。比特、字节、WORD、DWORD 的本质。
-
Apache Spark 的基本概念和在大数据分析中的应用
-
深入探讨 CSS 中的渐变艺术:线性渐变、径向渐变和锥形渐变细节-1。线性渐变(线性渐变)
-
深入了解 CSS 灵活框中的灵活框
-
了解子网掩码的功能及其在网络规划中的重要性
-
CSS 中的层叠上下文和顺序
-
正负偏差变量 即 d2+、d2- 分别表示决策值中超出和未达到目标值的部分。而 di+、di- 均大于 0 刚性约束和目标约束(柔性目标约束有偏差) 在多目标规划中,>=/<= 在刚性约束中保持不变。当需要将约束条件转换为柔性约束条件时,需要将 >=/<= 更改为 =(因为已经有 d2+、d2- 用来表示正负偏差),并附加上 (+dii-di+) 注意这里是 +di、-di+!之所以是 +di,-di+,是因为需要将目标还原为最接近的原始刚性约束条件 优先级因素和权重因素 对多个目标进行优先排序和优先排序 目标规划的目标函数 是所有偏差变量的加权和。值得注意的是,这个加权和都取最小值。而 di+ 和 dii- 并不一定要出现在每个不同的需求层次中。具体分析需要具体问题具体分析 下面是一个例子: 题目中说设备 B 既要求充分利用,又要求尽可能不加班,那么列出的时间计量表达式即为:min z = P3 (d3- + d3 +) 使用 + 而不是 -d3 + 的原因是:正负偏差不可能同时存在,必须有 di+di=0 (因为判定值不可能同时大于目标值和小于目标值),而前面是 min,所以只要取 + 并让 di+ 和 dii- 都为正值即可。因此,得出以下规则: 最后,给出示例和相应的解法: 问题:某企业生产 A 和 B 两种产品,需要使用 A、B、C 三种设备。下表显示了与工时和设备使用限制有关的产品利润率。问该企业应如何组织生产以实现下列目标? (1) 力争利润目标不低于 1 500 美元; (2) 考虑到市场需求,A、B 两种产品的生产比例应尽量保持在 1:2; (3)设备 A 是贵重设备,严禁超时使用; (4)设备 C 可以适当加班,但要控制;设备 B 要求充分利用,但尽量不加班。 从重要性来看,设备 B 的重要性是设备 C 的三倍。 建立相应的目标规划模型并求解。 解:设企业生产 A、B 两种产品的件数分别为 x1、x2,并建立相应的目标计划模型: 以下为顺序求解法,利用 LINGO 求解: 1 级目标: 模型。 设置。 variable/1..2/:x;! s_con_num/1...4/:g,dplus,dminus;!所需软约束数量(g=dplus=dminus 数量)及相关参数; s_con(s_con_num);! s_con(s_con_num,variable):c;!软约束系数; 结束集 数据。 g=1500 0 16 15. c=200 300 2 -1 4 0 0 5; 结束数据 min=dminus(1);!第一个目标函数;!对应于 min=z 的第一小部分;! 2*x(1)+2*x(2)<12;!硬约束 @for(s_con_num(i):@sum(variable(j):c(i,j)*x(j))+dminus(i)-dplus(i)=g(i)); !使用设置完成的数据构建软约束表达式; ! !软约束表达式 @for(variable:@gin(x)); !将变量约束为整数; ! 结束 此时,第一级目标的最优值为 0,第一级偏差为 0: 第二级目标: !求 dminus(1)=0,然后求解第二级目标。 模型。 设置。 变量/1..2/:x;!设置:变量/1..2/:x; ! s_con_num/1...4/:g,dplus,dminus;!软约束数量及相关参数; s_con(s_con_num(s_con_num));! s_con(s_con_num,variable):c;! 软约束系数; s_con(s_con_num,variable):c;! 结束集 数据。 g=1500 0 16 15; c=200 300 2 -1 4 0 0 5; 结束数据 min=dminus(2)+dplus(2);!第二个目标函数 2*x(1)+2*x(2)<12;!硬约束 @for(s_con_num(i):@sum(variable(j):c(i,j)*x(j))+dminus(i)-dplus(i)=g(i)); ! 软约束表达式;! dminus(1)=0; !第一个目标结果 @for(variable:@gin(x)); ! 结束 此时,第二个目标的最优值为 0,偏差为 0: 第三目标 !求 dminus(2)=0,然后求解第三个目标。 模型。 设置。 变量/1..2/:x;!设置:变量/1..2/:x; ! s_con_num/1...4/:g,dplus,dminus;!软约束数量及相关参数; s_con(s_con_num(s_con_num));! s_con(s_con_num,variable):c;! 软约束系数; s_con(s_con_num,variable):c;! 结束集 数据。 g=1500 0 16 15; c=200 300 2 -1 4 0 0 5; 结束数据 min=3*dminus(3)+3*dplus(3)+dminus(4);!第三个目标函数。 2*x(1)+2*x(2)<12;!硬约束 @for(s_con_num(i):@sum(variable(j):c(i,j)*x(j))+dminus(i)-dplus(i)=g(i)); ! 软约束表达式;! dminus(1)=0; !第一个目标约束条件; ! dminus(2)+dplus(2)=0; !第二个目标约束条件 @for(variable:@gin(x));! 结束 最终结果为 x1=2,x2=4,dplus(1)=100,最优利润为
-
矩阵范式与图像识别:范式在图像识别中的重要性
-
使用 JavaScript 获取网页中的 js、css、flash 和其他文件