【摘要】网页布局方式考必过小编为大家整理了关于网页布局方式的信息，希望可以帮助到大家！

网页布局方式

标签：ant参数roundtlemedia填充pac局限html

网页布局的那些样儿

固定布局

流式布局

赋能行业回馈老用户-免费领1门建筑业技能课

¥0

去购买

弹性布局

网格grid布局

自适应布局

响应式布局

伸缩布局

固定布局

固定布局（Fixed Layout）：网页上所有的元素宽度以像素（px）为单位，不用去在乎什么设备什么浏览器，都是用同一套尺寸去进行布局。在不同环境下的状态时相同的，最常见PC端网页上。

流式布局

流式布局（Liquid Layout）：元素的宽度按照屏幕分辨率自动进行适配调整，保证当前屏幕分辨率发生改变的时候，页面中的元素大小也可以跟着改变。移动端一般采用流式布局（百分比布局）

左侧固定，右侧自适应等

两侧固定，中间自适应（圣杯布局）

等分布局

（1）左侧固定，右侧自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .father {
        display: flex;
        height: 800px;
        background-color: pink;
    }

    .left {
        width: 200px;
        height: 300px;
        background-color: red;
    }

    .right {
        flex: 1;
        height: 500px;
        background-color: green;
    }
</style>

<body>
    <p class="father">
        <p class="left"></p>
        <p class="right"></p>
    </p>
</body>

</html>

