CSS笔记（四）定位与浮动

块级元素（block元素） 一个块级元素独占一行。

特点：①元素的高度、宽度、行高以及顶和底边距都可设置；

          ②元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常见的：div、p、h1…h6、ol、ul、dl、table、form

行内元素（inline元素） 一个内联元素不会开始新的一行，并且只占有必要的宽度，显示在行中，行内框。

特点：①和其他元素在一行上；  ②元素的高度、宽度、行高及顶部和底部边距不可设置；

          ③元素的宽度就是它包含的文字或图片的宽度，不可改变

 inline-block元素，像内联元素，但具有宽度和高度。

特点：①和其他元素都在一行上；②元素的高度、宽度、行高以及顶和底边距都可设置。

display:block;  display:inline;  display:inlineblock; 声明显示的是哪种。 display:none; 该框及其所有内容不再显示，不占用文档空间。

---

 

CSS定位（Positioning）可以对元素进行设置位置。三种基本定位机制：普通流、浮动定位、绝对定位。

普通流/文档流（默认）元素位置由元素在HTML中的位置决定。块级元素从上到下一个一个排列，并在每行中从左到右挨次排放元素。框之间的垂直距离由垂直外边距决定。

行内框在一行中水平布置，可使用垂直内外边距、边框调整它们的距离，但是垂直内外边距、边框不影响行内框高度，一行形成的水平框称为行框（Line Box），行框高度总是足以它所包含的所有行内框，行框高度通过设置行高改变。

---

 

position属性

1、static  默认值，没有定位，元素出现在正常的流。（使top, bottom, left, right 或者 z-index 声明失效！！）

2、absolute 绝对定位，相对于static定位以外的第一个父元素进行定位。原来的元素框从文档流完全删除，并相对于其包含块定位。不论之前什么类型的框，都生成新的块级框。通过top, bottom, left, right属性设置。

3、fixed 绝对定位，类似于absolute，但是是相对于浏览器定位。 通过top, bottom, left, right属性设置。

4、relative 相对定位，相对其正常位置定位。元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

5、inherit 规定应该从父元素继承position的值。

---

 

相对定位：元素相对定位，它将出现在它所在位置上，然后可以通过设置垂直或水平位置，让这个元素相对它的起点移动！

 

向右移动30px，向下移动20px（左边创建30px空间，上边创建20px空间）（元素仍然占据原来空间）。

---

 

绝对定位：设置为绝对定位的元素框从文档流删除，并相对于static定位以外的第一个父元素进行定位。绝对定位使元素与文档流无关，元素原先的空间消失，不论原先是块级框还是行内框，定位后生成的新块级框。

 

 

相对于已定位祖先元素或已定位祖先元素的左上角 向右30px，向下20px（左边创建30px空间，上边创建20px空间）。（框2原位置没了，框3向前一个）

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

---

 

浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动脱离文档流！！

浮动元素排列时，只考虑前一个元素（紧挨着的）位置。

浮动框在移动的过程中，碰到框没有内容的框会对其覆盖，若框内有内容，其内容会自我调整位置以防止被覆盖。比如<p>标签中的文本遇到浮动的框就自我调整位置，以防止被覆盖！！！

浮动元素不会覆盖文字、图片与表单元素！

第三个图，框1左浮动，脱离文档流，不占据空间，框2、3重新文档流排列。不浮动的框在一个空间，浮动的框在另一个平行空间！

---

 

float属性： 定义元素在哪个方向浮动。浮动元素都会生成一个块级框（不论...）。浮动非替换元素时，需要指定一个明确的宽度，否则，它们会尽可能地窄。

（替换元素：浏览器根据标签的元素与属性来判断显示具体的内容。如 input标签，根据type显示内容；img标签，根据src显示内容。textarea、select、object都是替换元素。非替换元素：内容直接告诉浏览器，浏览器将其显示出来。内容为标签包裹的内容。）

1、none 默认值。不浮动，显示其在文本中出现的位置。

2、left right 左、右浮动。

3、inherit 继承父元素的float。

---

 

行框和清理：浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像。

 

要想阻止行框围绕浮动框，需要对行框用clear属性（不允许左或右侧出现浮动）。在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面

 

小例子1

如何让浮动子元素撑开父元素 ：

①父元素不浮动，子元素浮动，增加一个空元素对其进行clear:both;

让父元素包裹浮动元素，需要在父元素某个地方使用clear；因为本例这两个元素不能clear，所以创建一个空元素，然后clear:both;

（缺点：增加了无意义的元素）

 

②父元素浮动，子元素浮动，子元素可以撑开父元素。

对父元素浮动。但是在实际开发中，下一个元素会受到这个浮动元素的影响。因此要对布局中的所有东西进行浮动，然后对有意义的元素（常常是站点的页脚）clear:both;   这有助于减少或消除不必要的标记。

③父元素overflow:hidden。overflow:hidden 会清除子元素的浮动对本元素的影响