标签：排列 使用 默认 mda bsp 格式 初始化 abs 记录
1.基本概念
视觉格式化模型：CSS的一种机制，它规定了页面中的多个盒子如何布局。
视口：可视窗口，通常指浏览器的可视区域。
包含块（containing block）：每个元素都有一个包含块，它是指元素在页面中摆放的区域（通常情况下，元素的包含块是它父元素的内容盒（content-box）。
Html：初始化包含块是浏览器在渲染前自动生成的一块区域
2.定位体系概念
视觉格式化模型：视觉格式化模型要求，所有的元素必须放置在它的包含块中。
元素在包含块中的尺寸和位置，主要受到两个因素的影响：
什么是定位体系？视觉格式化模型规定，定位体系一共有三种：
任何一个元素，必须属于其中一种定位体系。不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异。
定位体系判定
3.盒模型和定位体系
尺寸是包含块尺寸的百分比：
盒模型中的尺寸 — auto：
尺寸受到定位体系的影响，不同的定位体系，auto的计算规则不一样。
4.常规流-盒模型中的auto值
常规流：又叫做普通流、文档流、普通文档流。常规流是最常见的定位体系，所有元素默认状态下都是常规流定位。
水平方向：常规流盒子水平方向上的尺寸，必须等于包含块的宽度
垂直方向：
盒子位置
5.浮动-盒模型中的auto值
浮动：当元素的float属性取值为left或right时，元素属于浮动定位
盒子位置
当常规流遇上浮动
常规流盒子和浮动盒子混合摆放
清除浮动：
对一个元素清除浮动，可以让该元素在摆放时，出现在浮动元素的下方
对最后一个子元素使用clear:both，可防止父元素高度坍塌
盒子的相对位置
相对位置，是指相对于盒子在原本定位体系下的位置，将盒子的position属性设置为relative，以启用相对位置。
绝对定位概述
通常情况下，元素的包含块是它父元素的内容盒（content-box），绝对定位元素除外。
绝对定位-auto和位置
盒子的位置
绝对定位中，盒子的位置由left、top、right、bottom四个属性决定，它们表示盒子离包含块边缘的距离。
盒模型中的auto值
堆叠级别：它决定了元素谁显示在前谁显示在后、通常情况下，堆叠级别越高，显示越靠前
通过z-index属性可设置元素的堆叠级别。
使用z-index属性时需要注意的：
块级格式化上下文：它规定了在该区域中，常规流块盒的布局
它是一块独立的渲染区域，
BFC渲染区域：这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
overflow不等于visible的块盒
不同的BFC区域，它们进行渲染时互不干扰
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
创建BFC的元素，它的自动高度需要计算浮动元素
创建BFC的元素，它的边框盒不会与浮动元素重叠
创建BFC的元素，不会和它的子元素进行外边距合并
标签：排列 使用 默认 mda bsp 格式 初始化 abs 记录
原文地址：https://www.cnblogs.com/tcq43356/p/11261470.html
