【前端知识梳理-CSS】css布局基础
css基础盒模型
1.内联盒子和块级盒子
这个其实不用多说，基本上每个前端人都了解，简单介绍其特点。
内联盒子：
- 不换行
- 有些样式不支持 比如：width、height
- 宽度由内容区决定
- 可能同时占多行，所占区域不规则
- 内联标签之间会有空隙
块级盒子：
- 独占一行
- 规则矩形区域
- 支持所有样式
- 不写宽度时，宽度同父元素
2. 标准盒模型和怪异盒模型
首先我们应该都是了解盒模型的，它由content + padding + border + margin四个属性构成。
在标准盒模型中，如果设置了一个元素的width，那么实际上是设置它的content，并不包含其他三个属性。即 content = width，所以实际上盒子的大小会是width + padding + border。
在怪异盒模型（或者IE盒模型） 中则有所不同，如果设置了一个元素的width，那么实际上是设置它的content+padding+border的值。即 content+padding+border = width，以实际上盒子的大小就是width。
盒模型切换可以通过css的box-sizing这个属性来设置，标准盒模型是浏览器的默认模型，值为content-box，而怪异盒模型的值为border-box。
布局
自适应布局
对于块级盒子来说，宽度是由父元素决定的，在不设置宽度的情况下，宽度等于父元素宽度，并且随着父元素的宽度变化而变化。即使这个元素包含margin、border、padding，总宽度仍不会超过父元素，也就是自动将内容区缩小。如图：
根据这个特性，可以很灵活地做自适应的布局，比如左侧固定侧边栏，右侧自适应宽度，我们可以借助这个特性去布局右侧内容区，核心在于不设置宽度，通过margin、border、padding来定义样式。
浮动布局
float的特性
- 脱离原文档流，显示到正常文档流上方，也就是显示层级提升
- 仅影响后面的元素
- 后面的元素的文本不会被浮动元素覆盖（围绕浮动元素）
- 块级浮动元素具备内联盒子特性：宽度由内容决定
- 内联元素浮动会具备块级盒子特性：支持width等属性
- 多个浮动元素一行放不下会自动换行
弹性布局
弹性布局是现在的主流布局，因为本身不会有一般布局的缺陷，比如高度塌陷、边距重叠等。其特点就是盒子内的元素具有可伸缩性。
主轴和交叉抽
- 由
flex-direction属性决定，默认为值为row，即主轴为文字书写方向，一般为横向，那么交叉轴就是竖向 - 当
flex-direction属性带有column时，则主轴方向与交叉轴和row时相反
几个对齐方式
align-items弹性盒子内所有元素在交叉轴的对齐方式，对row方向来说，此属性就是垂直方向上所有元素的对齐方式。默认值为stretch,盒子在交叉轴方向被拉伸至等高justify-content弹性盒子内所有元素在主轴的对齐方式，对row方向来说，此属性就是水平方向上所有元素的对齐方式align-content定义多行弹性盒子在纵轴的对齐方式 对单行无效，即flex-wrap:nowrap无效align-self自身元素在交叉轴的对齐方式 与align-items作用相同，但是需要加在子元素上
flex系属性
1. flex
flex是以下属性的简写：
-
flex-grow 非负
Number元素伸展属性，增长系数，表示如何利用剩余空间进行拉伸（当存在剩余空间时）。
-
flex-shrink 非负
Number元素收缩属性，收缩系数，表示如何对元素本身进行收缩（当空间不足时）。
-
flex-basis 定于元素主轴方向的初始大小。优先级大于width/height
flex: 1;
// 相当于
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
flex: 0;
// 相当于
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;
flex: auto;
// 相当于
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
总结：
- 当flex仅设为一个数字时，实际上是改变
flex-grow的值 - 当flex设为auto时，实际设置的是
flex-basis的值, 因为flex-grow和flex-shrink不支持非数字的值。 - 当
flex-grow为0时，width属性失效，元素宽度跟随内容，无内容则宽度为0 - 当我们不想让某个元素被压缩，可以设置
flex-shrink为0
2. flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
定位
关于poition的属性值包括static（默认值）、relative、absolute、fixed、sticky这5种。
我们先来看几个问题
- 绝对定位元素相对什么元素进行定位？
- 绝对定位元素的top、left等属性与参考元素的content对齐吗？（是否包含padding、border）
- 当嵌套元素同时存在z-index时，以哪个为准？
- sticky定位如何使用？
定位参照物
对于绝对定位的元素，我们知道它是脱离正常文档流的，脱离文档流后的表现与float元素一样，但是它可以自定义偏移位置，参考的是最近的非static的定位祖先元素。也就是说其他四个值均可。如果找不到定位祖先元素，那么顶级文档。
定位盒模型
关于对齐的盒模型，我们通过代码来看，box1的子元素box2都设置margin、padding、border，并且都设为绝对定位，看看box2的绝对定位是如何对齐父元素的？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 600px;
height: 400px;
background-color: green;
border: solid 10px #000;
margin: 20px;
padding: 20px;
position: absolute;
}
.box2 {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 200px;
border: solid 10px #000;
margin: 20px;
padding: 20px;
background-color: bisque;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
结果如图：
我们可以得出结论，在绝对定位时，绝对定位元素的margin会对齐到祖先定位元素的padding。
定位层级
同样地，我们添加box3元素，与box1同级，分别设置他们的z-index属性可以得出如下结论：
- 不设置任何z-index时，默认后面的绝对定位元素会覆盖在前面的定位元素之上
- 当祖先定位元素设置z-index属性,并且高于同级定位元素时，则祖先定位元素及其子元素都显示在同级定位元素之上，不管内部元素的层级多小
- 当祖先定位元素没有z-index属性时，（z-index:0也不行）那么子定位元素的层级属性会同外部元素层级进行比较，大于外部的话，则这个子元素会显示在外部定位元素之上，否则，显示在外部定位元素之下，但始终在父定位元素之上
- 当祖先元素设置z-index属性,并且低于同级定位元素时，则祖先定位元素及其子元素都显示在同级定位元素之下，不管内部元素的层级是多大
sticky应用
关于粘性定位sticky，可以理解为相对定位和固定定位的混合。
那么，如何使用它呢？
既然它是两种定位的混合，那么这个临界点是如何界定的呢？实际是通过top、left、bottom、right这四种阈值来界定的
比如：
#one {
position: sticky;
top: 10px;
}
sticky定位关键要素：
- 必须配合阈值来使用才能生效
- 这里的top值指的是viewport与元素的上边缘（即border）对齐后的距离
- 未对齐之前，即这个距离大于top指定的值时，元素为relative定位
- 对齐之后，即这个距离小于top指定的值时，元素为fixed定位，并且这个top值作为固定定位值指定元素所在位置
BFC 块级格式化上下文
BFC(block formating contexts)即块级格式化上下文，可以理解为一种渲染规则，它是页面渲染过程中比较重要的一个概念。具有BFC特性的盒子会被浏览器作为一个独立的盒子进行渲染，容器里面的元素不会在布局上影响到外面的元素。
它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC触发条件
满足以下条件之一，即可触发BFC：
-
float的值不是none
-
position的值不是static或者relative
-
display的值是flex、grid、inline-block、inline-flex、inline-grid、inline-table、table、table-cell、table-caption或者table-row
-
display是flow-root 这是一个新的
display属性的值，它可以创建无副作用的 BFC -
overflow的值不是visible或clip
使用场景
通过触发BFC可以改变布局，通常会对定位或清除浮动的元素创建新的BFC
-
包含内部浮动
父元素中有浮动子元素时，父元素高度会塌陷，即父元素高度不包含浮动子元素，为了使父元素高度可以包含子元素，给父元素创建新的BFC即可
-
排除外部浮动
在进行双列布局时，一列为浮动固定宽度的元素时，另一列元素的宽度默认仍然包含浮动元素的宽，导致此列元素被浮动元素覆盖一部分，为了使另一列元素自动排除浮动元素的宽度显示，可以为这一列的元素创建BFC
-
解决外边距重叠
当相邻块同时有外边距时，块与块之间的边距会重叠一部分，以较大的边距作为两个块之间的距离，同样地，这种情况也发生在父子块之间，为了解决这种问题，直接将父元素设置为BFC布局，或在相邻块外层新建BFC即可
查看9道真题和解析
