pc端移动端常见页面布局方式_pc端如何布局手机端-CSDN博客

本文链接：https://blog.csdn.net/weixin_53125457/article/details/111580004

本文介绍了前端开发中常见的三种布局方式：圣杯布局、双飞翼布局和弹性盒子布局。圣杯布局通过负margin实现左右固定宽度，中间自适应的效果；双飞翼布局则在中心部分增加一个内嵌div，利用margin实现布局；弹性盒子布局适用于移动端，通过flex属性轻松实现响应式设计。此外，还提到了移动端布局的响应式、视口概念以及流式布局等策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

圣杯布局

左右两端宽度固定，中间center宽度自适应。
布局方法：
1、在主体内部外嵌套一个div
2、center在结构里面要靠前
3、centere,left,right，设置浮动
4、清除浮动
5、center的宽度为100%，left，right的宽度固定
6、left通过margin-left为负值（-100%），移动到center的最左边
7、right通过margin-left为负值（自身的宽度），移动到center的最右边
8、center的内容会被left，right遮盖
9、最外层的div添加一个padding，padding的宽度为left，right的宽度
10、left，right相对定位，移动到相应的位置，位移的量为自身的宽度。

在这里插入图片描述

 <style>
        * {
            position: 0;
            margin: 0;
        }
        
        body {
            font-size: 40px;
            min-width: 700px;
        }
        
        header,
        footer {
            width: 100%;
            height: 50px;
            background-color: darkcyan;
            text-align: center;
            line-height: 50px;
        }
        
        .content {
            padding: 0 200px;
            text-align: center;
            line-height: 300px;
        }
        
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        
        .center,
        .left,
        .right {
            float: left;
            height: 300px;
        }
        
        .left {
            width: 200px;
            background-color: darkgoldenrod;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        
        .center {
            width: 100%;
            background-color: darkgreen;
        }
        
        .right {
            width: 200px;
            background-color: darkmagenta;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>


<body>
    <header>header </header>
    <div class="content clearfix">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer>footer</footer>
</body>

双飞翼布局

左右两端宽度固定，中间center宽度自适应。

在这里插入图片描述

布局方法：
1、让left，right，center浮动
2、设置left的margin-left值为-100%
3、设置right的margin-left为负值，值为自身宽度
4、在center中添加一个div 将内容写在这个div中
5、为这个div添加一个margin，左右margin值为left，right的宽度。

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        header,
        footer {
            width: 100%;
            height: 50px;
            background-color: darkseagreen;
        }
        
        .center {
            width: 100%;
            background-color: deeppink;
        }
        
        .left,
        .right,
        .center {
            float: left;
            height: 300px;
        }
        
        footer {
            clear: both;
        }
        
        .left,
        .right {
            width: 200px;
            background-color: darkslateblue;
        }
        
        .left {
            margin-left: -100%;
        }
        
        .right {
            margin-left: -200px;
        }
        
        .item {
            margin: 0 200px;
        }
    </style>

<body>
    <header>header </header>
    <div class="center">
        <div class="item">item</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
    <footer>footer </footer>
</body>

在这里插入图片描述

弹性盒子布局

在这里插入图片描述

  <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        header,
        footer {
            width: 100%;
            height: 50px;
            background-color: deeppink;
        }
        
        .content {
            height: 300px;
            display: flex;
            background-color: firebrick;
        }
        
        .center {
            background-color: forestgreen;
            flex-grow: 1;
        }
        
        .left,
        .right {
            width: 200px;
            background-color: deepskyblue;
        }
        
        .left {
            order: 1;
        }
        
        .center {
            order: 2;
        }
        
        .right {
            order: 3;
        }
    </style>

<body>
    <header>header </header>
    <div class="content">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer>footer</footer>
</body>

在这里插入图片描述

移动端布局

移动端布局：
1.响应式网站比较小，代码量不多
2.分别开发两套代码大型网站

视口：
布局视口网页的宽度
视觉视口用户可以看到的网站的区域
理想视口视觉视口=布局视口

 **不同的移动设备因为分辨率，屏幕尺寸等问题，造成视觉视口不同，那么理想视口也会不同。**

流式布局（百分比布局）
设置宽度为百分比，
标准文档流+浮动：
宽：相对于父盒子内容宽度的比值。
高：相对于父盒子内容高度的比值。
padding/margin：相对于父盒子内容宽度的比值。
绝对定位：
宽/padding/margin：相对于定位盒子的宽+左右padding的比值。
高：相对于定位盒子的高+上下padding的比值。
```
 【注】border：不能使用百分数。
```