css的常见6种布局方式

最新推荐文章于 2024-03-01 20:37:01 发布

漫川清梦压星河

最新推荐文章于 2024-03-01 20:37:01 发布

阅读量4.5k

点赞数 4

分类专栏： css 文章标签：面试 css

本文链接：https://blog.csdn.net/mangguom23/article/details/112800122

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

下面主要是针对三栏布局进行介绍：常见的三栏布局有，流体布局、圣杯布局、双飞翼布局、flex布局、绝对定位布局、网格布局

流体布局

两边的宽度是固定的，中间的宽度是可以根据屏幕的大小进行改变的。实现的关键点是，左边还有右边的元素分别给他们设置浮动，即左边设置成左浮动，右边是右浮动，并且要设置成固定的宽高；中间的主要模块，使用margin-left还有margin-right进行设置（设置的值为到父元素两侧的距离，这里指的就是到container这个父元素边距的距离）

	.left {
        float: left;
        width: 100px;
        height: 200px;
        background: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background: blue;
    }
    .main {
        margin-left: 120px;
        margin-right: 220px;
        height: 200px;
        background: green;
    }
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

圣杯布局

跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体

实现的效果：两侧的宽度是固定的，中间Main的宽度会随着屏幕的宽度进行变化

实现步骤

把 left 放上去，由于浮动的关系，给 left 设置margin-left: -100%即可使左侧栏浮动到 center 上面，并位于 center 左侧之上。
同样为 right 设置margin-left: -200px，这里的长度等于 right 的长度
这时 center 的两侧被 left 和 right 覆盖了，因此给 container设置padding: 0 200px
由于 left 和 right 也同时往中间缩，因此给 left 和 right 分别设置left: -200px; right: -200px，往两侧分别偏移自身的宽度去覆盖掉 contaniner 使用padding后的空白位置。

.container {
    /* 设置为bfc的标准 */
  overflow: hidden;
  padding: 0 200px;
}
.container > div {
  position: relative;
  /* 给div设置成浮动，这样它的子元素也就是浮动了 */
  float: left;
  height: 100px;
}
.main {
  width: 100%;
  background-color: red;
}
.left {
  width: 200px;
  background-color: green;
  /* 表示的意思是除了父元素的padding区域之外的所有的宽度 */
  margin-left: -100%;
  /* 因为之前设置了padding，所有left元素会往中间缩，所以要设置一个left的负值 */
  left: -200px;
}
.right {
  width: 200px;
  background-color: blue;
  /*  要是不设置-200这个值得话，就会跑到下面的一行去。因为之前设置了一个padding 200px的值，所以要设置
  -200回去，然后它的属性是float：left*/
  margin-left: -200px;
  /* 表示的意思是元素的最右边相对于父元素的除了padding的区域，距离的多少px（正值），
  超过那根padding的界限的多少px*/
  right: -200px;
}
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

区分margin-left与left

一、在有定位声明的情况下：即position:absolute,relative,fixed这几种情况下

1>只有margin-left：这样子position的声明没有任何作用，因为即使声明了，也得靠left,top来调整位置，如果没有left等，则position失效，元素位置仍为其该在的位置，margin-left还是相对于其父元素的距离
2>只有left等：正常情况
3>同时有margin-left和left：这种情况下，定位是有作用的，在定位完成后margin-left再起作用，即margin-left和left是可以叠加的

二、在无定位声明或position:static的情况下

left等的定义无效，margin-left有效

双飞翼布局

利用的是浮动元素 margin 负值的应用。主体内容可以优先加载，HTML 代码结构稍微复杂点。

实现步骤

把 left 放上去，由于浮动的关系，给 left 设置margin-left: -100%即可使左侧栏浮动到 center 上面，并位于 center 左侧之上。
同样为 right 设置margin-left: -200px，这里的长度等于 right 的长度
给 main 设置margin: 0 200px，同时设置overflow: hidden使其成为一个BFC

.container {
  overflow: hidden;
}
.container > div {
  
  position: relative;
  float: left;
  height: 100px;
}
.center {
  width: 100%;
  background-color: red;
}
.left {
  width: 200px;
  background-color: green;
  margin-left: -100%;
}
.right {
  width: 200px;
  background-color: blue;
  margin-left: -200px;
}
.main {
  height: 100%;
  margin: 0 200px;
  background-color: rosybrown;
  overflow: hidden;
}

<div class="container">
  <!-- 优先渲染 -->
  <div class="center">
    <div class="main">
      center
    </div>
  </div>
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>

flex布局

实现步骤

给 container 设置为一个 flex 容器display: flex
center 的宽度设置为width: 100%，left 和 right 设置为width: 200px
为了不让 left 和 right 收缩，给它们设置flex-shrink: 0
使用order属性给三个部分的 DOM 结构进行排序：left：order: 1，center：order: 2，right：order: 3

.container {
  display: flex;
}
.center {
  background-color: red;
  width: 100%;
  order: 2;
}
.left {
  background-color: green;
  width: 200px;
  flex-shrink: 0;
  order: 1;
}
.right {
  background-color: blue;
  width: 200px;
  flex-shrink: 0;
  order: 3;
}
<body>
    <div class="container">
        <!-- 优先渲染 -->
        <div class="center">
            center
        </div>
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>
</body>

极其灵活

绝对定位布局

实现步骤

给 container 设置position: relative和overflow: hidden，因为绝对定位的元素的参照物为第一个postion不为static的祖先元素。
left 向左浮动，right 向右浮动。
center 使用绝对定位，通过设置left和right并把两边撑开。
center 设置top: 0和bottom: 0使其高度撑开。

.center {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 0;
    bottom: 0;
}
<body>
    <div class="container">
        <!-- 优先渲染 -->
        <div class="center">
            center
        </div>
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>
</body>

缺点是依赖于left 和 right 的高度，如果两边栏的高度不够，中间的内容区域的高度也会被压缩。

网格布局

实现步骤

给 container 设置为display: grid
设置三栏的高度：grid-template-rows: 100px
设置三栏的宽度，中间自适应，两边固定：grid-template-columns: 200px auto 200px;

    .container {
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        grid-template-columns: 200px auto 200px;
    }
<body>
    <div class="container">
        <div class="left">
            left
        </div>
        <!-- 这时的center要放在中间 -->
        <div class="center">
            center
        </div>
        <div class="right">
            right
        </div>
    </div>
</body>

使用起来极其方便

漫川清梦压星河

关注

4
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
css的常见6种布局方式

下面主要是针对三栏布局进行介绍：常见的三栏布局有，流体布局、圣杯布局、双飞翼布局、flex布局、绝对定位布局、网格布局流体布局两边的宽度是固定的，中间的宽度是可以根据屏幕的大小进行改变的。实现的关键点是，左边还有右边的元素分别给他们设置浮动，即左边设置成左浮动，右边是右浮动，并且要设置成固定的宽高；中间的主要模块，使用margin-left还有margin-right进行设置（设置的值为到父元素两侧的距离，这里指的就是到container这个父元素边距的距离） .left { floa
复制链接

扫一扫