文档流

最新推荐文章于 2024-06-28 08:00:00 发布

洪城浪子

最新推荐文章于 2024-06-28 08:00:00 发布

阅读量174

点赞数

分类专栏：前端文章标签： CSS 文档流

本文链接：https://blog.csdn.net/qq_38958113/article/details/82858228

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文档流

定义：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流
占用文档流：我们将网页比作一张二维平面，那么挂载在该平面的网页对象就称为占用了文档流。网页中大部分对象默认是占用文档流。
不占文档流：不挂在文档流这个平面上的对象，则称为不占用文档流。主要方式有：
设置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：
```
static定位
 
static定位
```
- fixed定位与absolute定位的联系与区别
- fixed定位是相对于浏览器窗口固定，而absolute是相对于文档（最近的父类元素，即使没有父类元素，也是相对于html标签）固定
- 都脱离了文档流,都不占文档流的空间