黄东海和IFC怎么在CSS中使用 - 行业资讯 - 肥雀云

　　介绍

本篇文章给大家分享的是有范克廉关和IFC怎么在CSS中使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强>一什么是黄东海

和之前所有博文一样,还是先从什么的角度开始介绍,由浅入深的理解黄东海。

所谓的格式化上下文(格式化上下文),它是W3C CSS2.1规范中的一个概念。

它是页面中的一块渲染区域,并且有一套渲染规则。

它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

而块格式化上下文(黄东海,块级格式化上下文),就是一个块级元素的渲染显示规则。通俗一点讲,可以把黄东海理解为一个封闭的大箱子,,容器里面的子元素不会影响到外面的元素,反之也如此。

<强>黄东海的布局规则如下:

1内部的盒子会在垂直方向,一个个地放置;
2均是页面上的一个隔离的独立容器;
3属于同一个黄东海的两个相邻框的上下保证金会发生重叠;
4计算黄东海的高度时,浮动元素也参与计算
每5个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此。
6黄东海的区域不会与浮重叠;

那么如何触发黄东海呢?只要元素满足下面任一条件即可触发黄东海特性:

<李>

身体根元素;

<李>

浮动元素:浮动不为所有的属性值;

<李>

绝对定位元素:位置(绝对、固定)

<李>

显示为:inline-block,表格,flex

<李>

溢出除了可见以外的值(隐藏、汽车、滚动)

<强>二黄东海的特性及应用

接下来介绍黄东海常见的特性和应用,这一部分在解释原因时,会用到上文的布局规则和触发条件,所以需要注意一下。

<强> 1两个相邻的普通流中的块元素垂直方向上的利润率会折叠

& lt; head> 　　.p {,, 　　宽度:200 px;才能,, 　　高度才能:50 px;,, 　　保证金才能:50 px 0;,, 　　背景颜色:红色,,才能, 　　},, 　　& lt;/head> 　　　　& lt; body> 　　,,& lt; div 类=皃"祝辞& lt;/div>,, 　　,,& lt; div 类=皃"祝辞& lt;/div>,, 　　& lt;/body>

效果图是:

黄东海和IFC怎么在CSS中使用“> 根据黄东海规则的第3条: 盒子垂直方向的距离由保证金决定, 属于同一个黄东海的+两个相邻盒子的+上下保证金会发生重叠。 上文的例子之所以发生外边距折叠,是因为他们同属于身体这个根元素,所以我们需要让它们不属于同一个黄东海,就能避免外边距折叠: <pre类= & lt; div 类=皃"祝辞& lt;/div>,, 　　& lt; div 类=皐rap"祝辞,, 　　& lt;才能div 类=皃"祝辞& lt;/div>,, 　　& lt;/div> .wrap {,, 　　溢出才能:隐藏,,, 　　　　.p {,, 　　宽度:200 px;才能,, 　　高度才能:50 px;,, 　　保证金才能:50 px 0;,, 　　background才能:红色;

效果图是:

黄东海和IFC怎么在CSS中使用“> <强> 2均可以包含浮动的元素(清除浮动)</强> 正常情况下,浮动的元素会脱离普通文档流,所以下面的代码里: <pre类= & lt; div 风格=氨呔?,1 px solid # 000;“比; 　　,,,& lt; div 风格=翱矶?,50 px;,高度:,50 px;,背景:,# eee; 　　,,,,,,,,,,,,,,:浮动,左,“在　　,,,& lt;/div> 　　& lt;/div>

外层的div会无法包含内部浮动的div,效果见下图:

黄东海和IFC怎么在CSS中使用“> 但如果我们触发外部容器的黄东海,根据黄东海规范中的第4条:计算黄东海的高度时,浮动元素也参与计算,那么外部div容器就可以包裹着浮动元素,所以只要把代码修改如下: <pre类= & lt; div 风格=氨呔?,1 px solid # 000;溢出:,hidden"比; 　　,,,& lt; div 风格=翱矶?,100 px;高度:,100 px;背景:,# eee;浮动:,左;“祝辞& lt;/div> 　　& lt;/div>

就可以完成以下效果:

黄东海和IFC怎么在CSS中使用“> <强> 3均可以阻止元素被浮动元素覆盖</强> 先看一个例子:<h2 class= 黄东海和IFC怎么在CSS中使用