前端文档流学习

2019-08-16 本文已影响0人十二月的肖邦_

内容概要

本文主要讲述学习文档流的内容和与文档流相关的一些属性和标签。

文档流

文档流指的是网页中的内容元素布局过程中，内容元素会自动地从左往右，从上往下的流式排列。
在从左往右的布局过程中，如果两个元素高度不同，则自动是底端对齐。

这里面有块级元素与行内元素

块级元素

占据一行，不能与其他元素并排
可以设置width、height
如果不设置宽度，就会继承父亲的宽度

行内元素

可以与其他元素并排在一行，不能设置width、height。

常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

块级元素和行内元素可以相互转化，例如
块级元素可以转换为行内元素：
如果给一个块级元素（比如div）设置：
display: inline;
那么，这个标签就会变为行内元素。

行内元素转换为块级元素：
如果给一个行内元素（比如span）设置：
display: block;
那么，这个标签将会变为块级元素。

结合脱离文档流来实践转化：

如果是普通span行内标签，里面的文字会为脱离文档流的元素让路，围绕在它周围，也就是部分无视。并且行内元素没有宽度，所以如果窗口还有位置，他会在紧挨着脱离文档流的元素的后面显示。

如果给span设置display:block; 那么它将变为块级元素，整个块级元素不会为脱离文档流的元素让路，但是其中的文字会让路，但是剩余的宽度不足显示所有文字，就到脱离文档流的元素的下面去显示了。

<h4 id="2-4">脱离文档流</h4>
就是将元素从普通的文档流布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动
（2）绝对定位
（3）固定定位

文档一旦脱离文档流，在算其父元素的高度时，就不包括其自身了。
脱离文档流的方法：

float:left;
position: absolute;
position:fixed

position一共有5个取值：

static：默认值，遵循文档流来布局。
inherit：继承值，继承父对象的值。
relative：相对定位，相对于它原来的文档流定位来移动，可以通过left、right、top、bottom来移动。即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。
absolute：绝对定位，脱离文档流，使用left、right、top、bottom等属性相对于它的一个最近的具有定位设置的父对象进行绝对定位。绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据body的位置来定位了。另外，绝对定位是不占位置的，它会像PS的图层一样单独做一层，至于第几层你可以通过z-index:这个属性来设置。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。当对象超出浏览器窗口，会显示滚动条。
fixed：固定定位，完全脱离文档流。相对于浏览器窗口，也就是相对于html进行定位。与absolute定位类似，只是当对象超出浏览器窗口，不会现实滚动条，当其他元素的滚动条滚动时，对象始终固定在原来的位置。

脱离文档流中有两个概念：部分无视 和 完全无视。

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(部分无视)。而对于使用absolute 、position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(完全无视)
代码演示：

<head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .test{
                background-color: red;
                float: left;
/*              position: absolute;
 */             width: 200px;
                height: 200px;
            }
            .common {
                width: 300px;
                height: 300px;
                background-color: #008000;
            }
        </style>
    </head>
    <body>
        <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
                <div class="test"></div>
        <div class="common">哈哈哈哈哈哈哈哈</div>
    </body>

当是float时的效果：（哈哈哈没有被挡到）

image.png

当是absolute或者fixed时的效果：(被挡住了)

image.png

所以，这一条规律就比较容易理解了：

浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。

另外，脱离文档流的元素不会撑开父元素的高度和宽度。

<h4 id="2-5">overflow</h4>
overflow 属性规定当内容溢出元素框时需要做的处理。

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的，消失了一样。
scroll 浏览器会显示滚动条，滚动可以查看其余的内容。
auto 由浏览器决定，如果内容被修剪，就会显示滚动条
inherit 会从父元素继承 overflow 属性的值。

清除浮动

clear

clear属性规定元素的哪一侧不允许出现浮动元素。
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。

“float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”

例子：使用了float: left; 虽然左边有了浮动元素，但因为clear的缘故，自己移动到下一行了。

overflow:hidden

给父元素设置overflow：hidden可以清除子元素重的浮动。

overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。

原本div3应该在上面的，因为父元素hidden的设置，消除了浮动。

总结归纳

文档流解释了网页布局的原则，在对元素进行布局时，需要按照文档流的规矩，如果需要特殊的布局，可以按照所需方法来脱离文档流，实现布局。对文档流的理解，需要结合代码实践来学习。