页面布局
1、常见的CSS布局单位
像素、百分比、em、rem、vw/vh
像素 px
css像素：在css中，px是逻辑像素，是一个抽象的单位，区别于屏幕上的物理像素。一个css像素不总是对应一个物理像素，例如在高分辨率显示器上，可能多个物理像素代表一个css像素。
物理像素：显示器上的实际的显示单元数量。如果显示器的分辨率是1920x1080，代表横向有1920个物理像素，纵向有1080个物理像素。
由此引申出设备像素比（Device Pixel Ratio, DPR）：物理像素与css像素的比率。例如，一个设备具有2倍设备像素比，代表每一个css像素由2x2=4个物理像素组成。注意，是2x2。
图片中的每一个像素，表示一个颜色信息。显示器中的每一个像素，表示最小的显示单元。PPI（ Pixels Per Inch ），描述的是显示设备中每英寸所包含的像素数量，数值越高，每英寸包含的像素越多，图像显示越细腻、清晰。
在高倍屏上，如果按照1比1，一个显示单元显示一个图片像素，显示的尺寸就会变小。
因此，为了显示出一致的图片大小，在操作系统层面，定义了逻辑分辨率 （虚拟分辨率），可以自定义，将物理像素分组。所以css中的px是逻辑像素。
百分比 相对单位
1、设置元素宽度和高度（相对于其父容器的尺寸）
2、设置内边距和外边距（相对于元素自身宽度计算）
3、使用绝对定位时（相对于定位父元素，即具有定位属性的父元素）
4、使用相对定位时（表现为将元素从原始位置进行相对偏移）
em 相对单位
相对于当前元素的字体大小计算的。
如果某个元素的字体大小是16px，那么1em就是16px。如果当前元素没有显式设置 font-size，那么它会继承其父元素的字体大小。如果父元素也没有设置，则会继承到浏览器的默认字体大小（通常是 16px，但这也可能因浏览器或用户设置而异）。
嵌套元素时有累计效应，因为它们的计算是相对于各自的父元素的字体大小。
例如，若父元素字体大小为 16px，子元素设置 font-size: 2em，那么子元素字体大小就是 32px；如果子元素内部还有嵌套的元素再次设置 font-size: 2em，那么这部分文字的字体大小就会是 64px，因为它是相对于其直接父元素（32px）计算的。
rem 相对单位
root em，始终相对于根元素的字体大小计算的。
无论元素在嵌套层级中有多深，使用 rem 单位时，它始终以根元素的 font-size 作为基准。避免累积效应。通过修改根元素的 font-size，可以很容易地调整整个页面的比例，进而实现响应式设计或主题切换。
vw/vh 视口单位
相对于浏览器视口（viewport）的尺寸进行计算。如果需要一个元素或背景图始终填满整个视口时，使用 100vw 或 100vh 能非常方便地实现全屏效果。
视口单位能让元素的尺寸根据当前浏览器窗口大小动态变化，适应不同设备和屏幕尺寸。
**vw (viewport width)**：
- 1vw 等于视口宽度的 1%。
- 例如，如果浏览器窗口宽度为 1000px，那么 1vw 就等于 10px。
**vh (viewport height)**：
- 1vh 等于视口高度的 1%。
- 如果浏览器窗口高度为 800px，那么 1vh 就等于 8px。
2、两栏布局的实现
一般两栏布局：左边一栏宽度固定，右边一栏宽度自适应。
1、浮动
左元素设置固定宽度200px，向左浮动；
右元素设置左边距200px，宽度auto，自动扩展到父元素的全部可用宽度。
1
2
3
4
5
6
7
8
9
10
11
12
13
| .outer {
height: 100px;
}
.left {
float: left;
width: 200px;
background: tomato;
}
.right {
margin-left: 200px;
width: auto;
background: gold;
}
|
2、浮动
左元素设置固定宽度200px，向左浮动；
右元素设置overflow: hidden; （触发BFC）
1
2
3
4
5
6
7
8
9
10
11
| .left{
width: 100px;
height: 200px;
background: red;
float: left;
}
.right{
height: 300px;
background: blue;
overflow: hidden;
}
|
3、Flex布局
左元素设置固定宽度200px
右元素设置flex:1
1
2
3
4
5
6
7
8
9
10
11
12
| .outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
flex: 1;
background: gold;
}
|
4、绝对定位
父元素相对定位
左元素设置固定宽度200px，absolute定位，
右元素设置左边距200px。
1
2
3
4
5
6
7
8
9
10
11
12
13
| .outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
background: tomato;
}
.right {
margin-left: 200px;
background: gold;
}
|
5、绝对定位
父元素相对定位
左元素设置固定宽度200px
右元素设置左定位200px，absolute定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .outer {
position: relative;
}
.left {
width: 200px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 200px;
background: gold;
}
|
3、三栏布局的实现
一般是指左右侧固定，中间自适应布局。
1、浮动
左栏、右栏固定宽度，并分别设置左浮动、右浮动。
中间栏设置左右外边距。（中间元素必须放在最后，保证浮动元素先渲染好。否则在渲染时可能不会“看到”后续的浮动元素，从而其宽度和位置计算会出错，导致布局混乱。）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| .outer {
height: 100px;
}
.left {
float: left;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: right;
width: 200px;
height: 100px;
background: gold;
}
.center {
height: 100px;
margin-left: 100px;
margin-right: 200px;
background: lightgreen;
}
|
2、flex布局
左栏、右栏固定宽度，中间栏设置flex:1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .outer {
display: flex;
height: 100px;
}
.left {
width: 100px;
background: tomato;
}
.right {
width: 100px;
background: gold;
}
.center {
flex: 1;
background: lightgreen;
}
|
3、绝对定位
左栏、右栏固定宽度
中间栏设置左右外边距。（中间元素必须放在最后）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| .outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background: gold;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
background: lightgreen;
}
|
4、圣杯布局
父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| .outer {
height: 100px;
padding-left: 100px;
padding-right: 200px;
}
.left {
position: relative;
left: -100px;
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: relative;
left: 200px;
float: right;
margin-left: -200px;
width: 200px;
height: 100px;
background: gold;
}
.center {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
|
5、双飞翼布局
双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| .outer {
height: 100px;
}
.left {
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: left;
margin-left: -200px;
width: 200px;
height: 100px;
background: gold;
}
.wrapper {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
}
|
4、水平垂直居中的实现
1、绝对定位
父元素相对定位，子元素绝对定位，将元素的左上角通过 left: 50%;和 top: 50%;;移动到父元素中心。
再通过 transform: translate(-50%, -50%);调整到中心。
1
2
3
4
5
6
7
8
9
10
| .parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
|
2、绝对定位
父元素相对定位，子元素绝对定位，四个方向定位0，margin：auto。
盒子要有宽高。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .parent {
position: relative;
height: 200px;
background-color: brown;
}
.child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 200px;
margin: auto;
background-color: aqua;
}
|
3、绝对定位
父元素相对定位，子元素绝对定位，将元素的左上角通过 left: 50%;和 top: 50%;;移动到父元素中心。
再通过 margin-left: -100px; margin-top: -100px;调整到中心。
1
2
3
4
5
6
7
8
9
10
11
| .parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
|
4、flex布局
1
2
3
4
5
| .parent {
display: flex;
justify-content:center;
align-items:center;
}
|
5、如何根据设计稿进行移动端适配？
1、设置视口
将页面的宽度设置为设备的宽度，页面首次加载时按照1:1的比例进行显示（不进行缩放）。
1
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2、设计稿通常会以某个固定宽度（例如 375px、750px 等）为基准，按这个基准进行布局和计算，然后通过媒体查询或相对单位（百分比、em、rem、vw/vh）来适配不同尺寸的设备。
1
2
3
| @media (max-width: 768px) {
}
|
3、响应式布局。弹性盒子（Flexbox）与 CSS Grid，自适应父容器，适合处理多列布局、居中等需求。
4、图片和资源优化。根据不同屏幕分辨率准备多份图片（如使用 srcset 或 picture 标签），避免高分辨率设备加载低质量图片。使用 CSS Sprites、懒加载等技术，提升加载效率。
6、对Flex布局的理解及其使用场景
Flex 布局（弹性盒子布局）是 CSS3 引入的一种布局方式。在 Flex 布局中，子元素之间的垂直边距不会发生传统的“边距折叠”现象。
Flex 容器：通过在父元素上设置 display: flex（或 display: inline-flex）将其变为 Flex 容器，其直接子元素自动成为 Flex 项目。
Flex 项目：Flex 容器内的直接子元素，受 Flex 布局的控制。
主轴（Main Axis）：默认情况下，Flex 容器的主轴是水平方向（从左到右），但可以通过 flex-direction 改变为垂直方向。
交叉轴（Cross Axis）：与主轴垂直的方向。例如，当主轴为水平时，交叉轴即为垂直方向。
以下6个属性设置在容器上：
- flex-direction属性决定主轴的方向（即项目的排列方向）。
- flex-wrap属性定义，如果一条轴线排不下，如何换行。
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
- justify-content属性定义了项目在主轴上的对齐方式。
- align-items属性定义项目在交叉轴上如何对齐。
- align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
以下6个属性设置在项目上：
- order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
- flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
7、flex:1 表示什么
flex是 flex-grow、 flex-shrink、 flex-basis的简写，默认值为1，1，0%。
ex-grow: 1
表示该项目可以“增长”，即在有剩余空间时，它会按照比例分配这些空间。
flex-shrink: 1
表示该项目可以“收缩”，即在空间不足时，它会按照比例缩小。
flex-basis: 0
表示分配剩余空间时的初始基础值为 0。
使用 flex: 1 后，Flex 项目会平分父容器中所有可用的剩余空间，同时在容器空间不足时能等比例收缩，达到自适应布局的效果。
flex: auto; 等价于1,1，auto。
使用 flex: auto 后，Flex 项目会首先根据自身内容或设定的尺寸来确定基础大小，然后在父容器有多余空间时，按比例增长；反之，在空间不足时，按比例缩小。这种设置既保留了元素的自然尺寸，又使其具备灵活调整的能力。
8、响应式设计的概念及基本原理
响应式设计是一种 web 设计方法，旨在使网页在各种设备和屏幕尺寸下都能获得良好的显示效果和用户体验。其基本思想是根据用户所用设备的屏幕大小、分辨率以及方向等动态调整布局和样式，而无需为每种设备单独开发页面。
采用相对单位、流式布局、媒体查询、优化图片资源、视口设置等。
9、实现“品” 字布局
1、浮动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| div{
width:100px;
height:100px;
font-size:40px;
line-height:100px;
color:#fff;
text-align:center;
}
.div1{
background:red;
margin:0 auto;
}
.div2{
background: green;
float:left;
margin-left: 50%;
}
.div3{
background: blue;
float:left;
margin-left: -200px;
}
|
2、inline-block实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| div{
width:100px;
height:100px;
font-size:40px;
line-height:100px;
color:#fff;
text-align:center;
}
.div1{
background:red;
margin:0 auto;
}
.div2{
background: green;
display: inline-block;
margin-left: 50%;
}
.div3{
background: blue;
display: inline-block;
margin-left: -200px;
}
|
10、实现九宫格布局
1、flex布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| ul {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
li {
width: 30%;
height: 30%;
margin-right: 5%;
margin-bottom: 5%;
}
li:nth-of-type(3n){
margin-right: 0;
}
li:nth-of-type(n+7){
margin-bottom: 0;
}
|
2、grid实现
1
2
3
4
5
6
7
8
| ul {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 30% 30% 30%;
grid-template-rows: 30% 30% 30%;
grid-gap: 5%;
}
|
3、float实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| ul {
width: 100%;
height: 100%;
overflow: hidden;
}
li {
float: left;
width: 30%;
height: 30%;
margin-right: 5%;
margin-bottom: 5%;
}
li:nth-of-type(3n){
margin-right: 0;
}
li:nth-of-type(n+7){
margin-bottom: 0;
}
|
4、inline-block实现
注意：将 li 元素设置为 display: inline-block 时，HTML 中元素之间的换行、空格等空白字符会被浏览器当作文本节点渲染，从而在元素之间产生额外的空隙。
在 ul 上设置 letter-spacing: -10px;，会使得这些空白字符的宽度减少，从而“收紧”相邻的 inline-block 元素，使它们之间的间隔缩小或消失。这是一种常见的 hack 技巧，用于调整 inline-block 元素间因空白导致的不期望的间隙。
另一种常见的解决方案是将父元素的 font-size 设置为 0，然后在子元素中重新设置合适的 font-size。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| ul {
width: 100%;
height: 100%;
letter-spacing: -10px;
}
li {
width: 30%;
height: 30%;
display: inline-block;
margin-right: 5%;
margin-bottom: 5%;
}
li:nth-of-type(3n){
margin-right: 0;
}
li:nth-of-type(n+7){
margin-bottom: 0;
}
|
5、table实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .table {
width: 100%;
height: 100%;
display: table;
border-spacing: 10px;
}
li {
display: table-row;
}
div {
width: 30%;
height: 30%;
display: table-cell;
text-align: center;
border-radius: 5px;
background: skyblue;
}
|