简介

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

文章引导

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-浮动与非浮动元素相邻

（2）高度塌陷
当浮动元素高度超出容器元素的时候，容器高度不会自动拉伸来闭合浮动元素（见图3）。（ 闭合浮动原理及方法）

图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>222222</div>
        </section>
        <section>
            <h4 style="background-color: lightpink;">标题3</h4>
            <div>333333</div>
        </section>  
    </article>

   z-index：改变元素的层叠顺序
		谷歌取值范围：2147483647 ------ -2147483648

4. 弹性布局

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

• 容器属性

名称	含义	值
flex-direction	指定弹性盒子中子元素的主轴方向	row,row-reverse,column,column-reverse,initial,inherit
flex-wrap	设置当弹性盒子的子元素超出父容器时是否换行	nowrap,wrap,wrap-reverse,initial,inherit
flex-flow	flex-direction 和 flex-wrap 两个属性的简写，语法：flex-flow: flex-direction flex-wrap;	eg:flex-flow: row-reverse wrap;
justify-content	设置弹性盒子中元素在主轴方向上的对齐方式	flex-start,flex-end,center,space-between,space-around,initial,inherit
align-items	设置弹性盒子中元素在交叉轴方向上的对齐方式	flex-start,flex-end,center,space-between,space-around,stretch,baseline,initial,inherit
align-content	修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐	flex-start,flex-end,center,space-between,space-around,stretch,initial,inherit

• 项目属性

名称	含义	值
order	设置项目在容器中出现的顺序，语法：order: number;	eg:order: 5;
flex-grow	设置项目相对于其他项目的增长量	默认为0，即有多余空间时也不放大
flex-shrink	设置项目相对于其他项目的收缩量	默认为1，即空间不足时缩小
flex-basis	项目的长度	为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 “%”、“px”、“em” 等单位的形式
flex	grow,shrink,basis的简写	默认默认值为0 1 auto，快捷值auto（1 1 auto）和 none（0 0 auto）
align-self	设置某项目不同于其它项目的对齐方式	flex-start,flex-end,center,space-between,space-around,stretch,baseline,initial,inherit,auto(默认继承父align-items，没父为stretch)

5. 网格布局

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

• 容器属性

名称	含义	值
grid-template-columns	定义网格布局中的列数，列宽	设置四列不同宽度 grid-template-columns: 80px 200px auto 40px;
grid-template-rows	定义行数，每列的高度	设置两行不同高度 grid-template-rows: 80px 200px;
justify-content，align-content	整个内容区域在容器里面的水平位置，垂直位置	start ,end,center,stretch,space-around,space-between,space-evenly
justify-items，align-items	单元格内容的水平位置，垂直位置	start ,end,center,stretch
place-items	设置 align-items 和 justify-items 的简写	–
grid-column-gap,grid-row-gap	列间距，行间距	–
grid-gap	grid-row-gap 和 grid-column-gap 属性的简写，语法：grid-gap : grid-row-gap grid-column-gap	eg:行列间隙不同grid-gap: 50px 100px;行列间隙共用grid-gap: 50px;
grid-template-areas	引用命名的网格项目搭配grid-area使用，一个区域由一个或者多个单元格组成，每行由撇号（’ '）定义，每行中的列都在撇号内定义，并以空格分隔	myArea为grid-area命名的网格项目，句号表示没有名称的网格项目①grid-template-areas: ‘myArea myArea . . .’;②grid-template-areas:‘header header header header header header’ ‘menu main main main right right’ ‘menu footer footer footer footer footer’;
grid-auto-flow	划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格	–

• 项目属性

名称	含义	值
grid-column-start, grid-column-end	开始列数，结束列数	–
grid-column	grid-column-start 和 grid-column-end 属性的简写，语法： grid-column : grid-column-start / grid-column-end，或使用关键字 “span” 来定义该项目将跨越多少列	eg:第1列开始到第5列结束（不包含第5列）grid-column: 1 / 5;从第1列开始跨3列grid-column: 1 / span 3;
grid-row-start, grid-row-end	开始行数，结束行数	–
grid-row	同grid-column类似	–
grid-area	作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写，也可以用于为网格项目分配名称搭配grid-template-areas使用	eg:grid-area: myArea;
justify-self, align-self, place-self	单元格内容的水平位置，垂直位置	start ,end,center,stretch
place-self	justify-self 和 align-self的简写	–

6. 多列布局

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

• 属性

名称	含义	值
column-width	指定列的宽度	auto，length（px）
column-count	列数	number，auto（默认）
columns	column-width 与 column-count 的简写	–
column-gap	列间距	length（px）,normal（em，根据font-size）
column-rule	列规则column-rule-* 属性的简写，可设置宽度column-rule-width样式column-rule-style 颜色column-rule-color	eg:column-rule:4px outset #ff00ff;
column-fill	指定如何填充每个列	balance（默认,列高差不多），auto（按顺序对每个列进行填充，列高不同）
column-span	指定元素应该横跨多少列	none（不跨），all（跨所有列）

• 列样式column-rule-style

值	描述
none	不定义边框样式
hidden	隐藏边框样式
dotted	定义点状边框
dashed	定义虚线边框
solid	定义实线边框
double	定义双实线边框
groove	定义 3D grooved 边框，边框效果取决于宽度和颜色值
ridge	定义 3D ridged 边框，边框效果取决于宽度和颜色值
inset	定义 3D inset 边框，边框效果取决于宽度和颜色值
outset	定义 3D outset 边框，边框效果取决于宽度和颜色值

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更方便使用。

rem是相对于根元素的，不要忘记重置根元素字体大小。
rem 指的是 html 元素的 font-size。html的font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应。

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 Queries是响应式设计的核心。它能够和浏览器进行沟通，告诉浏览器页面如何呈现。先写非响应式布局，页面固定宽度大小，再添加媒体查询（Media Query)和响应式代码。这种操作更容易实现响应式特性。
css2 允许用户根据特定的 media 类型定制样式，基本语法如下

@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）