13 CSS 定位布局

鱼仔布丁 5/23/2021 html

position - CSS（层叠样式表） | MDN (opens new window)

position 属性规定元素的定位类型。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

设定元素在文档中的位置。会将标签（元素）转换为块级。

# 属性值

static：默认值，没有定位，元素出现在正常的文档流中，这时给这个元素设置的 left, right, bottom, top 这些偏移属性都是没有效果的
relative: 相对定位
absolute: 绝对定位
fixed: 固定定位

# 相对定位 relative

生成相对定位的元素他会跟其它的元素一样，出现在文档流中它该出现的位置，可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。

有一点要注意，在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。元素的位置通过 "left", "top", "right" 以及"bottom" 属性进行规定。

#box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}

# 绝对定位 absolute

绝对定位使元素的位置与文档流无关，因此不占据空间。生成绝对定位的元素，相对于 static 定位以外的**第一个父元素（body）**进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

相对于 body 定位，如果父元素链上设置了其它定位方式（除了 static），就相对应这个元素进行定位。

绝对定位一般与相对定位结合使用，它相对的父级是 relative 定义的元素做偏移。relative 的元素必须是 absolute 的父级。在项目开发中，一般用 relative+absolute 结合使用。

#box_relative {
    position: absolute;
    left: 30px;
    top: 20px;
}

# 固定定位 fixed

生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

<!--div会出现在屏幕的右下角-->
<div style='position:fixed;right:0px;bottom:0px;'></div>

# 相对定位&绝对定位

父元素使用相对定位，子元素使用绝对定位后，这样子元素的位置不在浏览器左上角，而是相对于父容器左上角。

<!--元素p会一直在父元素div的右上角-->
<div style='position:relative;'>
    <p style='position:absolute;right:0;top:0'></p>
</div>

# z-index

当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。

注意：z-index 仅能在定位元素上奏效（例如 position:absolute;）！

文档流默认的z-index的值为0。用在 static 和 relative 元素上将无效。

注意：元素可拥有负的 z-index 属性值。

说明：一般元素为普通流，普通流的z-index默认为0，脱离了普通流，在普通流之上（定位，浮动）z-index 为0-1之间。如果将z-index值设置为大于或者等于1，元素将会在定位或者浮动流之上。

<style>
div{
    width: 400px;
    height: 200px;
}
.div1{
    width: 1000px;
    height: 600px;
    background-color: #f00;
    position: relative;
}
.div2{
    background-color: #0f0;
    position: absolute;
    z-index: 2;
}
.div3{
    background-color: #00f;
    position: absolute;
    z-index: 3;
}
</style>

<div class="div1">
    <div class="div2"></div>
    <div class="div3"></div>
</div>

# BFC&IFC

先说说FC，FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC和IFC都是常见的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。

Introduction to formatting contexts 格式化上下文简介 - CSS（层叠样式表） | MDN (opens new window)

# BFC

块格式化上下文 - Web 开发者指南 | MDN (opens new window)

BFC（Block Formatting Context）叫做“块级格式化上下文”

BFC的布局规则如下：

1.内部的盒子会在垂直方向，一个个地放置；
2.盒子垂直方向的距离由 margin 决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
4.BFC的区域不会与 float 重叠；
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6.计算BFC的高度时，浮动元素也参与计算。

哪些元素会产生BFC:

1.根元素；
2.float 的属性不为 none；
3.position 为 absolute 或 fixed；
4.display 为 inline-block，table-cell，table-caption，flex；
5.overflow 不为 visible。

2020求知讲堂web前端哔哩哔哩 (゜-゜)つロ干杯~-bilibili (opens new window)

形成BFC的条件

浮动元素(float除none以外的值)
定位元素(position(absolute/fixed))
display(值为inline-block/table-cell/table-caption时)
overflow(值为hidden/auto/scroll时)

BFC特性（规则）

内部的盒子会在垂直方向上一个接一个的放置
垂直方向上的距离会叠加，值由最大margin值决定（如果不要叠加，就需要将该盒子变成一个独立的盒子）
BFC的区域不会float元素区域重叠
计算BFC的高度时，浮动元素也参与计算
BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素

BFC的作用

