简介
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍👇
文章引导
- 标准流布局
- 浮动布局
- 定位布局
- 弹性布局
- 网格布局
- 多列布局
- 响应式布局
1. 标准流布局
“标准文档流”简称为“标准流”，默认按照文档的顺序从上到下，从左到右，遇块(块级元素)换行。
- 块级元素block，独占一行可以设置宽高，适用于垂直布局；
- 行内元素inline，与其他元素共享一行，不可以设置宽高，宽度由内容决定，适用于水平布局；（注：img是一个特殊的行内元素可设置宽高）
- 标准流的定位离不开两个属性margin & padding ，margin 影响相邻元素之间的距离，padding 影响边框和内容之间的空白区域；
- text-align 设置文本对齐方式，line-height 是行内元素用来调整行间距的，都可继承；（注：在一些安卓手机 line-height 会失效）
2. 浮动布局
float 浮动布局， 默认 none 关闭浮动，取 left/right 该元素就会向其容器元素的左/右边框平移，当碰到另外一个浮动的元素时停止平移，超出容器会自动换行，不可以继承。
（1）理解浮动
float存在多层结构布局里（见图1），可以理解为在原来页面上面多了一层放浮动的元素，但float只能左右移动不能上下移动。
- 脱离文档流，浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去，块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素；
- 行内元素不填充空位，有空隙就会插入；
- 不脱离文本流/不遮挡文本，有文字环绕效果（见图2）；
（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>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），网页可以适应不同设备。
响应式设计的步骤：
- 设置 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切换横屏之后触摸才能回到具体尺寸的问题。
- 设置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;}}
- 设置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）
扫一扫
6168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
