文档流
- 定义:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流
- 占用文档流:我们将网页比作一张二维平面,那么挂载在该平面的网页对象就称为占用了文档流。网页中大部分对象默认是占用文档流。
- 不占文档流:不挂在文档流这个平面上的对象,则称为不占用文档流。主要方式有:
- 设置float
- 设置position为fixed
- 设置position为absolute
- 父类元素与子类元素的关系
内联元素和块元素
- 区分:所占宽度是否是占用了全部宽度
- 块元素:占用了全部宽度,在前后都是换行符。eg:
<p>
<h1>
<div>
- 内联元素:只需要必要的宽度,不强制换行。
<span> 、<a>
- 改变元素的显示方式:display
- 将内联元素改为块元素:display:block;
- 将块元素改为内联元素:display:inline;
- 【注】:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
定位
-
定义:CSS中元素可以使用top,bottom,left,right来设置元素的定位。position的值不一样,这些属性所参考的位置不一样。
-
static:HTML元素的默认值,即没有定位,元素出现在正常的流中。使用该定位方式(静态方式)的元素不会受到 top, bottom, left, right影响。
-
fixed:元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
-
Fixed定位使元素的位置与文档流无关,因此不占据空间。(脱离文档流)
-
Fixed定位的元素和其他元素重叠。(和其他元素不在同一平面)
-
relative:相对定位元素的定位是相对其正常位置。
-
相对定位的元素可以和其他元素重合,但它仍然处于文档流这一平面中,所以该元素仍然占文档流空间。
-
与相对定位的元素重合的其他元素,毋庸置疑,也占文档流。
-
相对定位元素经常被用来作为绝对定位元素的容器块。
-
absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
-
总结:
- static元素不会受到left,top,right,bottom等属性影响,但可以通过box-model的属性来改变它们的位置。eg:
<span style="position:static;left:100px;">static定位</span> <br> <span style="position:static;margin-left:100px;">static定位</span>
- fixed定位与absolute定位的联系与区别
- fixed定位是相对于浏览器窗口固定,而absolute是相对于文档(最近的父类元素,即使没有父类元素,也是相对于html标签)固定
- 都脱离了文档流,都不占文档流的空间
浮动 Float
- 定义:CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
- 方式:元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
- 特点:
- 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动元素之后的元素将围绕它。
- 浮动元素之前的元素将不会受到影响。
- 如果图像是右浮动,后面的对象流将环绕在它左边。
- 彼此相邻的浮动元素:几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻
- 清除浮动: 使用 clear
- 素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
- clear 属性指定元素两侧不能出现浮动元素。
脱离文档流的方式总结
- position:absolute;
- position:fixed;
- float:left/right;
- 父元素脱离文档流,则子元素也会脱离。