深入理解CSS中的position、float、display属性，以及三者的关系-tutorial css-php.cn

这篇文章主要讲了CSS中的position、float、display属性，以及position、float、display属性之间的关系，有需要的朋友可以参考一下，希望可以帮助到你。

position属性：

position属性指出一个元素的定位方法。有4种可能值：static, relative, absolute or fixed：

static：默认值，元素按照在文档流中出现的顺序渲染
absolute：绝对定位，元素相对于它的第一个被定位的祖先元素（非static）来进行定位
fixed：元素相对于浏览器window进行定位
relative：元素相对与它的正常位置进行定位，因此"left:20"就表示在元素正常位置的基础上，左移20像素的距离。

float属性：

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

none：默认值。元素不浮动，并会显示在其在文本中出现的位置。
Left：元素向左浮动。
Right：元素向右浮动。

display属性：

display属性指定了一个DOM元素说使用的盒子模型（box）。即元素应该生成的框的类型。

Inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
None: 此元素不会被显示。
Block: 此元素将显示为块级元素，此元素前后会带有换行符。
inline-block: 行内块元素。这个值导致一个元素产生一个块状盒模型（block box），而本身作为单一的内联盒模型（inline box）流动排列（flow），类似一个被替代的元素。Display值为inline-block的元素内部形成一个块状盒模型，而本身形成类似一个内联的被替代元素”。即display为inline-block的元素既可以像块状元素一样定义高度宽度，又可以和内联元素（比如文字）排列在一行。这个效果在页面设计的时候，很多地方都可以带来便利，最常见的莫过于设计导航时，既可以像inline元素那样实现居中，又可以设置像block元素那样设置单个菜单大小，还可以通过text-indent来隐藏文字显示背景图片。
list-item: 此元素会作为列表显示。
table :此元素会作为块级表格来显示（类似

），表格前后带有换行符。

CSS框模型（盒子模型）一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“内联元素”，这是因为它们的内容显示在行中，即“行内框”。

您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让内联元素（比如元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

<div> 
some text 
<p>Some more text.</p> 
</div>

Salin selepas log masuk

在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。

Css属性：display, position和float的关系

如果一个元素的display属性被设置为none，那么就不会生成元素对应的box，这种情况下，float和position被忽略
否则（display非none），如果一个元素的 position属性被设置为absolute或者fixed（都是绝对定位），这种情况下，float被忽略（float计算的值为 none），display属性的值根据下表自动计算。box的位置取决于属性top，right，bottom，left以及box的容器
否则（display非none，并且position非absolute、fixed），如果float的值不为null（为left或者right），那么box是浮动的并且display的值根据下表来计算
否则（display非none，并且position非absolute、fixed，float为none），如果元素是根元素，display的值根据下表来计算。（这种情况下有一个例外：在CSS2.1中定义，当display被指定的值是list-item时，计算结果的display的值为block或者list-item）
否则（display非none，并且position非absolute、fixed，float为none，不是根元素），那么就按照被指定的display的属性值来显示。

表格 display属性转换：

指定值 inline-table 转成table
指定值 inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block 转成block
其他任何的指定值都保持不变。

Atas ialah kandungan terperinci 深入理解CSS中的position、float、display属性，以及三者的关系. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

position、float、display

sumber：php.cn

Artikel sebelumnya：css中什么是伪类选择器？伪类选择器的简要介绍 Artikel seterusnya：css实现滚动文字的实例代码

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang