css中常见的布局方式

最新推荐文章于 2024-05-14 18:25:49 发布

qq_45856709

最新推荐文章于 2024-05-14 18:25:49 发布

阅读量430

点赞数 1

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_45856709/article/details/130463822

版权

1.流体布局

流体布局是网页缩小和放大时网页布局会随着浏览器的大小而改变。
两边的宽度是固定的，中间的宽度是可以根据屏幕的大小进行改变的
思路: 给左右两边的盒子设置固定的宽高并设置左右浮动，中间盒子通过设置margin-left和margin-right(margin的值为到父元素两侧的距离)
实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>流体布局</title>
  <style>
    .left{
      width: 150px;
      height: 50px;
      float: left;
      background: red;
    }
    .right{
      width: 150px;
      height: 50px;
      float: right;
      background: blue;
    }
    .center{
      height: 50px;
      margin-left:150px ;
      margin-right:150px ;
      background: green;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="left">1</div>
    <div class="right">3</div>
    <div class="center">2</div>
  </div>
</body>
</html>

结果
在这里插入图片描述

圣杯布局`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯布局</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .center{
      padding: 0 200px;
    }
    .middle,.left,.right{
      float: left;
      height: 50px;
    }
    .middle{
      width: 100%;
      background: pink;
    }
    .left,.right{
      width: 200px;
    }
    .left{
      background: red;
      margin-left: -100%;
      position: relative;
      left: 200px;
    }
    
    /*为什么要使用定位
     因为center添加了padding,意味着盒子宽度增加了，原来设置左右盒子的位置也就发生了变化，设置相对定位，偏移padding左右的值就可以在视觉上实现相应的功能 */
    .right{
      background: green;
      margin-left: -200px;
      position: relative;
      left: 200px;
    }
  </style>
</head>
<body>
  <div class="center"><div class="middle">中间</div></div>
  <div class="left">左边</div>
  <div class="right">右边</div>
  
</body>
</html>

结果
在这里插入图片描述

双飞翼布局

双飞翼布局是淘宝提出的，是针对圣杯布局的一个优化方案（使用了定位）.解决方法就是在center中在添加一个一个inner盒子，并为其设置margin-left和margin-right,这样中间盒子的内容区域就不会被覆盖

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双飞翼布局</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .center{
      width: 100%;
      background: pink;
    }
    .center,.left,.right{
      float: left;
      height: 50px;
    }
    .left,.right{
    width: 200px;
    }
    .left{
      background: red;
      margin-left: -100%;
    }
    .right{
      background: green;
      margin-left: -200px;
    }
    .middle{
      margin-left: 200px;
      margin-right: 200px;
    }
    body{
      min-width: 900px;
    }
  </style>
</head>
<body>
  <div class="center">
    <div class="middle">中间</div>
  </div>
  <div class="left">左边</div>
  <div class="right">右边</div>
  
</body>
</html>

在这里插入图片描述

等分布局

1.float+百分比布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>等分布局</title>
  <style>
    .item{
      float: left;
      width: 25%;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item" style="background: red;">1</div>
    <div class="item" style="background: blue;">2</div>
    <div class="item" style="background: green;">3</div>
    <div class="item" style="background: pink;">4</div>
  </div>
</body>
</html>

在这里插入图片描述
2.行内块+百分比布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>等分布局</title>
  <style>
    .box{
      font-size: 0;
    }
    .item{
      display: inline-block;
      width: 25%;
      height: 400px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item" style="background: red;">1</div>
    <div class="item" style="background: blue;">2</div>
    <div class="item" style="background: green;">3</div>
    <div class="item" style="background: pink;">4</div>
  </div>
</body>
</html>

结果
在这里插入图片描述

注意：display设置元素为行内元素和行内块元素时，元素之间存在间隙问题
原因：存在间隙是由于元素标签之间留有空白字符造成的。
解决方法有两种
（1）消除元素标签之间的空白字符，把标签连在一起。
（2）在这些行内元素的父元素上设置font-size设置为0，再在行内元素上设置正常的字体显示大小
3.flex布局
主要通过flex属性实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>等分布局</title>
  <style>
    .box{
      /* 开启弹性盒子 */
      display: flex;
    }
    .item{
      height: 400px;
      /* 平分空间 */
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item" style="background: red;">1</div>
    <div class="item" style="background: blue;">2</div>
    <div class="item" style="background: green;">3</div>
    <div class="item" style="background: pink;">4</div>
  </div>
</body>
</html>

注意：flex元素在主轴中的缩放因子与宽度
语法 flex:放大因子(0/1),缩小因子(0/1),计算宽度
补充：
order属性元素在主轴上的顺序，值越小，越靠前。默认值是0，允许为负值
place-self控制元素在交叉轴上的对齐方式，有四个值stretch伸展，start交叉轴起始始，end交叉轴终止线，center交叉轴中心
4.grid布局
主要通过template属性实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>等分布局</title>
  <style>
    .box{
      /* 开启网格布局 */
      display: grid;
     /* 平分空间 */
       grid-template-columns: repeat(4,1fr);
    }
    .item{
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item" style="background: red;">1</div>
    <div class="item" style="background: blue;">2</div>
    <div class="item" style="background: green;">3</div>
    <div class="item" style="background: pink;">4</div>
  </div>
</body>
</html>