文档流、Position介绍

一、文档流

1.首先我们要了解什么是标准文档流

HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。

2.然后我们要知道块级元素和行内元素有哪些

块级元素
1. 独占一行，不能与其他元素共处一行。
2. 可以宽和高。
3. 如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽。
4. div, form, table, p, pre, h1~h6, dl, ol, ul等。
行内元素
1. 与其他元素处在同一行。
2. 不可以设置宽和高，即width和height属性对其无效。
3. span,a,strong, em, label, input, select, textarea, img, br。

温馨小提示：

(1).容器级的标签，里面可以放置任何东西(div、p、li等)；文本级的标签里面，只能放置文字、图片、表单元素。

(2).p标签是一个文本级标签。p里面只能放文字、图片、表单元素。其他的一律不能放。

(3).定义列表是一个组标签，不过比较复杂，出现了三个标签：

dl表示definition list 定义列表

dt表示definition title 定义标题

dd表示definition description 定义表述词

dt、dd只能在dl里面；dl里面只能有dt、dd

3.块级元素与行内元素的转换

块级元素可以设置为行内元素；

行内元素也可以设置为块级元素。

display: block 设置属性为块级元素

未更改前样式

文档流、Position、float介绍文档流、Position介绍

span{
    display: block;
    width: 300px;
    height: 30px;
    border: 1px solid red;
 }

文档流、Position、float介绍文档流、Position介绍

很明显行内元素不能设置高度和宽度以及不会独占一行，经过改变以后拥有块级元素的特性

display: inline 设置属性为行内元素
```
p{
    display: inline;
    width: 50px;
    height: 100px;
    background-color: skyblue;
}
           
```
文档流、Position、float介绍文档流、Position介绍
我们发现从原来的块级元素独占一行变成共处一行，且不能设置宽和高，明显的行内元素特性
display:inline-block

将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
```
p{
    display: inline-block;
    width: 50px;
    height: 100px;
    background-color: skyblue;
}
           
```

文档流、Position、float介绍文档流、Position介绍

我们可以看到内容显示为共处一行，但是同时又可以设置高与宽

二、脱离文档流

也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

1.首先要了解position定位方式

absolute: 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left,top,right以及bottom属性进行规定。
fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left、top、right以及bottom属性进行规定。
relative: 生成相对定位的元素，相对于其正常位置进行定位。
static: 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit: 规定应该从父元素继承 position 属性的值。

relative

relative使相对于正常文本流中的位置进行偏移

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
        #item1 {
            width:100px;
            height:100px;
            background-color:green;
        }
        #item2 {
            width:100px;
            height:100px;
            background-color:red;
        }
    </style>
</head>
<body>
<div id="content">
    <div id="item1" >item1</div>
    <div id="item2">item2</div>
</div>
</body>

</html>

效果图

文档流、Position、float介绍文档流、Position介绍

若将上述的css样式改为

#item2 {
    width:100px;
    height:100px;
    background-color:red;
    position:relative; //相对定位
    left:20px;
    top:20px;
}

文档流、Position、float介绍文档流、Position介绍

总结：relative是相对正常文档流的位置进行偏移，原先占据的位置依然存在，也就是说它不会影响后面元素的位置。left表示相对原先位置右边进行偏移，top表示相对原先位置下边进行偏移。当left和right同时存在，仅left有效，当top和bottom同时存在仅top有效。relative的偏移是基于对象的margin左上侧的。

absolute

为了方便我们进行观察，现将上述原始网页代码最外层div加上margin值

#content{
    margin-left: 100px;
    margin-top: 100px;
}

我们注释掉先前对item的position:relative，正常显示如下

文档流、Position、float介绍文档流、Position介绍

当我们修改position:absolute时

#item2 {
    width:100px;
    height:100px;
    background-color:red;
    position:absolute;
    left:20px;
    top:20px;
}

显示效果如下

文档流、Position、float介绍文档流、Position介绍

由此可见当父级元素的position属性值为默认值时（static）,absolute是相对于浏览器窗口进行定位的。

如果设置content的position属性值为非默认值，那么absolute就是相对于该父级元素进行定位。

接下来我们设置父容器content的position为相对定位relative试试

#content{
    margin-left: 100px;
    margin-top: 100px;
    position: relative;
    border:5px solid black;//为了方便观察为父容器设置个边框
}

让我们来看看效果吧

文档流、Position、float介绍文档流、Position介绍

当我们把父容器的position设置为absolute

#content{
    margin-left: 100px;
    margin-top: 100px;
    position: absolute;
    border:5px solid black;
}

原来为改变前的样式

文档流、Position、float介绍文档流、Position介绍

