两栏布局，三栏布局，格式化上下文

最新推荐文章于 2024-08-24 13:47:49 发布

Q_Quiet

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量266

点赞数

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

本文链接：https://blog.csdn.net/q_quiet/article/details/90342004

版权

html 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

两栏布局

1. float + margin-left

使用float：left，将左边块的位置固定，再margin-left；将左边框的位置空出来，构成两栏布局。

	<div class="left">    123    </div>
    <div class="right">   456    </div>

	*{
	  margin: 0px;
	  padding: 0px;
	}
	.left{
	  height: 30px;
	  width: 200px;
	  background-color: red;
	  float: left;
	}
	.right{
	  height: 30px;
	  background-color: green;
	  margin-left: 200px;
	}

实例显示
在这里插入图片描述

2. absolute + margin-left

使用绝对定位，将左边的块分好地方，再使用margin-left；将其位置空出来，构成两栏布局。

	*{
	  margin: 0px;
	  padding: 0px;
	}
	.left{
	  height: 30px;
	  width: 200px;
	  background-color: red;
	  float: absolute;
	}
	.right{
	  height: 30px;
	  background-color: green;
	  margin-left: 200px;
	}

实例显示
在这里插入图片描述

3. flex布局·

将父级设置为flex属性，使用flex布局方式，默认由左至右，给左边子级设置宽度flex-basis；右边子级设置flex：auto；自动填充剩下部分；构成两栏布局。

    <div class="container">
        <div class="left">123    </div>
        <div class="right">456</div>
    </div>
    
	.container{
 	 width: 100%;
 	 height: 100px;
  	display: flex;
	}
	.left{
  	flex-basis: 200px;    /*定宽*/
 	 background-color: red;	
	}
	.right{
  	flex: auto; /*自动填满*/
 	background-color: green;
	}

实例显示
在这里插入图片描述

4. grid布局

使用grid布局，将父级设置为grid布局方式，再使用 grid-template-columns设置每一列的宽度，设置两列的宽度构成两栏布局。

.container{
  width: 100%;
  display: grid;
  grid-template-columns: 200px auto; /*设置每一列的宽度*/
}
.left{
  background-color: red;
}
.right{
  background-color: green;
}

三栏布局

1. flex布局

将父级设置为flex属性，使用flex布局方式，默认由左至右，给左边和右边子级设置宽度width；中间子级设置flex：auto；自动填充剩下部分；构成三布局。

    <div class="container">
        <div class="left">123 </div>
        <div class="mai'n">456</div>
        <div class="right">789</div>
    </div>
    
	.container{
 	 width: 100%;
 	 height: 100px;
  	display: flex;
	}
	.left{
  	width: 200px;    /*定宽*/
 	 background-color: red;	
	}
	.main{
		flex:auto;
		border:1px solid blue;
	}
	.right{
  	width:200px;
 	background-color: green;
	}

实例显示
在这里插入图片描述

2. 浮动布局：float + margin

基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后，否则右侧会沉在中间内容的下侧

两边固定宽度，中间宽度自适应。
利用中间元素的margin值控制两边的间距
宽度小于左右部分宽度之和时，右侧部分会被挤下去

	<div class="container">
        <div class="left">123    </div>
        <div class="right">789</div>
        <div class="main">456</div>
    </div>
    
	.container{
	  padding: 20px;
	  overflow: hidden;
	  background-color: #eee;
	}
	.left{
	  float:left;
	  height:100%;
	  width:100px;
	  background-color: red;	
	}
	.right{
	  float: right;
	  height:100%;
	  width:200px;
	  background-color: green;
	}
	.main{
	  height:100%;
	  margin-left: 120px;
	  margin-right: 220px;
	  background-color: blue;
	}

实例显示
在这里插入图片描述

3. position实现、

基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序。
缺点：有顶部对齐问题，需要进行调整，注意中间的高度为整个内容的高度

