盒子的分类-元素是如何显示的
-
块级元素
占据所有可用宽度，以换行显示
通常用于较大的内容块，比如标题或结构化元素
-
行内元素
只占据内容所需的宽度，在同一行内一个接一个的摆放
通常用于较小的内容快，比如被选设置为粗体，斜体的一些词
盒子的分类：
一个元素产生什么样的盒子与它的display属性有关
背景图渲染从padding开始
盒子的组成：
由margin、padding、border、和content组成
边框盒组成：
由border、padding、content组成 固定定位：
相对于浏览器窗口的固定位置，不会随着用户的滚动而变化，脱离文档流
粘性定位：
依赖于用户的滚动，在相对定位与固定定位之间切换
指定top、left、right、bottom四个值其中之一，粘性才会生效
填充盒组成：
由padding、content组成
内容盒组成：
由content组成
overflow：溢出处理方式
可见的（默认情况）：overflow：visible
隐藏：overflow：hidden
滚动：overflow：scroll
p{
/* 内容显示默认 /
overflow: visible;
/ 隐藏 /
overflow: hidden;
/ 滚动 */
overflow: scroll;
}
box-sizing : content-box 默认内容盒
box-sizing：border-box 边框盒，会自动计算content的width和height p{ /* 默认情况 内容盒 / box-sizing: content-box; / 边框盒 自动计算content的width和height */ box-sizing: border-box; } 视觉格式化模型规定了三种定位体系
-
常规流（又叫做普通流、文档流、普通文档流 流式布局）
最常见的定位体系，所有的元素默认状态下都是常规流定位
盒子位置：
垂直方向：垂直方向上若两个外边距相邻，则折叠（水平方向不会折叠 ）
外边距相邻：两个外边距之间没有border、padding和content
合并：均为正数取最大，均为负数取最小，一正一负则相加
-
浮动
当元素的float属性值为left或right是元素为浮动元素
float：none 默认 不浮动
float: left 向上向左浮动
float: right 向上向右浮动
浮动盒子位置：
左浮动的盒子向上 向左排列
右浮动的盒子向上向右排列
浮动盒子的顶边不得高于上一个盒子的顶边
若放不下则换行
当常规流遇上浮动
浮动盒子在摆放时会避开常规流盒子
常规流盒子在摆放时，会无视浮动盒子
常规流盒子自动计算高度时，无视浮动盒子（也叫高度坍塌）
1.清除浮动（设置给最后一个常规流盒子）
对最后哦一个子元素使用clear：both，可防止父元素高度坍塌
例如： 父元素：after{
content:"";
display:block;
clear:both;
} .box6{ width: 200px; height: 100px; /* float: right; */ background-color: gold; clear: both; } 绝对定位
任何一个元素都必须属于其中某一种定位体系，不同的定位体系中，元素在包含块中的尺寸和位置都会有一些差异。 div{ /* 静态定位 默认值 / position: static; / 相对定位 / position: relative; / 绝对定位 / position: absolute; / 固定定位 / position: fixed; / 粘性定位 */ position: static; } 相对定位： 相对于盒子原来的位置偏移（设置上下左右的距离），原本多占空间不变，
没有脱离文档流
一般用来做绝对定位的元素
绝对定位： 当浮动元素被设置为绝对定位
元素的float属性会被强制改为none（float属性失效）
相对于设置了定位属性的父元素偏离（除了static），如果没有就相对于html元素偏移
脱离了文档流
子绝父相： 父元素位置发生变化，子元素跟着发生变化
使用z-index改变堆叠顺序，数值越大，堆叠在越上方
.box { height: 700px; width: 500px; border: 1px solid; position: relative; } a { text-decoration: none; color: #000; width: 60px; height: 30px; background-color: rgba(47, 79, 79, 0.479); text-align: center; line-height: 30px; position: absolute; } .d1 { left: 20px; } .d2 { left: 120px; } .d3 { left: 220px; } .d4 { left: 320px; } .d5 { left: 420px; } section { width: 500px; height: 400px; position: absolute; top: 100px; } .d1+section { background-color: deeppink; z-index: 1; } .d2+section { background-color: rgb(90, 20, 255); z-index: 2; } .d3+section { background-color: rgb(47, 255, 20); z-index: 3; } .d4+section { background-color: rgb(255, 87, 20); z-index: 4; } .d5+section { background-color: rgb(239, 255, 20); z-index: 5; } a:hover+section { z-index: 6; transition: all linear 1s; } .box1{ width: 100px; height: 200px; background-color: deepskyblue; position: fixed; right: 100px; top: 50px; }
