简介

布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍👇

文章引导

1. 标准流布局
2. 浮动布局
3. 定位布局
4. 弹性布局
5. 网格布局
6. 多列布局
7. 响应式布局

1. 标准流布局

“标准文档流”简称为“标准流”，默认按照文档的顺序从上到下，从左到右，遇块(块级元素)换行。

• 块级元素block，独占一行可以设置宽高，适用于垂直布局；
• 行内元素inline，与其他元素共享一行，不可以设置宽高，宽度由内容决定，适用于水平布局；（注：img是一个特殊的行内元素可设置宽高）
• 标准流的定位离不开两个属性margin & padding ，margin 影响相邻元素之间的距离，padding 影响边框和内容之间的空白区域；
• text-align 设置文本对齐方式，line-height 是行内元素用来调整行间距的，都可继承；（注：在一些安卓手机 line-height 会失效）

2. 浮动布局

float 浮动布局， 默认 none 关闭浮动，取 left/right 该元素就会向其容器元素的左/右边框平移，当碰到另外一个浮动的元素时停止平移，超出容器会自动换行，不可以继承。
（1）理解浮动
float存在多层结构布局里（见图1），可以理解为在原来页面上面多了一层放浮动的元素，但float只能左右移动不能上下移动。

• 脱离文档流，浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去，块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素；
• 行内元素不填充空位，有空隙就会插入；
• 不脱离文本流/不遮挡文本，有文字环绕效果（见图2）；

讯享网 图1-层叠上下文

图2-浮动与非浮动元素相邻

图3-高度塌陷

解决办法

• 创建BFC给父元素设置 overflow 值为 visible 或 clip，为 auto、scroll、hidden
• 通过伪元素选择器给父元素后追加内容，清除浮动

   div::after{ content: "";/*在父元素和子元素之间加入空内容，把他们间隔开*/ clear: both; display: block; } 

  
  讯享网

3. 定位布局

position 定位布局，有5个值，通过四个方向 top，right，bottom 和 left 决定元素位置。

• static 静态定位（默认），不脱离文档流，不能使用left…定位，一般用margin定位。
• relative 相对定位，不脱离文档流，根据本身的位置/当前元素所在位置进行定位。
• fixed 固定定位，完全脱离文档流(浮起来)不占据屏幕空间，可以对文本进行遮挡（可与float的特性对比学习），根据浏览器视口定位。
• absolute 绝对定位，完全脱离文档流，不占据屏幕空间，可以对文本进行遮挡，兄弟级的两个元素都设置绝对定位元素，会进行层级叠加，同时设置margin: 0 auto;失效，float不能使用，若父元素有定位属性relative或fixed或absolute，那么根据父元素进行定位，反之根据浏览器定位。
• sticky 粘性定位，可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。举个例子，在一个可以滚动的容器里（块1），设置sticky元素（块3）外再包裹一个约束容器（块2），dom结构：【块1【块2【块3】】】，至少3层，在块1滚动的时候，当块2完全在块1可视区域内，块3就表现为relative的效果随着块2一起滚动；当块2部分被卷入块1的滚动区域里并且剩余部分大于块3，块3就表现为fixed效果顶部紧贴块1顶部；继续滚动当块2剩余部分小于块3时，块3就表现为relative和块2一起卷入滚动区域里。

讯享网 article { 
    width: 100%; height: 180px; overflow: auto; /* 不能为hidden */ } article h4 { 
    position: sticky; /* 要sticky生效，要指定 top, right, top 或 bottom 中的任何一个值 */ top: 0; color: #fff; padding: 10px; } article div{ 
    background-color: lightskyblue; width: 100%; height: 80px; } 

 <article> <section> <h4 style="background-color: chocolate;">标题1</h4> <div>11111</div> </section> <section> <h4 style="background-color: cornflowerblue;">标题2</h4> <div></div> </section> <section> <h4 style="background-color: lightpink;">标题3</h4> <div></div> </section> </article> 

讯享网 z-index：改变元素的层叠顺序 谷歌取值范围： ------ - 

4. 弹性布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，由容器和项目组成，容器为父元素，项目为容器成员这里是子元素。容器有两个轴线：主轴和交叉轴呈90度关系。容器通过容器属性控制项目在两个轴线之间的排列，项目通过项目属性控制自身顺序和大小。给父元素设置 display:flex 变成弹性盒子容器。

• 容器属性

• 项目属性

5. 网格布局

Grid 网格布局，提供了带有行和列的基于网格的布局系统（类似二维坐标轴）。由容器和项目组成，容器是父元素，项目只能是容器的顶层子元素（和父元素紧挨的那层子元素）。容器根据列和行分成均匀网格，然后通过控制行，列，间隙设置网格大小，项目通过每个网格编号设置位置和大小。给父元素设置 display:grid / inline-grid 变成网格容器。

• 容器属性

• 项目属性

6. 多列布局

column 多列布局，指的就是您可以将文本内容分成多块，然后让这些块并列显示，类似于报纸、杂志那样的排版形式。

• 属性

• 列样式column-rule-style

7. 响应式布局

响应式布局（Responsive design），网页可以适应不同设备。

响应式设计的步骤：

1. 设置 Meta 标签

设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。

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

name=“viewport” 名称=视图
width=device-width 页面宽度=设备宽度(可以理解为获取你手机的屏幕宽度)
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。

2. 设置rem字体

一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。rem是css3新引入的单位,和em类似但对于Html元素，rem更方便使用。

html{font-size:100%;}完成后，你可以定义响应式字体：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

3. 设置Media Queries媒体查询

讯享网@media screen and (max-width: 360px) { 
    /* 当屏幕的宽度小于等于 360 px 的时候 html 的字体大小为 12 px */ html { 
    font-size: 12px; } } 

流体布局：总体宽度及其中所有栏的值都以百分比编写，百分比通过用户浏览器窗口的大小计算。

混合布局：混合布局组合两种其他类型的布局，弹性和流体。页面的总宽度为 100%,，但侧栏值设置为em单位。

2023css面试题
问：三栏自适应布局（两边宽度固定，中间自适应）实现思路？
答：①左右margin，中flex1；
②左右absolute，中margin；
③左float: left，中margin，右float: right；
④左中右float: left，中width: 100%，中子margin，左margin-left: -100%，右margin-left: -200px；
⑤calc
问：flex是哪些名称简写？
答：grow,shrink,basis的简写，grow控制元素扩大比例（0有多余空间不放大），shrink控制元素缩小比例（1空间不足时缩小），basis元素本身大小，flex默认值为0 1 auto，快捷值auto（1 1 auto）和 none（0 0 auto）