主要内容：
<!--
移动端的布局：浮动+定位+标准流
移动端：不需要考虑兼容性问题，
谷歌模拟器
分辨率
二倍图
视口：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
布局视口
视觉视口
理想视口
手机端百分比布局
flex布局
主轴：justify-content
侧轴: align-items
圣杯布局：两边大小固定不变，中间宽度自适应
-->
利用 flex 让盒子进行水平、垂直居中
案例：
<style>
.fa{
width: 600px;
height: 600px;
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
</body>
圣杯布局
案例：
<style>
.box{
width: 100%;
height: 50px;
background-color: aqua;
display: flex;
}
.left{
width: 50px;
height: 50px;
background-color: red;
}
.center{
flex: 1;
height: 50px;
background-color: yellowgreen;
}
.right{
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
————————————————
版权声明：本文为CSDN博主「CSDNweb92」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/CSDNweb92/article/details/125265858
扫一扫
391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