.container{
  background-color: rgb(78, 76, 76);
}
.left{
  height:100%;
  width:100px;
  position: absolute;
  top:0;
  left:0;
  background-color: red;	
}
.right{
  height:100%;
  width:200px;
  position: absolute;
  top:0;
  right:0;
  background-color: green;
}
.main{
  height:100%;
  margin: 0 220px 0 120px;
  background-color: blue;
}

实例显示
在这里插入图片描述

4. float和BFC配合圣杯布局

必须将中间部分的HTML结构写在最前面，三个元素均设置向左浮动。两侧元素宽度固定，中间设置为100%；然后利用左侧元素负的margin值进行偏移，覆盖在中间的宽度之上；右侧的元素同样利用负的margin值进行覆盖

<div class="container">
        <div class="middle">
           <div class="main">456</div>
        </div>
        <div class="left">123    </div>
        <div class="right">789</div>
    </div>
    
.container{
  overflow: hidden;
}
.left{
  height:100%;
  width:100px;
  float: left;
  margin-left: -100%;
  background-color: red;	
}
.middle{
  float: left;
  width: 100%;
  background-color: gray;
}
.right{
  height:100%;
  width:200px;
  float: left;
  margin-left: -200px;
  background-color: green;
}
.main{
  margin: 0 220px 0 120px;
  background-color: blue;
}

实例显示
在这里插入图片描述

5. table布局

将父级设为table属性，其子元素都设为单元格，table-cell，
注意，需要将左中右按顺序写。

	<div class="container">
        <div class="left">123    </div>
        <div class="main">456</div>
        <div class="right">789</div>
    </div>

.container{
  display: table;
  width: 100%;
}
.container>div{
  display: table-cell;
}
.left{
  width:100px;
  background-color: red;	
}
.right{
  width:200px;
  background-color: green;
}
.main{
  margin: 0 220px 0 120px;
  background-color: blue;
}

6. 总结

纯float的三栏布局需要将中间的内容放在最后；
绝对定位的三栏布局：元素对齐有点问题
圣杯布局：容器内不能撑开高度
flex布局，基本没有大的缺点

fc（格式化上下文）

Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。

1. IFC

(Inline Formatting Contexts)直译为"行内格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)

IFC有的特性

IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。
IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。

IFC的应用

水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

BFC

Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC特性

内部的盒会在垂直方向一个接一个排列；
处于同一个BFC中的元素相互影响，可能会发生外边距叠加，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加；
每个元素的margin box的左边，与容器块border box的左边相接触；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
BFC的区域不会与float 的元素区域重叠。

触发BFC特性的

body 根元素
浮动元素：float 不是 none
绝对定位：position 为 absolute 或 fixed
行内块元素（元素的 display 为 inline-block）
overflow 值不为 visible 的块元素
display 值为 table-cell, table-caption, inline-block，flow-root

GFC

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

GFC将改变传统的布局模式，他将让布局从一维布局变成了二维布局。简单的说，有了GFC之后，布局不再局限于单个维度了。这个时候你要实现类似九宫格，拼图之类的布局效果显得格外的容易。

FFC

FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container）。

Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。

FFC与BFC的区别

- Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素

- vertical-align 对 Flexbox 中的子元素是没有效果的

- float 和 clear 属性对 Flexbox 中的子元素是没有效果的，也不会使子元素脱离文档流(但是对Flexbox 是有效果的！)

- 多栏布局（column-*）在 Flexbox 中也是失效的，就是说我们不能使用多栏布局在 Flexbox 排列其下的子元素

- Flexbox 下的子元素不会继承父级容器的宽

Q_Quiet

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
两栏布局，三栏布局，格式化上下文

两栏布局1. float + margin-left使用float：left，将左边块的位置固定，再margin-left；将左边框的位置空出来，构成两栏布局。 <div class="left"> 123 </div> <div class="right"> 456 </div> *{ margin: ...
复制链接

扫一扫