html – 边际如何工作？

概述我已经提供了marginfix，它是一个块级元素，一个和两个也是块级别，但是这些都是浮动的。这就是为什么它们在同一行布局上的原因，但是marginfix也不会浮动，块级元素应该低于元素，如下所示 +--------------------+ +--------------------+| | 我已经提供了marginfix，它是一个块级元素，一个和两个也是块级别，但是这些都是浮动的。这就是为什么它们在同一行布局上的原因，但是marginfix也不会浮动，块级元素应该低于元素，如下所示

+--------------------+                                 +--------------------+|                    |                                 |                    |+--------------------+                                 +--------------------+                        +--------------------------+                        |                          |                        +--------------------------+

但它的作用就是这样

+--------------------+ +--------------------------+  +--------------------+|                    | |                          |  |                    |+--------------------+ +--------------------------+  +--------------------+

这是HTML

<div >  <div >one</div>  <div >two</div>  <div >three</div></div>

CSS

.wrap{  wIDth: 500px;  background-color: red;   position: relative;  margin: 0 auto;}.one{  wIDth: 200px;  float: left;}.two{  wIDth: 200px;  float: right;}.marginfix{  margin: 0 210px;}

更新说明

有人可能会说marginfix包含浮动元素的剩余空间。如果是这样，为什么如果我们更改HTML元素的顺序，它将无法正常工作。这个HTML将不能像以上HTML那样工作

<div ><div >one</div><div >three</div><div >two</div></div>

那么利差值如何工作？

解决方法 边际和浮动元素的相互作用

演示HTML和CSS：http://jsfiddle.net/audetwebdesign/2Hn7D/

在这个例子中，.wrap是父类，包含固定宽度的块元素
为600px，使用标准方法水平居中，边距：0自动。

在父区块中，有一个块级元素，div.marginfix与一些文本
(用于照明用途)。因此，div.marginfix处于正常流程和a
块格式化上下文。它的宽度将扩展以填充父节点的宽度
容器。

父区块还包含两个浮动元素div.one和div.two，
左右分别浮动，宽度为：200px。

Css兼容的浏览器将遵循CSS块格式模型来布局
内容如下：

(1)忽略浮动元素，然后计算剩余元素的布局
流量元素(.marginfix)调整边缘，填充，线高度，
内联元素等。

(2)确定放置浮标所需的空间，使左侧浮起
元素与父级的左边缘齐平，右边的浮动元素是
与父母的右边缘齐平，并且它们的上边缘都相邻
到父元素的顶边。

(3)调整线框的宽度(文本中的虚框)
根据需要允许正常流量元素的文本
包裹浮动元素。

基本例子

在最简单的情况下，.marginfix内的文本会围绕两个浮动文件
元素并延伸到父元素的左右边缘
文字已经清除了浮标。

示例2 – 添加边距

如果向.marginfix添加左边距和右边距，那么in-flow div的宽度
被计算为{宽度的父 – 左边距 – 右边距}，所以文本
被限制在布局的中心。将产生类似的效果
使用填充。

请注意，本示例中的文本格式将是
即使一个或两个漂浮的兄弟姐妹被删除也是如此。

示例3 – 更改元素的顺序

使用浮标时，元素的顺序有所不同。

考虑以下变体，在两个浮动div之间放置.marginfix：

<div >    <div >one - add some text to make it taller for effect.</div>    <div >three - Nulla vehicula libero... </div>    <div >two - single liner</div></div>

在这种情况下，来自.marginfix的文本将围绕左浮动元素。

然而，右侧浮动元素现在出现在流入块之后，为此
原因，两个元素被冲洗到右边(如预期的)和底部
最接近块级元素的边，在这种情况下为.marginfix。

任何应用于.marginfix的边距或填充将简单地扩展它的高度
流入元件和div.two仍然位于其后面(参见示例4)。

示例5 – 建立新的块格式化上下文

它应用overflow：隐藏到.marginfix，CSS格式化模型启动
新的块格式化上下文，这意味着.marginfix将不会扩展
超出任何相邻浮动元件的任何边缘。

在这个例子中，来自.marginfix的文本不再包围左浮动
元件。

像以前一样，右侧浮动的div仍然位于.marginfix之后.marginfix仍然是一个块级元素。

总结

以上是内存溢出为你收集整理的html – 边际如何工作？全部内容，希望文章能够帮你解决html – 边际如何工作？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。