块级元素内联元素文档流 CSS 布局知识小总结

最新推荐文章于 2024-10-14 09:20:17 发布

缤纷的书签

最新推荐文章于 2024-10-14 09:20:17 发布

阅读量2.2k

点赞数

分类专栏： css 文章标签：文档 css div input table ie

本文链接：https://blog.csdn.net/clam_clam/article/details/6582831

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在做web 前端的开发。
研究了一下css ，也算是一知半解。把自己的体会理解误区整理起来。
①第一点我们要对文档流概念理解：
这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在。
如果没有给元素指定CSS，则该元素会按照正常的文档流来排列。
首先要理解一个概念，所有允许被 BODY 元素包含的元素，要么是块级（block-level elements）的；要么是内联（inline-level elements）的；常见的块级元素有 DIV , FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等等。常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等等。一般来说块级元素可以包含块级元素和内联元素，但内联元素只能包含内联元素；内联元素不响应垂直margin, width, height, max/min width/height 等属性声明；块级元素则可以响应这些属性。另外在strick的dtd 下，<body>标签只能包含块级元素，不能包含内联元素。

文档流
Ø 将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。

Ø 块级元素通常被现实为独立的一行，前后都会和换一行，浮动块级元素则按规定浮在行的一端。若当前行容不下，则另起新行再浮动。

Ø 内联元素则前后不会产生换行，一系列内联元素都在一行内显示。只有该行显示不下了才会换到另外一行。

Ø每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动。

Ø几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。

有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中.

浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

基于文档流, 我们可以很容易理解以下的定位模式:

相对定位,
即相对于元素在文档流中位置进行偏移. 但保留原占位.（注意了是基于文档流位置，以前本人望文生义的以为相对定位是根据它上一个元素进行定位的。如<div ID="A">
<div ID="B"> 我以前就认为相对定位就是B相对于A来定位的，大错特错了。相对定位是 B 相对于它在文档流中的定位。切记！）
绝对定位,
即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移
固定定位,
即完全脱离文档流, 相对于视区进行偏移.

如果想要彻底弄懂 CSS 盒子模型请参考下面文章。本人也是参考它来理解的，写得挺好的。
1.彻底弄懂CSS盒子模式一(DIV布局快速入门)
http://www.blueidea.com/tech/web/2007/4545.asp
2.彻底弄懂CSS盒子模式二(导航栏实例)
http://www.blueidea.com/tech/web/2007/4563.asp
3. 彻底弄懂CSS盒子模式三(浮动的表演和清除的自述)
http://www.blueidea.com/tech/web/2007/4579.asp
4.彻底弄懂CSS盒子模式四(绝对定位和相对定位)
http://www.blueidea.com/tech/web/2007/4601.asp
5.彻底弄懂CSS盒子模式五(定位强化练习)
http://www.blueidea.com/tech/web/2007/4602.asp

有关内联元素和块级元素请参考:
http://www.blueidea.com/tech/web/2009/6601.asp
http://www.blueidea.com/tech/web/2009/6601_2.asp

http://www.blueidea.com/tech/web/2009/6601_3.asp

下面对position 的三个值总结一下，static（静态）、relative（相对）、absolute（绝对）；由于static是所有页面元素的默认值，因此设置元素的定位类型时几乎不用这个值，除非用于覆盖之前的定义。
对于后两者，一般应用：在一个相对定位的元素里面放置一个绝对定位的元素，如图：

子元素B可以通过top、right、bottom、left来精确定位，定位的参考目标就是其具有相对定位属性的父级元素A；并且设置这些偏移后，产生的空隙会被后面的元素填充（如果后面的元素足够尺寸的话）。由于B元素具有absolute定位属性，相当于从文档流中抽取出来，浮动在原平面排版上，形成“层”，如果有多个“层”，层与层之间就必然会有谁覆盖谁，谁在上谁在下的竞争关系，因此，为解决这个竞争，就产生了 z-index（空间坐标系的Z轴）属性，谁的值大，谁就在上面。另外，如果父级元素A没有设置relative，那么B元素就会以body标签当作参考点。

对于具有position:relative属性的元素A，其top、right、bottom、left四个方向的位置偏移就会以该元素的原来位置作为参考点，而不是像上面说的，以具有relative定位属性的父级元素或body作为参考点。在设置了偏移后产生了空隙，其周围的元素并不会填充这些空隙，即使它们足够尺寸(演示)。值得注意的是，此时元素A的margin，margin将作用于该元素的原来位置，由于原位置产生偏移，该元素的最终位置将是margin与top、right、bottom、left共同作用后的位置，并且其周围元素的位置也将产生影响。

回过头来再看看 relative 里面的 absolute，比如上面的A、B两个元素，如果两个元素都设置了top、right、bottom、left，对于元素B来说，其位置偏移的参考点是元素A偏移后的位置，不是元素A的原位置，同样，如果元素B有margin，其参考点也是元素A偏移后的位置，这点很重要，这才是absolute的概念。

下面是w3cschool 里position的定义：
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。