html/css-css--文档流-19/9/25

文档流

定义

内联元素默认从左到右流，遇到障碍或者宽度不够时会自动换行，继续从左到右流。
块级元素默认占一行，并且从上到下布局。

脱离文档流

结果：脱离文档流，计算父级高度时，不包括它了
方法：1. float:left;
2.position:fixed;
3.position:absolute;
补充：
float和position区别：https://blog.csdn.net/qq_21184771/article/details/56049662
float: left; right; none; inherit;
实例：1.将图片位置调整至段落右方或者左边，none是第一行的开头，而ritght/left是文字围绕可能前几行文字前都是图片
以往这个属性总应用于图像，使文本围绕在图像周围，
不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
2.两个上下排布的div变成左右排列，设置div-left为float，div-right的margin-left为div-left的宽度。
3.段落首字母浮动在左侧，好像老版的外文报纸那样。
position:absolute; fixed; (绝对，a绝对于第一个父元素，f绝对于父级)，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性规定。
relative;（相对）例子：position:relative; left:-20px
static; （无）
inherit；

相对定位

position:relative;
注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
1.元素进行相对定位不会影响其父元素的高度。
2. 对元素进行相对定位，其在父元素的真实空间位置还是原来的位置，只是肉眼看到的是新位置相对于原来的位置进行移动，所占据的真实空间是不变的。

div高度的确定

div的高度由字的大小x开发者建议的行高确定，与font-size无关
div的宽度不是由div里面的文字决定的，div默认是一行宽
在没有padding的前提下，div的高度即为line-height的值 。

1.div的高度由其自身的padding+子元素的高度+子元素的margin、padding。
2.内联元素的宽度由其内容+margin+padding决定，但是其高度是不受padding和margin影响的。