首页 前端知识 float,flex和grid布局

float,flex和grid布局

2024-02-10 19:02:41 前端知识 前端哥 346 730 我要收藏

页面布局往往会影响着整体的结构与项目的样式,通常我们用的布局方式有三种:float,flex,grid

1.float或position布局

1.1概念

     首先对于一个页面来说,有浮动流,文档流,文本流这几种模式,而float布局则是脱离文档流而不脱离文本流,就是页面的元素会无视这个浮动的元素,正常布局的正常布局,只是浮动的元素会在正常的元素上方就像浮起来了。
浮动会激活元素的BFC(块级格式化上下文),使元素脱离文档流,它是一个独立的渲染区域,有自己的渲染规则,与这个区域外部的规则毫无关系

1.2实现

     通过position或float来实现布局,首先使用float让其浮动,脱离文档流,就好比像有两层空间,一般写的元素的在一层,浮动的则是在另一层。position如果是绝对定位(absolute),也会浮动起来,就需要设置left,right,top,bottom这四个属性去移动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <style>
            .float{
               float: left;//靠左浮动
               width: 100px;
               height: 100px;
               background-color: aqua;
            }
            .item{
                background-color: bisque;
                width: 100%;
                height: 500px;
            }
        </style>                                             
    </head>
    <body>
        <div class="container">
            <div class="float">float</div>
            <div class="item"></div>
        </div>
    </body>
</html>

效果:
在这里插入图片描述
原本两个盒子应该是这样的
在这里插入图片描述

1.3优缺点

     缺点:步骤繁琐,使用困难,同时浮动需要清除,不然会影响样式。同时对于布局构思能力要求很高,现在基本不会用,除非Ie浏览器。
     优点:包容性强大。

2.flex布局

2.1概念:

     flex就是弹性盒子布局,Flex布局是CSS3新增的一种CSS布局模式,它能够让元素更加简便的布局,并支持响应式布局。它通过“容器”和“项目”两个元素进行布局,允许容器中的项目能够灵活地伸缩和排列,以适应不同的屏幕尺寸或设备。一般来说父容器,子项目,它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

1.2实现

     flex布局是一维布局,所以需要设置横和竖的布局方式,用flex-direction去决定方向。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <style>
            .container{
               width: 100%;
               height: 100px;
                background-color: aqua;
                //一般设置这三个属性就行了
                display: flex;//定义为flex布局
                flex-direction: row;//子元素(项目)排列方式,有row--正方向行,row-reverse--反方向行,column--正方向列,
                //column-reverse--反方向列
                justify-content: space-around;//有这些值: flex-start | flex-end | center |
                // space-between | space-around;
            }
            .item{
                width: 100px;
                height: 100px;
                border: black solid 2px;
                text-align: center;
            }
        </style>                                             
    </head>
    <body>
        <div class="container">
            <div class="item" style="background-color: yellow;">yellow</div>
            <div class="item" style="background-color: blue;">blue</div>
            <div class="item" style="background-color: pink;">pink</div>
        </div>
    </body>
</html>

效果:
在这里插入图片描述
原本的:
在这里插入图片描述

1.3相关属性

     flex布局有些常用的属性:

  • flex-direction:定义主轴的方向(row、row-reverse、column、column-reverse);
  • justify-content:定义元素在主轴上的对齐方式(flex-start、flex-end、center、space-between、space-around);
  • align-items:定义元素在交叉轴上的对齐方式(flex-start、flex-end、center、baseline、stretch);
  • flex-wrap:定义元素的换行方式(nowrap、wrap、wrap-reverse);
  • align-content:定义多行元素在交叉轴上的对齐方式(flex-start、flex-end、center、space-between、space-around、- >stretch);
  • flex-grow:定义元素的放大比例;
  • flex-shrink:定义元素的缩小比例;
  • flex-basis:定义元素在分配多余空间之前的基准大小;
1.4优缺点

     优点:

  • 简单易用:Flex布局用起来比传统的布局方式更加方便和快捷。

  • 布局灵活:能够实现各种方向和大小的布局,确保页面在不同设备和窗口大小下都能正常显示。

  • 支持对齐和分布:Flex布局支持多种对齐和分布方式,可用于实现水平居中、垂直居中、顶部对齐、底部对齐等。

  • 自适应:Flex布局可以根据不同的设备和屏幕大小来适应布局,使页面在各种不同的设备上都能正常显示。

  • 支持动画和过渡效果:Flex布局支持动画和过渡效果,可用于实现各种动态效果。

     缺点:

  • 兼容性问题:由于Flex布局是CSS3的新特性,旧版本的浏览器可能不支持。

  • 可读性问题:由于Flex布局使用的是大量的flex属性和值,使得代码相对较长,可读性较差

3.grid布局

3.1概念:

     Grid布局是CSS中一种基于网格的布局方式,它将一个页面分成了一系列的行和列,并将网格中的内容放置在这些行和列中,可以实现更加灵活和高效的页面布局。Grid 布局则是将容器划分成“行"和“列”,产生单元格,然后指定"项目所在”的单元格,功能比flex强大,是一种二维的布局方式。

3.2实现:

     和flex布局差不多,通过display:grid先实现,在根据grid-template-columns或者 grid-template-rows去设置行与列。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Parallax Scrolling Demo</title>
        <style>
            .container{
               width: 100%;
               height: 100px;
               display: grid;
               grid-template-rows:100px 100px ;//设置每一行的宽度,其中每个数字代表这一行
               grid-template-columns: 100px 100px;//设置每一列的宽度,其中每个数字代表这一列
            }
            .item{
                border: black solid 2px;
                text-align: center;
            }
        </style>                                             
    </head>
    <body>
        <div class="container">
            <div class="item" style="background-color: yellow;">yellow</div>
            <div class="item" style="background-color: blue;">blue</div>
            <div class="item" style="background-color: pink;">pink</div>
            <div class="item" style="background-color: pink;">pink</div>
        </div>
    </body>
</html>

效果:
在这里插入图片描述
原本的效果和flex布局一样

3.3属性:

     grid布局的属性很多,也很复杂

  • grid-template-columns/grid-template-rows:定义网格的列和行的数量和大小。
  • grid-template-areas:定义网格模板中的区域名称。
  • grid-template:以上两者的缩写形式。
  • grid-column-gap/grid-row-gap/grid-gap:定义列、行、以及列与行之间的间距。
  • grid-auto-columns/grid-auto-rows:定义没有列、行指定的网格单元格的大小。
  • grid-auto-flow:控制自动布局算法在什么方向上填充网格。
3.4 优缺点

优点:

  • 精确的控制布局:可以通过列和行来精确控制每个子元素在布局中的位置和大小。
  • 灵活性:可以使用媒体查询来针对不同的屏幕尺寸或方向添加或移除列或行。
  • 可维护性:可以很容易地修改布局而不必担心其他元素的影响。
  • 易于理解:与传统的 float、position 和 display 属性相比,Grid 布局的代码更容易理解和维护。

缺点:

  • 兼容性:虽然 Grid 布局已成为现代浏览器的标准,但在旧版浏览器中并不支持。开发者需要使用其他方式来提供备用方案。
  • 学习成本高:与传统的 float、position 和 display 属性相比,学习和理解 Grid 布局可能需要更长的时间和更高的学习成本。
  • 可读性差:因为 Grid 布局使用了许多新的术语(如 grid-template-columns 和 grid-template-rows),因此初学者可能需要花更多的时间来理解和阅读代码
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1675.html
标签
评论
发布的文章

jQuery&layui

2024-02-24 15:02:18

HTML/CSS JavaScript jQuery

2024-02-24 15:02:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!