CSS布局说——两栏布局、三栏布局（圣杯、双飞翼）

最新推荐文章于 2023-09-19 14:47:38 发布

泊一

最新推荐文章于 2023-09-19 14:47:38 发布

阅读量291

点赞数 2

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

本文链接：https://blog.csdn.net/w_D_lufei/article/details/97618408

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

1. 文档流
2. 定位
3.盒模型
4.二栏布局
5.三栏布局
小知识点

1. 文档流

内联元素从左向右块级元素从上向下各占一行

2. 定位

position属性，有6大类

static 默认设置，就是相对于文档流位置
relative 相对定位，是相对于原来位置移动使用，还在文档流中
absolute 绝对布局，是相对于最近那个position不为static为参照点布局，脱离文档流
fixed 相对于窗口固定，脱离文档流
sticky 它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。demo地址

3.盒模型

在这里插入图片描述

这是标准盒子模型，可以看到width的长度等于content的宽度；而当将box-sizing的属性值设置成border-box时，盒子模型的width=border+padding+content的总和。对于不同的模型的宽度是不同的。宽度默认的属性值是auto，这个属性值会使得内部元素的长度自动填充满父元素的width。

4.二栏布局

1.float + margin

边栏浮动，主栏留出相应的margin

<body>
  <div class="left">定宽</div>
  <div class="right">自适应</div>
</body>
<style>
	.left{
	  width: 200px;
	  height: 600px;
	  background: red;
	  float: left;
	  display: table;
	  text-align: center;
	  line-height: 600px;
	  color: #fff;
	}
	
	.right{
	  margin-left: 210px;
	  height: 600px;
	  background: yellow;
	  text-align: center;
	  line-height: 600px;
	}
</style>

2.绝对定位

左侧栏宽度固定并绝对定位在最左侧，右侧主栏设置一个margin-left为边栏的宽度

<body>
<div id = "main"></div>
<div id = "aside"></div>
</body>

<style> 
	#aside{
	position:absolute;
	left:0;
	width:200px;
	}
	#main{
	margin-left:200px;
	}
</style>

3.flex布局

<div id="container">
<div id="aside"></div>
<div id="main"></div>
</div>


 <style>
	#container{
	display:flex;
	}
	
	#aside{
	flex:0 0 200px;
	}
	
	#main{
	flex: 1 1;
	}
</style>

5.三栏布局

1.绝对定位

左右侧栏分别用绝对定位固定在左侧和右侧，中间栏用margin-left和margin-right空出左右位置

2.浮动定位法

左侧栏和右侧栏向左和向右浮动，中间栏放在最后利用左右边距margin空出左右位置

3.圣杯布局（两边固定中间自适应）

思想：

1.就是先预留左右区域，让三个div在中间的一块区域，
2.让他们都float起来，然后设置中间的div的width：100%，其他两个div会变到下一行
3.设置margin-left:-100%,让左栏浮到上面，右栏就会占据原理左栏的位置，设置margin-left:为负的右栏的宽，这样中间栏左右就被覆盖
4.再设置position:relative 让覆盖的部分出现

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现三栏水平布局之圣杯布局</title>
    <style>
        .wrap {
            padding: 0 300px 0 200px;
        }
        
        .left,
        .right,
        .main {
            min-height: 200px;
            float: left;
            /* 设置最小高度 */
        }
        
        .left {
            background-color: green;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        
        .right {
            background-color: red;
            width: 300px;
            margin-left: -300px;
            position: relative;
            right: -300px;
        }
        
        .main {
            background-color: blue;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

4.双飞翼布局

思想：与圣杯布局类似，就是多加了一个div，在左右把中间覆盖时，中间里的那个div设置margin来显示我们的内容，感觉比圣杯好

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现三栏布局之双飞翼布局</title>
    <style>
        .left,
        .right,
        .main {
            float: left;
            min-height: 130px;
        }
        
        .left {
            background-color: red;
            width: 200px;
            margin-left: -100%
        }
        
        .main {
            background-color: blue;
            width: 100%;
        }
        
        .right {
            background-color: green;
            width: 300px;
            margin-left: -300px;
        }
        
        .content {
            margin: 0 300px 0 200px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main">
            <div class="content">content</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

5.flex 布局

这个最好，简单易懂

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex布局实现两边宽度固定中间自适应的三列布局</title>
    <style>
        .wrap {
            display: flex;
        }
        
        .main {
            flex-grow: 1;
            /* 自动适应 */
            background-color: red;
        }
        
        .left {
            flex-basis: 200px;
            background-color: green;
            order: -1;
            /* 默认为0  值越小 越靠前 不然按从上到下解析 */
        }
        
        .right {
            flex-basis: 300px;
            /* flex-basis 为基准值,当其为0%时，有width也没用,这是总宽度就取决于flex-grow 所占据的值 */
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="main"></div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

小知识点

1.float的原始意义：使文字环绕在图片周围，仅此而已。实现原理： float属性可以使图片（img）脱离文档流，但是它还占据正常文档流的文本空间，浮动后的图片可以浮在其他元素之上，但是图片不会遮挡文字，文字环绕在图片的周围。
2、float的2个属性①包裹性：添加了float属性的元素会自动加上一个“块级框”，即可以设置元素的宽高。就float的包裹性而言，其实和display： inline-block；属性的效果是一样的。会在水平方向上排列，并且可以设置元素的宽高。唯一的区别就是：float是有方向性的，display: inline-block;是没有方向性的。②破坏性：float属性破坏元素的inline-box模型，使之没有line-height值（文字环绕图片、父级元素的高度塌陷问题）

泊一

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS布局说——两栏布局、三栏布局（圣杯、双飞翼）

CSS布局文档流内联元素从左向右块级元素从上向下各占一行定位position属性，有6大类static 默认设置，就是相对于文档流位置-relative 相对定位，是相对于原来位置移动使用，还在文档流中-absolute 绝对布局，是相对于最近那个position不为static为参照点布局，脱离文档流-fixed 相对于窗口固定，脱离文档流-sticky ...
复制链接

扫一扫