CSS常用布局

最新推荐文章于 2024-09-04 10:43:05 发布

weixin_34209406

最新推荐文章于 2024-09-04 10:43:05 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c870e786fb9a049c8504bb5

本文详细介绍了网页布局中常见的几种技巧，包括使用position定位、flex弹性布局、float+margin、BFC布局以及圣杯布局等方法，实现顶部、底部定高，中间自适应；顶部定高、左侧导航定宽、右侧内容自适应；以及顶部、底部定高，左右两侧定宽，中间自适应的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

顶部、底部定高，中间自适应

  <div class="body">
    <div class="header"></div>
    <div class="section">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="footer"></div>
  </div>
复制代码

1.position定位

整个父元素相对定位，导航高固定，内容区域绝对定位，通过定位属性实现高度自适应。

  html,body{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .body{
    position: relative;
    height: 100%;
  }
  .header{
    height: 80px;
    background-color: #ccc;
  }
  .section{
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 80px;
    background-color: #f8f8f9;
  }
  .footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background-color: #ccc;
  }
复制代码

2. flex 弹性布局

利用 flex flex-direction：column属性，使元素自上往下排列，flex:1占据除规定元素外的所有位置

html,body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.body{
  height: 100%;
  background-color: #808695;
  display: flex;
  /*设置排列顺序*/
  flex-direction: column; 
}
.header{
  height: 80px;
  background-color: #ccc;
}
.section{
  flex: 1;
  background-color: #f8f8f9;
}
.footer{
  height: 80px;
  background-color: #dcdee2;
}
复制代码

顶部定高、左侧导航定宽、右侧内容自适应

1. 定位

父元素相对定位，左侧left绝对定位确定自适应高度并左对齐。右侧right通过绝对定位自适应高度和宽度

.body{
    height: 100%;
    position: relative;
    background-color: #F5F7F9;
  }
  .header{
    height: 80px;
    background-color: #515A6E;
  }
  .section{
    background-color: #F5F7F9;
    position: absolute;
    left: 0;
    top: 80px;
    bottom: 0;
    right: 0;
  }
  .left{
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100px;
  }
  .right{
    background-color: #F5F7F9;
    position: absolute;
    top: 0;
    left: 100px;
    bottom: 0;
    right: 0;
  }
复制代码

2. float + margin

左侧left使用浮动，浮动元素半脱离文档流，与近邻元素位置重叠但不会与邻近元素内部文档重叠

.body{
  height: 100%;
  position: relative;
}
.header{
  height: 80px;
  background-color: #515A6E;
}
.section{
  background-color: #afc7de;
  position: absolute;
  left: 0;
  top: 80px;
  bottom: 0;
  right: 0;
}
.left{
  background-color: #fff;
  float: left;
  width: 100px;
  height: 100%;
}
.right{
  background-color: #F5F7F9;
  height: 100%;
  margin-left: 100px;
}
复制代码

3. BFC 布局

左浮动，右产生BFC，利用BFC与float元素重叠的特征

4. flex布局

flex-direction: column布局自上而下，flex:1让section布满除header外的所有区域。section设置flex，默认从左往右排列，flex:1让right布满除left外的所有区域

.body{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header{
  height: 80px;
  background-color: #515A6E;
}
.section{
  background-color: #afc7de;
  flex: 1;
  display: flex;
}
.left{
  background-color: #fff;
  width: 100px;
}
.right{
  flex: 1;
  background-color: #F5F7F9;
}
复制代码

圣杯布局：顶部、底部定高，左右两侧定宽，中间自适应

<div class="body">
    <div class="header"></div>
    <div class="section">
      <div class="left"></div>
      <div class="center">111</div>
      <div class="right"></div>
    </div>
</div>
复制代码

1. flex布局

.header{
    height: 80px;
    background-color: #515A6E;
  }
  .section{
    background-color: #afc7de;
    flex: 1;
    display: flex;
  }
  .left{
    background-color: #fff;
    width: 100px;
  }
  .center{
    flex: 1;
    background-color: #F5F7F9;
  }
  .right{
    width: 100px;
    background-color: #fff;
  }
复制代码

2. 定位

.body{
  height: 100%;
  position: relative;
}
.header{
  height: 80px;
  background-color: #515A6E;
}
.section{
  position: absolute;
  width: 100%;
  left: 0;
  top: 80px;
  bottom: 0;
  right: 0;
  background-color: #afc7de;
}
.left{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  width: 100px;
}
.center{
  height: 100%;
  margin-left: 100px;
  margin-right: 100px;
  background-color: #F5F7F9;
}
.right{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  background-color: #fff;
}
复制代码

3. float + margin

section 在left和right元素后

.body{
  height: 100%;
  position: relative;
}
.header{
  height: 80px;
  background-color: #515A6E;
}
.section{
  position: absolute;
  width: 100%;
  left: 0;
  top: 80px;
  bottom: 0;
  right: 0;
  background-color: #afc7de;
}
.left{
  float: left;
  background-color: #fff;
  width: 100px;
  height: 100%;
}
.center{
  height: 100%;
  margin-right: 100px;
  margin-left: 100px;
  background-color: #F5F7F9;
}
.right{
  float: right;
  height: 100%;
  width: 100px;
  background-color: #fff;
}

复制代码

转载于:https://juejin.im/post/5c870e786fb9a049c8504bb5