css中的均有哪些作用

　　介绍

这篇文章将为大家详细讲解有关css中的均有哪些作用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

什么是黄东海(块格式化上下文)

格式化上下文(格式化上下文)是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

而块格式化上下文(黄东海,块级格式化上下文),就是一个块级元素的渲染显示规则。具均有特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且均具有普通容器所没有的一些特性。

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

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

<李>

身体根元素;

<李>

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

<李>

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

<李>

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

<李>

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

黄东海到底有什么用呢?

块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。

<强> 1,同一个黄东海下外边距会发生折叠
也就是说,两个相邻的普通流中的块元素垂直方向上的利润率会折叠。

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

这里两个p的外边距为100 px,而不是200 px。之所以发生外边距折叠,是因为他们<强>同属于身体这个根元素。

<>强利用均可以消除保证金崩溃
黄东海导致了崩溃边缘,而现在又要用它来解决cllapse。但是始终要记住一点:只有当元素在同一个黄东海中时,垂直方向上的利润才会clollpase。如果它们属于不同的黄东海,则不会有保证金的崩溃。因此我们可以再建立一个黄东海去阻止保证金collpase的发生。

& lt; div 类=皃"祝辞& lt;/div>,, 　　 　　& lt; div 类=皐rap"祝辞,, 　　& lt;才能div 类=皃"祝辞& lt;/div>,, 　　时间/div> & lt; 　　 　　.wrap  {,, 　　,,溢出:隐藏。 　　}, 　　.p  {,, 　　宽度:200 px;才能,, 　　高度才能:50 px;,, 　　保证金才能:100 px  0;,, 　　,,背景颜色:红色; 　　}

<强> 2,均可以包含浮动的元素(清除浮动)
正常情况下,浮动的元素会脱离普通文档流,使父元素高度坍塌。即外层的p会无法包含内部浮动的p .

& lt; div 风格=氨呔?,1 px  solid  # 000;“比; 　　,,,& lt; div 风格=翱矶?,50 px;,高度:,50 px;,背景:,# eee;浮动:,左,“在 　　,,,& lt;/div> 　　& lt;/div>

但如果我们触发外部容器的黄东海,根据黄东海规范中的第4条:计算黄东海的高度时,浮动元素也参与计算,那么外部p容器就可以包裹着浮动元素。

& lt; div 风格=氨呔?,1 px  solid  # 000;溢出:,hidden"比; 　　,,,& lt; div 风格=翱矶?,100 px;高度:,100 px;背景:,# eee;浮动:,左;“祝辞& lt;/div> 　　& lt;/div>

<强> 3,均可以阻止元素被浮动元素覆盖/(两栏布局)

<强> css中的均有哪些作用“> </强> <br/> </p> <p>大多数情况(若没有特殊设置),第二个元素有部分被浮动元素所覆盖,(但是<强>文本信息不会被浮动元素所覆盖</强>),文本将会环绕浮动元素(如图1所示);但有时候这并不是我们期望的,我们想要的是Figure2。<br/>如果想避免元素被覆盖,可触第二个元素范克廉的特性,在第二个元素中加入<代码>溢出:隐藏</代码> <h2 class=css中的均有哪些作用