（2）两边固定，中间自适应

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            height: 800px;
            background-color: pink;
            margin-left: 200px;
            margin-right: 200px;
        }

        .left {
            width: 200px;
            height: 400px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }

        .right {
            width: 200px;
            height: 600px;
            background-color: green;
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <p class="father">
        <p class="left"></p>
        <p class="right"></p>
    </p>
</body>

</html>

（3）等分布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        p {
            overflow: hidden;
        }

        p {
            width: 25%;
            float: left;
            pst-style: none;
            background-color: pink;
            height: 200px;
            border: 1px sopd #000;
        }
    </style>
</head>

<body>
    <p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </p>
</body>

</html>

弹性布局

　弹性布局跟流布局很像，网页宽度不固定，使用em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。但弹性布局也有局限性，如果不对这种布局设置一个最小宽度，当用户缩小窗口到足够小时会造成布局严重错位。（插件flexible.js）。

　　rem 结合vw进行移动端适配

　　　设计图为640px情况下：

　　　　dpr=2

　　　　640px/2=320px

　　　　100vw=320px

　　　　1vw=3.2px

　　　　100px/3.2px=31.25vw

　　　　font-size：31.25vw;

总结

　　设计图640px

　　　　html{　　font-size：31.25vw；}

　　设计图750px

　　　　html{　　font-size：26.67vw；}

　　移动端可以直接加*{box-sizing：border-box；}

　　不用再去对border和padding相减

　　移动端:

　　1、准备工作

　　　　1: meta标签的设置(禁止缩放)

　　　　2: dpr设备像素比

　　　　3: rem单位 vw单位

　　vw 结合 rem实现移动端适配

　　　　设计图为 640px html{ font-size:31.25vw; }

　　　　设计图为 750px html{ font-size:26.67vw; }

　　　　　rem的设置流程:

　　　　设计图中的大小 / dpr / html的font-size == rem

　　2、分两列的内容宽度写成百分比

　　　　flexible.js

　　　　流程：

　　　　　　1:引入插件 flexible.js

　　　　　　2:删除视口代码 mate

　　　　　　3：设计图的大小 /100==rem

网格grid布局

在我们的Web内容中，可以将其分割成很多个内容块，而这些内容块都占据自己的区域(regions)，可以将这些区域想像成是一个虚拟的网格。到目前为止，在一个模板中使用不同的结构标签，使用多个浮动和手动计算实现一个布局。这对于Web前端人员来说，这是一件痛苦之事。而网格布局将让你摆脱这样的困局，让你的布局方法变得非常简单与清晰。
　　网格布局给了我们一种方法——创建的结构与使用表格(table)布局并没有什么不同。然而，他是在CSS中实现而不是在HTML中实现，同时还可以依赖于媒体查询根据不同的上下文得新定义布局。这对于喜欢响应式设计的同学来说是一个绝对利好的消息。因为你不在需要再担心你的HTML结构而影响你的布局。
　　网格布局还可以让我们摆脱现在布局中存在的文档流限制，换句话说，你的结构不需要根据设计稿从上往上布置了。这也意味着您可以自由地更改页面元素位置。这最适合你在不同的断点位置实现你最需要的布局，而不再需要为响应你的设计而担心HTML结构的问题。

网格布局

1、触发网格布局：

　　display：grid；（父元素）

2、设置几行几列

　　grid-template-columns：；

　　grid-template-rows：；

　　根据属性值的个数确定行列数，属性值可以使百分比，也可以是具体像素

3、关键字 repeat（参数1，参数2）

　　参数1：重复几次

　　参数2：列宽或行高

　　如：grid-template-columns：repeat（3,200px）；

4、关键字 auto-fill

　　在repeat（auto-fill）：不确定重复多少次

　　当容器不确定的情况下，不能用

5、关键字 fr（片段，分数）

　　注意：列宽的分数

　　如：grid-template-columns：1fr，2fr，3fr；

6、minmaix（最小最大）

　　列宽最小不低于多大，最大不超过某一直

7、关键字

　　auto：自动填充

8、设置行间距和列间距

　　grid-row-gap：；

　　grid-colum-gap：；

　　　　grid-gap：；

9、规定元素占有的网格区域

　　grid-templete-areas：“a b c”“”；

　　注意：网格里面每个元素必须通过grid-area：；指定名称

10、排列顺序

　　　grid-auto-flow：；colum、row

11:设置每一个内容在单元格内部的对齐方式:

justify-items: start | end | center | stretch;

apgn-items: start | end | center | stretch;

place-items: <justify-items> <apgn-items> /*复合式写法*/

12:设置整个内容区域在容器里面的水平 | 垂直对齐方式

space-between | space-evenly;

space-between | space-evenly;

place-content: <justify-content> <apgn-content> /* 复合式写法 */；

13、添加在子元素

　　　　grid-column：；

　　　　gird-row：；

自适应布局

　　不同类别的设备创建不同的静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换调用相应的布局（页面元素位置发生改变而大小不变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

　　使用自适应布局时，首先在网页代码的头部，加入一样 viewport 标签：

<meta name="viewport" content="width=device-width, initial-scale=1" />

响应式布局

　　响应式布局的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、ipad等）都能显示出令人满意的效果。通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的展示效果，一般情况下是检测设备屏幕的宽度来实现。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /

　　　　width = device-width：　　宽度等于当前设备的宽度

　　　　initial-scale：　　　　　　初始的缩放比例（默认设置为1.0）

　　　　minimum-scale：　　　　　允许用户缩放到的最小比例（默认设置为1.0）

　　　　maximum-scale：　　　　允许用户缩放到的最大比例（默认设置为1.0）

　　　　user-scalable：　　　　　　用户是否可以手动缩放

　　媒体查询

　　　　媒体类型和一个或多个检查媒体特性的条件表达式组成

　语法（媒体查询一般放在 css代码最后面）

　　　　@media 媒体类型 and （表达式） and （表达式）{

　　　　　　选择符{css样式}

　　　　}

自适应布局和响应式布局对比：

　　不同点：

　　　　1.自适应需要开发多套界面；　　响应式只需开发一套界面。

　　　　2.自适应对页面的屏幕适配是在一定的范围；　　响应式是一套页面同时兼容在 pc 端、平板和手机端的各个不同视口，而不是为每个终端做一个特定的版本，所以需要考虑的状态非常多。

　　相同点：　

　　　　都是通过检测视口分辨率，使页面适应不同分辨率的视口。

伸缩布局（Flex box）

　　使用css3 Flex 系列属性进行相对布局，用来为盒模型提供最大的灵活性。对于富媒体和复杂排版的支持非常大，但是存在兼容性问题。任何一个容器都可以指定为 flex 布局，行内元素也可以使用。

　　注意：设为 flex 布局后，子元素的 float、clear、vertical-apgn 属性将失效。

initial-scale：初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

网页布局方式

标签：ant参数roundtlemedia填充pac局限html

以上就是网页布局方式的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！