网页常见布局

---

一、标准文档流

在没有任何样式的修饰下，所有元素，将从上至下，从左至右进行排列

• 块级元素：独占一行，可以设置宽高大小
• 行级元素：从左往右依次排列，不能设置宽高和大小

二、脱离标准文档流

脱离标准文档流的方式有两种

浮动：左浮动、右浮动
定位：相对定位、绝对定位、固定定位

三、浮动布局

使用了浮动布局的元素会脱离标准文档流，并以当前位置为参照，向上浮动一层

可选值	说明
none	默认值 不浮动
left	浮动后从左往右排列，宽高由内容决定
right	浮动后从右往左排列，宽高由内容决定

清除浮动

控制当前的浮动元素是否与前一个浮动元素处于一行
clear: none;

可选值	说明
none	默认值 可以与浮动元素在一行
left	不与前一个左浮动的元素在一行
right	不与前一个右浮动的元素在一行
both	不与前一个浮动元素在一行

解决浮动以后父级塌陷的方式

1、直接给父级设置高度(禁用！)
2、给父元素设置overflow: hidden、auto、scroll （在没有对应的裁切需求情况下，可以使用）
3、在父级元素的内容最后添加块级元素，并清除浮动（写死了，会与后续JS冲突，不推荐使用）
4、使用伪类样式，在父级元素最后添加一个节点，原理与第三点一样，但因为是伪类样式动态添加，所以永远在最末尾

定位

可选值	说明
static	默认值 静态定位：没有定位，按照标准文档流进行布局
relative	相对定位：使用相对定位的盒子位置以标准文档流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对于定位的盒子仍在标准文档流中，其后的盒子仍以标准文档流方式对待它
absolute	绝对定位：首先向上层复元素查找，如果父元素存在定位（非静态定位），则以该复元素为准，再进行定位；如果没有找到，则再往上层找，直到最后以body为准进行定位
fixed	固定定位：它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变

控制属性

偏移控制属性
当我们使用绝对定位时，如果在不设置任何便宜属性的情况下，其位置默认处于父级元素内容大小的下方
left：以参照物左侧为参照，为正值表示向右偏移，为负值表示向左偏移，0表示紧贴 （参照物没有 padding 的情况下）

四、overflow：内容溢出

用于当元素中的内容，超出元素本身的边界时，对于超出部分内容的处理方式

可用值	说明
visible	默认值 内容不会被修剪，溢出的部分会呈现在盒子之外
hidden	内容会被修剪，溢出的部分不显示
scroll	内容会被修剪，浏览器会显示滚动条以便查看溢出的内容（无论是否有溢出的内容，均会显示滚动条，且显示两个方向）
auto	内容会被修剪，浏览器会显示滚动条以便查看溢出的内容（只有溢出的时候，才会显示滚动条，只会显示单边；上下溢出，显示垂直滚动条；左右溢出，显示水平滚动条）

五、弹性布局

设定为flex后，内部元素变为flex子项，会影响position的位置
子元素的float、clear、vertical-align属性将失效，子元素全部变为块级元素

属性

flex-direction 主轴排列方式

可选值	说明
row	默认值 主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在右端
column	主轴为垂直方向，起点在上沿
column-reverse	主轴为垂直方向，起点在下沿

flex-wrap 主轴排不下时的处理方式

可选值	说明
nowrap	默认值 不换行
wrap	换行
wrap-reverse	换行，行排列顺序与主轴反向

justify-content 子项在主轴上的对齐方式

可选值	说明
flex-start	默认值 起点对齐
flex-end	终点对齐
center	内容居中
space-between	内容两端对齐，子项之间的间隔相等
space-between	两端的子项与两侧的间隔相等，子项之间的间隔都相等且子项之间的间隔比子项与边框的间隔大一倍，且每行单独计算（用的较少）

align-items 交叉轴上的对齐方式

可选值	说明
stretch	如果子项未设置高度或设为auto，将占满整个容器的高度
flex-start	交叉轴的起始点对齐
flex-end	交叉轴的结束点对齐
center	交叉轴的中点对齐
baseline	子项的第一行文字的基线对齐

align-content 存在多条主轴轴线时，整体在交叉轴的对齐方式

可选值	说明
stretch	默认值 内容占满整个交叉轴
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的结束点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴的两端对齐，轴线之间的间隔平均分布

align-self 子项属性

调整单个子项的交叉轴的对齐方式

可选值	说明
center	从中心向两边
flex-start	对齐到自身主轴轴线的首端
flex-end	对齐到自身主轴轴线的尾端

六、媒体查询

根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果

语法

@media 媒体类型 and (媒体特性) {
	/*自定义样式*/
}

媒体类型可选值	说明
all	所有设备
screen	PC、平板、手机
print	打印机

常用媒体特性可选值	说明
min-width	最小宽度 媒体类型大于或等于指定高度时，样式生效
max-width	最大宽度 小于或等于
min-height
max-height

根据媒体不同引入不同的样式文件

<link rel="stylesheet" media="screen and (min-width:768px)" href="./css/index.css" />

七、响应式布局

响应式布局，为适应不同终端而形成的一种技术，其在媒体查询的基础上进行了升级

确保适当的绘制和触屏缩放

<meta name="viewport" content="width=device-width, initial-scale=1" />

添加user-scalable=no禁用缩放功能

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />