浮动，定位，flex布局

Posted 2021-12-09 yuyezhizhi

什么是文档流

英文原文是：
Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.

正常的布局流是将元素放置在浏览器视口内的系统：
块级元素（display:block）在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。
内联元素（也叫行内元素display:inline）表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。
通俗一点来说就是像在地铁站排队一样，正常情况，排成一队，一个一个来的就是内联元素，来一群人他们可能直接再排一队（不文明哈），那他们就是块级元素。

定位

静态(static)
这是默认的定位，没什么特别的。

相对定位(relative)
设置相对定位之后，就可以使用left right top bottom 啦。
相对定位到底是相对什么呢？
他相对的是他原本正常的位置，如果设置为left:20px意思就是相对原位置的左边，向右移动20px，如果是-20px那就向左移动。
同理，设置bottom:20px那就是相对原位置的下边，向上移动20px，如果是负数就向下移动。
一般我们要定一个元素的位置，只要两个就够了，left和right不要一起用，top和bottom不要一起用。
一起用有什么后果呢？一般是会忽略right，和bottom的。但还可能浏览器的不同，和文档流的不同，产生其他的特殊效果，暂且不提了。

绝对定位(absolute)
说他绝对啊，其实又不是绝对的，他也是一种相对。
它是以父元素为相对的对象，而且这个父元素啊，必须非static的定位，如果是static，那就找他爷爷（pis：不要找他的兄弟哈，兄弟不管事的），爷爷不行就找他祖爷爷，直到找到不是默认的static的元素，就以那个为参照了。
但是，还有人说了，真心找不到了怎么办，那最后那就是参照整个浏览器窗口了。
好啦，他的位置通过left right top bottom定好之后呢，那他后面的兄弟就看他不爽了，就挤到他的位置去了。
绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。
这位兄弟这样抢位置是不对的，所以，absolut的元素他会在上面挡住他兄弟，不让其露脸。
可是他不光会挡住抢位置的，他还可能挡住其他的元素。所以上帝就设计了z-index来约束他。
z-index:默认是auto（IE浏览器默认为0），一般要设置在正常元素上面就设置z-index:1数字越大越在上层，也可以设置负数，数字越小越下层。
固定定位(fixed)
他是相对于整个浏览器的定位的。一般用在边上，设置成透明(opacity:0-1;)或者利用其他元素的margin来空出一定的位置。

浮动

浮动的设计目的是为了让文字环绕图片，说到文字，那就不得不说文本流了。
设置float是会脱离了文档流，他后面的元素块会占用他的位置，但是元素块中的文字却还是定位在float元素旁边，所以他没有脱离文本流。
如果一个float元素的上一个元素也是float的，那么它会紧紧的跟在后面，不留一点空隙。
文本流就像是守规矩的好孩子，虽然他的兄弟float了，但它们还是会为他留出空间。就算是他的爸爸的兄弟，他爸占位了，他也不会占位。
float的用处很多时候用来清除间隙，用在<li>,<img>等元素中。
清除float的方法
{style=“clear: both”;}/*添加一个空的div放在要清除浮动元素的最后面*/ {overflow: hidden;}/*同上*/ /*下面这个方法是bootstrap框架用的，可以兼容IE低版本*/ .clearfloat:after { content: ‘‘; display: table; clear: both; } .clearfloat { *zoom: 1; }

flexbox

主要搞清楚几个属性
flex-direction:控制布局方向，
默认row属性横向布局，还可以column属性竖向布局。
row-reverse横向反方向，column-reverse竖向反方向。
flex-wrap:控制元素换行
默认nowrap 规定灵活的项目不拆行或不拆列。
wrap 规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

flex-flow 属性是 flex-direction 和 flex-wrap的简写。

flex:属性是flex-grow，flex-shrink ，flex-basis的简写
flex-grow:flex-grow 属性定义弹性盒子项（flex item）的拉伸因子。（可以给元素设置不同的值来控制大小比例）
flex-shrink:属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。只能是正数。
flex-basis:指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。

成长的路上，有欢乐才更有动力，加油！