常用的页面布局

最新推荐文章于 2022-06-29 17:06:29 发布

yinian_12

最新推荐文章于 2022-06-29 17:06:29 发布

阅读量536

点赞数 2

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/weixin_47648850/article/details/112794721

版权

笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

常用的页面布局

前言:两栏布局、三栏（圣杯、双飞翼）布局

两栏布局

两栏布局,左边定宽，右边自适应
左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响

三栏布局

三栏布局算是网页中最常见的布局之一了。尤其以内容为主的网站，比如CSDN、淘宝等。基本都是两侧宽度固定，中间自适应,使内容先加载出来，可以把内容部分放在其他标签前面，浏览器是自上而下渲染标签的，这样内容部分就会先加载出来。

圣杯布局

要求:header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度

圣杯布局的实现方式有一下两种:浮动，flex布局

【1】浮动
1.先定义好header和footer的样式，使之横向撑满。
2.在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。
3.三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满
4.这样因为浮动的关系，center会占据整个container，左右两块区域被挤下去了
5.接下来设置left的 margin-left: -100%;，让left回到上一行最左侧
6.但这会把center给遮住了，所以这时给外层的container设置 padding-left: 200px;padding-right: 150px;，给left和right空出位置
7.这时left并没有在最左侧，因为之前已经设置过相对定位，所以通过 left: -200px; 把left拉回最左侧
8.同样的，对于right区域，设置 margin-right: -150px; 把right拉回第一行
9.这时右侧空出了150px的空间，所以最后设置 right: -150px;把right区域拉到最右侧就行了

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
    min-width: 550px;  /* 2x leftContent width + rightContent width */
    font-weight: bold;
    font-size: 20px;
  }
 
  #header, #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #footer {
    clear: both;
  }
 
  #container {
    padding-left: 200px;   /* leftContent width */
    padding-right: 150px;  /* rightContent width */
    overflow: hidden;
  }
 
  #container .column {
    position: relative;
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
 
  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }
 
  #left {
    width: 200px;           /* leftContent width */
    right: 200px;           /* leftContent width */
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
 
  #right {
    width: 150px;           /* rightContent width */
    margin-right: -150px;   /* rightContent width */
    background: rgb(231, 105, 2);
  }
 
</style>
 
<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="center" class="column">#center</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>
 
 
</body>
 
</html>

【2】flex弹性盒子
1.header和footer设置样式，横向撑满。
2.container中的left、center、right依次排布即可
3.给container设置弹性布局 display: flex;
4.left和right区域定宽，center设置 flex: 1; 即可

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
    min-width: 550px;  
    font-weight: bold;
    font-size: 20px;
  }
  #header, #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #container {
   display: flex;
  }
  #container .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #center {
    flex: 1;
    background: rgb(206, 201, 201);
  }
  #left {
    width: 200px;        
    background: rgba(95, 179, 235, 0.972);
  }
  #right {
    width: 150px;           
    background: rgb(231, 105, 2);
  }
</style>
 
<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="left" class="column">#left</div>
    <div id="center" class="column">#center</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>
</body>
 
</html>

双飞翼布局

1.DOM结构
双飞翼布局的DOM结构是用container仅包裹住center，另外将.column类从center移至container上。
2. CSS代码
首先设置各列的宽度与浮动，并且为左右两列预留出空间，以及为footer设置浮动清除：clear: both;

将container,left,right设置为float: left，而在container内部，center由于没有设置浮动，所以其宽度默认为container的100%宽度，通过对其设置margin-left和margin-right为左右两列预留出了空间。
将left放置到预留位置：

#left {
  width: 200px; 
  margin-left: -100%;
}

将right放置到预留位置：

#right {
  width: 150px; 
  margin-left: -150px;
}

在设置最小页面宽度时，应该适当增加一些宽度以供中间栏使用，则有：

body {
  min-width: 500px;
}

使用flex

<!-- DOM结构 -->
<div id="container">
  <div id="center"></div>
  <div id="left"></div>
  <div id="right"></div>
</div>


#container {
    display: flex;
}

#center {
    flex: 1;
}

#left {
    flex: 0 0 200px;
    order: -1;
}

#right {
    flex: 0 0 150px;
}

yinian_12

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录