CSS布局及浮动

最新推荐文章于 2024-09-18 15:13:40 发布

mht1829

最新推荐文章于 2024-09-18 15:13:40 发布

阅读量324

点赞数 1

文章标签： CSS

从上图中可以看到，一个盒子从里到外有四个层次：最里面的是内容区域，包含元素本身的内容；紧接着是填充区域；然后是边框；最后是空白区域。内容区域的宽度和高度的确定比较复杂，需要综合考虑样式 width和 height的值，以及该盒子中包含的其它盒子的类型。填充区域、边框和空白区域的上、下、左、右四个方位的宽度都可以通过样式 padding、border和margin来分别指定。通过样式 background指定的背景颜色或图片可以应用在内容区域、填充区域和边框上。空白区域（margin）总是透明的，不会应用背景样式。

布局和定位

浏览器在渲染 HTML 页面的时候，所进行的操作就是把上面提到的文档树上的元素所对应的盒子，按照一定的规则进行排列。

盒子类型：

不同的盒子类型在布局时的行为不一样。盒子的类型是由生成它的元素的类型来决定的。通过样式display可以指定元素的类型。该样式可以使用的值很多，主要的有block、inline、inline-block和none等。样式display的值为block的元素称为块级元素（block-level element），它们所生成的盒子是块盒子；display的值为 inline或 inline-block的元素称为行内元素（inline-level element），它们所生成的是行内盒子。

块盒子（block box）：块盒子中只能仅包含块盒子或是行内盒子，不能同时包含两者。

行内盒子（inline box）：行内盒子把其中包含的盒子按照水平方向排成一行来显示。

包围块：

在对页面上的元素进行定位的时候，包围块（containing block）是个很重要的概念。很多时候都需要根据其包围块来确定某元素对应的盒子的位置和大小。包围块的确定并不复杂：对于文档根元素，其包围块是浏览器的窗口；如果元素的样式 position的值是 static或 relative，则其包围块是最近的块级祖先元素的内容区域；如果样式 position的值是 fixed，则其包围块是浏览器的当前视口（viewport）；如果样式 position的值是 absolute，则首先在祖先元素中寻找样式 position的值是 absolute、relative或 fixed的元素。找到这个元素之后，如果该元素是行内元素，则包围块由所生成的盒子的填充边界来确定，如果是块级元素，则包围块是该元素的填充区域。

元素的定位由样式 position的值来确定，该样式的默认值是 static，其它可选的值有 absolute、relative和 fixed。样式 position的值为 static的值称为非定位元素，其它的称为定位元素。

在 CSS 中，一个盒子可能有三种定位方式：普通流、浮动和绝对定位。通过样式 position和 float的值可以控制所采用的定位方式。

正常文档流

正常文档流是按照盒子的类型来定位的。每个盒子都会属于某个格式化上下文中，块或是行内的。块格式化上下文会按照从上到下的垂直顺序来排列盒子。行内格式化上下文则按照水平顺序来排列盒子，从左到右还是从右到左取决于文档的顺序。

通过将样式 position的值设为 relative，可以把当前元素的盒子设成相对定位的。相对定位的盒子首先按照正常文档流来排列，然后再根据其样式 left、right、top和 bottom的值来相对原始位置进行偏移。在它之后出现的盒子不受偏移的影响，就好像它还在原始位置一样。相对定位盒子的一个常见的作用是作为其绝对定位的子盒子的包围块。

浮动定位

通过将元素的样式 float的值设为 left或 right，可以使得该元素对应的盒子在当前行上向左或向右浮动。浮动的盒子会尽可能的向左或向右移动，直到接触到包围块或是另外一个浮动盒子的边界。如果当前行没有足够的空间给浮动盒子，该盒子会往下移动直到有足够的空间为止。

浮动的盒子不属于正常文档流的一部分。在浮动盒子之前和之后的非定位块盒子按照其在正常流中的位置排列，相当于浮动盒子不存在一样。而浮动盒子之后的行内盒子则会被缩短，紧跟在浮动盒子的后面。所形成的效果就是后面的行内盒子包围着浮动的盒子。在网页中文字环绕图片的效果就可以通过这种方式来实现。通过样式 clear可以强制盒子不跟在浮动盒子的后面。

绝对定位

将样式 position的值设为 absolute或 fixed，使得元素对应的盒子变成绝对定位。绝对定位的盒子被从正常文档流中完全移除，对相邻的盒子没有任何影响。绝对定位的盒子的位置是相对其包围块来确定的。具体的位置由样式 left、right、top和 bottom来确定。

有关浮动的理解：参见http://www.iyunlu.com/view/css-xhtml/55.html

浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。

浮动元素的副作用：

（与浮动元素位于同一容器中的元素）1. 块状元素，会钻进浮动元素的下面，被浮动元素所覆盖

2. 行内元素，例如文字，则会环绕在浮动元素的周围，为浮动元素留出空间

3. 浮动元素的父元素坍缩

如果子盒子是浮动的，父盒子不浮动那么子盒子的位置是脱离父盒子的束缚，其位置也是根据文档流中上一个已经定位的元素来决定他的位置。

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。

靠近页面边缘的一端是前，远离页面边缘的一端是后。

元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；

2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。