改变后的样式

文档流、Position、float介绍文档流、Position介绍

注意到变化了吗，当把外层父容器div设置为absolute时，外层div宽度由原来的100%变为auto.

当把一个元素position属性设置为absolute或fixed的时候，会发生三件事：

把该元素往 Z 轴方向移了一层，元素脱离了普通流，所以不再占据原来那层的空间，还会覆盖下层的元素，简称脱离文档流。
该元素将变为块级元素，相当于给该元素设置了 display: block;（给一个内联元素，如，设置 absolute 之后发现它可以设置宽高了）。
如果该元素是块级元素，元素的宽度由原来的 width: 100%（占据一行），变为了 auto。

我们此时要注意一点就是我们如果给父容器设定了padding，margin,border等属性

我们尝试去给父容器写一个padding，看看上面的图有没有什么变化

#content{
    margin-left: 100px;
    margin-top: 100px;
    position: absolute;
    padding: 20px;
    border:5px solid black;
}

文档流、Position、float介绍文档流、Position介绍

由此可见，如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的.

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位,特殊的绝对定位

其余两个我不进行描述了大致如上面介绍一般

我们发现能使脱离文档流的定位方式有absolute和fixed

三、float属性(魔鬼)

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

我们先来设置四个小div吧

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
        .d1{
            width: 400px;
            height: 150px;
            border: 3px solid black;
            background-color: red;
        }
        .d2{     
            width: 320px;  
            height: 100px;
            border: 3px solid black;
            background-color: green;
        }
        .d3{
            width: 200px;
            height: 140px;
            border: 3px solid black;
            background-color: orange;
        }
        .d4{
            width: 300px;
            height: 110px;
            border: 3px solid black;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="d1">div1</div>
    <div class="d2">div2</div>
    <div class="d3">div3</div>
    <div class="d4">div4</div>
</body>
</html>

我们先看看他的初始效果

文档流、Position、float介绍文档流、Position介绍

当我们尝试给div2加上float属性时

float: left

.d2{     
    width: 320px;  
    height: 100px;
    border: 3px solid black;
    background-color: green;
    float: left;
}

文档流、Position、float介绍文档流、Position介绍

float: right

文档流、Position、float介绍文档流、Position介绍

如果我们同时给div2和div3加上float：left呢

让它们同时向左浮动

.d2{     
    width: 320px;  
    height: 100px;
    border: 3px solid black;
    background-color: green;
    float: right;
}
.d3{
    width: 200px;
    height: 140px;
    border: 3px solid black;
    background-color: orange;
    float: left;
}

文档流、Position、float介绍文档流、Position介绍

如果我们同时给他们加上float：right呢

让他们同时向右浮动

.d2{     
    width: 320px;  
    height: 100px;
    border: 3px solid black;
    background-color: green;
    float: right;
}
.d3{
    width: 200px;
    height: 140px;
    border: 3px solid black;
    background-color: orange;
    float: right;
}

文档流、Position、float介绍文档流、Position介绍

当同时对div2、div3设置浮动之后，div3会跟随在div2之后，但其实一直到现在，div2在每个例子中都是浮动的，但并没有跟随到div1之后。因此，我们可以得出一个重要结论：

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

div的顺序是HTML代码中div的顺序决定的。靠近页面边缘的一端是前，远离页面边缘的一端是后。

文档流、Position、float介绍文档流、Position介绍

有关清楚浮动以及浮动的其他知识还有很多，这个仅仅是其中的一小部分，后面还要继续整理

文档流、Position、float介绍文档流、Position介绍

文档流、Position介绍

一、文档流

1.首先我们要了解什么是标准文档流

2.然后我们要知道块级元素和行内元素有哪些

3.块级元素与行内元素的转换

二、脱离文档流

1.首先要了解position定位方式

relative

absolute

fixed

三、float属性(魔鬼)

继续阅读

怎样使用SpringMVC控制页面

Spring MVC 接收多个实体参数

CSS中伪类和伪元素的区别

Vue项目 - 单文件组件和Vue中的路由

左耳朵耗子：程序员如何拿到年薪60万的岗位？

两种清除浮动的方法

没救了! 困扰程序员一辈子的5个魔咒, 改掉比登天还难！

[转]如何成长为一名全栈工程师全栈工程师

underscore模板功能的使用和学习

CSS之折叠菜单

web开发之前后端渲染

JavaScript的那些坑之事件代理事件代理事件阶段

ACS基本配置-权限等级管理

vue （vue2.0）使用总结(从大体结构总结)

父子组件间传值的实现父子组件间传值的实现

vue搭建过程及出现问题