HTML+CSS之--------＞布局

最新推荐文章于 2024-07-20 21:01:09 发布

小白在线学前端

最新推荐文章于 2024-07-20 21:01:09 发布

阅读量91

点赞数

分类专栏： HTML 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_43473773/article/details/120373146

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

前端中有很多的布局方式，例如flex布局，rem布局，圣杯布局，双飞翼布局.，好了我们废话不多说马上开始，lest go！！1

开始啦

1、利用定位的方式实现两侧固定，中间自适应

给父盒子设置左右的padding值
给左右盒子的 width（宽度） 设置父盒子的padding值，然后分别定位到padding的地方去
中间的盒子自适应

代码如下：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      height: 400px;
      background-color: pink;
      position: relative;
      padding: 0 200px;
    }

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

    .left {
      left: 0;
    }

    .center {
      background-color: green;
      height: 400px;
    }

    .right {
      right: 0;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>

</html>

利用flex布局实现两侧固定中间自适应
- 父盒子设置display:flex
- 左右盒子设置固定宽高
- 中间盒子设置flex:1

代码如下：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      height: 400px;
      background-color: pink;
      display: flex;
    }

    .left {
      width: 200px;
      height: 300px;
      background-color: green;
    }
    .right{
      width: 200px;
      height: 300px;
      background-color: blue;
    }
    .center{
      flex: 1;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>
</html>

利用bfc块级格式化上下文，实现两侧固定中间自适应
1. 左右固定宽高
2. 中间overflow:hidden

代码如下

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      height: 400px;
      background-color: pink;
    }

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

    .right {
      float: right;
      width: 200px;
      height: 300px;
      background-color: blue;
    }

    .center {
      overflow: hidden;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>

</html>

小白在线学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS之--------＞布局

前言前端中有很多的布局方式，例如flex布局，rem布局，圣杯布局，双飞翼布局.，好了我们废话不多说马上开始，lest go！！1开始啦1、利用定位的方式实现两侧固定，中间自适应给父盒子设置左右的padding值给左右盒子的 width（宽度）设置父盒子的padding值，然后分别定位到padding的地方去中间的盒子自适应代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset
复制链接

扫一扫