几种网页布局

网站布局是一种定义网站结构的模式(或框架)。它具有为网站所有者和用户构造网站上存在的信息的作用。它为网页内的导航提供了清晰的路径，并将网站的最重要元素置于网站的正面和中心。

Y.Later

5048人浏览 · 2022-07-26 17:16:51

Y.Later · 2022-07-26 17:16:51 发布

什么是网页布局？

网站布局是一种定义网站结构的模式(或框架)。

它具有为网站所有者和用户构造网站上存在的信息的作用。它为网页内的导航提供了清晰的路径，并将网站的最重要元素置于网站的正面和中心。

为什么要进行网页布局

良好的布局可以使用户留在网站上，因为它可以轻松访问重要信息并直观地查找它们。不良的布局会使用户感到失望，然后他们会因为找不到所需的内容而迅速离开网站。

出于这个原因，最好花尽可能多的时间找到所需的布局，因为用户给你的时间不会超过几秒钟。

布局与用户对网站的参与度之间有着很强的关系，它确定了他们在网站页面上停留了多长时间，浏览了多少页面以及它们回到网站的频率。

基础布局

网页布局有很多种方式，一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo

菜单导航条包含了一些链接，可以引导用户浏览其他页面

内容区域一般有三种形式:

1 列：一般用于移动端。
2 列：一般用于平板设备。
3 列：一般用于 PC 桌面设备。

底部区域在网页的最下方，一般包含版权信息和联系方式等。

多媒体查询

CSS3的多媒体查询继承了CSS2多媒体类型的所有思想:取代了查找设备的类型，CSS3根据设置自适应显示。

媒体查询可用于检测很多事情，例如:

viewport(视窗)的宽度与高度
设备的宽度与高度
朝向(智能手机横屏，竖屏)。
分辨率

目前很多针对苹果手机，Android手机，平板等设备都会使用到多媒体查询。

多媒体查询语法

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回true或 false。

如果指定的多媒体类型匹配设备类型则查询结果返回true，文档会在匹配的设备上显示指定样式效果。除非你使用了not或 only操作符，否则所有的样式会适应在所有设备上显示效果。

@media not| only mediatype and (mediafeature and |or|not mediafeature) {
    #main {
    	width: 200px;
        float: left;
    }
}

弹性布局

flex布局是什么

Flex是Flexible Box的缩写，意为“"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

基本概念

采用Flex布局的元素，称为Flex容器(flex container)，简称""容器"。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称"项目"。布局原理就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

容器默认存在两根轴:水平的主轴（main axis）和垂直的交叉轴(cross axis)。主轴的开始位置（与边框的交叉点)叫做main start，结束位置叫做main end;交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

以下6个属性设置在容器上：

flex-direction：属性决定主轴的方向（即项目的排序方向），默认水平方向。
flex-wrap：默认情况下，项目都排在一条线(又称轴线)上，此属性定义如果一条轴线排不下，如何换行。它可能取三个值：

nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

flex-flow：
justify-content：属性定义了项目在主轴上的对齐方式
align-items：属性定义项目在交叉轴上如何对齐
align-content：属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性

项目的属性

order属性：定义项目的排列顺序。数值越小，排列越靠前，默认为0 。
flex-grow属性：定义项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。
flex-shrink属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
flex-basis属性：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px)，则项目将占据固定空间。
flex属性：flex属性是flex-grow, flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值: auto (1 1 auto)和none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self属性：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

Grid布局

Grid布局即网格布局，是一种新的css 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的css布局方案，是目前唯一一种css二维布局。利用Grid布局，我们可以轻松实现类似下图布局

<style>
        .y {
            width: 800px;
            height: 600px;
            border: 1px solid pink;
            display: grid;
            /*设置grid布局*/
            grid-template-columns: 1fr 2fr 1fr;
            /*设置行和列*/
            grid-template-rows: 90px auto 90px;
            margin: 0 auto;
            font-weight: bold;
            text-align: center;
        }
        
        .y1 {
            border: 1px solid red;
            grid-column-start: 1;/*从1列开始*/
            grid-column-end: 4;/*到4列结束*/
        }
        
        .y2 {
            border: 1px solid blue;
            grid-column-start: 1;
            grid-column-end: 2;
        }
        
        .y3 {
            border: 1px solid purple;
            grid-column-start: 2;
            grid-column-end: 4;
        }
        
        .y4 {
            border: 1px solid green;
            grid-column-start: 1;
            grid-column-end: 4;
        }
    </style>
</head>

<body>
    <div class="y">
        <div class="y1">头部</div>
        <div class="y2">左侧菜单栏</div>
        <div class="y3">右侧内容</div>
        <div class="y4">底部</div>
    </div>
</body>

当一个HTML元素将display属性设置为grid或inline-grid后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。

grid-template-columns 和 grid-template-rows用来声明行和列

fr单位

轨道可以使用任何长度单位进行定义。

网格引入了fr单位来帮助我们创建灵活的网格轨道。一个fr单位代表网格容器中可用空间的一等份。以下实例定义了一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩。

网格单元

一个网格单元是在一个网格元素中最小的单位，从概念上来讲其实它和表格的一个单元格很像。

网络线

划分网格的线，称为""网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m列有m +1根垂直的网格线，n行有n +1跟水平网格线。