解决margin重叠的问题（添加独立BFC）
解决浮动高度塌陷的问题（在父级添加overflow:hidden）
解决侵占浮动元素的问题（添加overflow:hidden清除浮动）

# IFC

行内格式化上下文（Inline formatting context） - CSS（层叠样式表） | MDN (opens new window)

IFC(Inline Formatting Contexts)意为“内联格式化上下文”,IFC中，盒子依次水平放置，从包含块的顶部开始。

IFC布局规则

1.框会从包含块的顶部开始，一个接一个地水平摆放。

2.摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、bor效，垂直无效。不能指定宽高。

3.行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。

结论：

一个line box总是足够高对于包含在它内的所有盒子。然后，它也许比包含在它内最高的盒子高。(比如，盒子对齐导致基线提高了)。
当盒子B的高度比包含它的line box的高度低，在line box内的B的垂值对齐线通过’vertical align’属性决定。当几个行内级盒子在一个单独的line box内不能很好的水平放置，则他们被分配成了2个或者更多的垂直重叠的line boxs.因此,一个段落是很多个line boxs的垂直叠加。Line boxs被叠加没有垂直方向上的分离(特殊情况除外)，并且他们也不重叠。
通常，line box的左边缘挨着它的包含块的左边缘，右边缘挨着它的包含块的右边缘。然而，浮动盒子也许会在包含块边缘和line box边缘之间。因此，尽管line boxs在同样的行内格式上下文中通常都有相同的宽度(就是他的包含块的宽度)，但是水平方向上的空间因为浮动被减少了，它的宽度也会变得复杂。Line boxs在同样的行内格式上下文中通常在高度上是多样的(比如，一行也许包含了一个最高的图片然后其他的也可以仅仅只包含文字)
当在一行中行内级盒子的总宽度比包含他们的line box的宽度小，他们的在line box中的水平放置位置由’textalign’属性决定。如果属性是’justify’，用户代理可能会拉伸空间和文字在inline boxs内。
当一个行内盒子超过了line box的宽度，则它被分割成几个盒子并且这些盒子被分配成几个横穿过的lineboxs。如果一个行内盒子不能被分割。则行内盒子溢出line box。
当一个行内盒子被分割，分割发生则margins,borders,和padding便没有了视觉效果。
在同样的line box内的行内盒子也许会被分割成几个盒子因为双向的文字。Line boxs在行内格式上下文中档需要包含行内级内容时被创造。Line boxs包含没有文字，没有空格，没有带着margins,padding和borders，以及没有其他在流中的内容(比如图片，行内盒子和行内表格)，也不会以新起一行结尾。对于在他们内的任何盒子的位置都以他们决定并且必须将他们视作没有高度的line boxs。

主要影响IFC内布局的CSS

font-size line-height height vertical-aligin

line box

行盒模型，这是一个显示区域，根据块状容器内，每一行的多个内联元素（inline-level element）都会共同生成一个行盒模型。

font-size

常见的属性，用来指定文本类型节点的大小。IFC内的很多属性的值是基于这个的。

line-height & height

在一个由多个内联元素组成的块状容器内，’line-height’为内联元素的行盒模型指定了一个最低高度。这个最低高度是分别由基线上的最小高度和基线下的最小深度组成。从上到下四条线分别是顶线、中线、基线、底线。那么行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离（实际在数值上，行高也等于其它相同颜色间的距离）。

vertical-align

该属性影响由多个内联元素生成的盒模型组成的行内盒模型的垂直定位。 vertical有几个特定的值，或者指定一个值。

<p class="a1">
    <span style="vertical-align:60px;">
        English中文
    </span>
    <span>
        中文English
    </span>
</p>

给第一个span，设置60px的垂直偏移量，显示如下：

其中，黄色线就是基线（baseline），绿线和黄线的间隔即为60px。这里会发现，容器（蓝色）的高度被撑高了。

容器的高度 height = line-height + vertical-align

当然同理,如果容器的高度被指定了，那么高度则不变，而超出的部分则不影响布局。如果设置 overflow:hidden，超过的部分则不可见。而vertical-align的其它特殊值，均可以看做一个根据容器高度而变化的相对值。

2020求知讲堂web前端哔哩哔哩 (゜-゜)つロ干杯~-bilibili (opens new window)

12 CSS 盒子模型 14 HTML5