两栏布局
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 定义了伸缩容器内伸缩项目该如何布局。