1.三栏布局: 圣杯布局 和 双飞翼布局
1. 圣杯布局 和 双飞翼布局解决的问题是一样的:就是两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染.
2. 圣杯布局 和双飞翼布局 解决问题的方案在前一半是相同的:也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,已形成三栏布局.
3. 具体的不同以代码开始对比:
(1) 圣杯布局的html代码:
middle部分 首先要放在 container 的最前部分,然后是 left,right.
<body>
<!-- 头部 -->
<div class="header">
<h1>Header</h1>
</div>
<!-- 主体 -->
<div class="container">
<div class="middle">
<h4>middle</h4>
</div>
<div class="left">
<h4>left</h4>
</div>
<div class="right">
<h4>right</h4>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<h4>footer</h4>
</div>
</body>
(2)双飞翼布局的代码:
双飞翼布局始于淘宝UED.如果把三栏布局比作一只大鸟,可以把 main看作是鸟的身体, sub和extra 则是鸟的翅膀.
这个布局的实现思路: 先把最重要的身体部分放好,然后再将翅膀移动到适当的地方.
其实和 圣杯布局 差不多.
<body>
<!-- 头部 -->
<div class="header">
<h1>Header</h1>
</div>
<!-- 主体 -->
<div class="main">
<div class="main-inner">
<h4>main</h4>
</div>
</div>
<!-- 左侧 -->
<div class="sub">
<h4>sub</h4>
</div>
<!-- 右侧 -->
<div class="extra">
<h4>extra</h4>
</div>
<!-- 底部 -->
<div class="footer">
<h4>footer</h4>
</div>
</body>(3) 圣杯布局的css代码:
<style>
*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
}
/*==== 头部和底部共同的样式 =====*/
.header,.footer{
border: 1px solid red;
background: #399;
text-align: center;
height: 50px;
line-height: 50px;
color: #fff;
}
/*==== 主体部分的样式 =====*/
.container{
border: 1px dashed #333;
background: pink;
padding: 0 220px 0 220px;
overflow: hidden;
}
/*==== 中间、左侧和右侧共同的样式 =====*/
.left,.middle,.right{
position: relative;
float: left;
min-height: 130px;
line-height: 130px;
text-align: center;
}
/*==== 主体中间的样式 =====*/
.middle{
width: 100%;
background: #ccffff;
word-break: break-all;
}
/*==== 主体左侧的样式 =====*/
.left{
left:-200px;
margin-left: -100%;
width: 200px;
background: #99ffff;
}
/*==== 主体右侧的样式 =====*/
.right{
right:-220px;
margin-left: -220px;
width: 200px;
background: #ccff99;
}
/*==== 底部样式 ====*/
.footer{
clear: both;
}
</style>
(4) 双飞翼布局的css代码:
<style>
*{
margin: 0;
padding: 0;
}
body{
min-height: 700px;
}
/*==== 头部和底部共同的样式 =====*/
.header,.footer{
border: 1px solid red;
background: #399;
text-align: center;
height: 50px;
line-height: 50px;
color: #fff;
}
/*==== 中间、左侧和右侧共同的样式 =====*/
.sub,.main,.extra{
float: left;
min-height: 130px;
line-height: 130px;
text-align: center;
}
/*==== 中间的样式 =====*/
.main{
width: 100%;
}
.main .main-inner{
margin-left: 200px;
margin-right: 220px;
min-height: 130px;
background: #ccffff;
word-break: break-all;
}
/*==== 左侧的样式 =====*/
.sub{
margin-left: -100%;
width: 200px;
background: #99ffff;
}
/*==== 右侧的样式 =====*/
.extra{
margin-left: -220px;
width: 200px;
background: #ccff99;
}
/*==== 底部样式 ====*/
.footer{
clear: both;
}
</style>
4. 双飞翼布局的好处:
- 主要内容优先加载的优化;
- 兼容目前所与的主流浏览器,包括IE6;
- 实现不同的布局方式可以通过调整相关CSS属性即可实现.
2. Flex 弹性布局
一:基本概念
- 任何一个容器都可以指定为Flex布局
.box{
display: flex;
display: inline-flex; /*行内元素使用flex布局*/
display: -webkit-flex; /*Webkit内核的浏览器必须加上-webkit前缀*/
}- 采用Flex布局的元素称为**Flex容器(flex container)**,简称**容器**。它的所有**子元素**自动成为**容器成员**,称为**Flex项目(flex item)**,简称"项目"。
- 容器默认存在2根**轴**:水平的**主轴(main axis)**、垂直的**交叉轴(cross axis)**。
- 主轴的开始位置(与边框的交叉点)叫main start,结束的位置叫main end;
- 交叉轴的开始位置叫cross start , 结束的位置叫cross end。
- 项目默认沿**主轴**排列。
- 单个项目占据的主轴空间叫main size,占据的交叉空间叫cross size。
二:容器的属性
在容器上设置有6个属性:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
2.1 flex-direction属性
- 作用: 决定主轴的方向(即项目的排列方向)。
.box{ flex-direction: row | row-reverse | column | column-rerverse } - 有4个可能值:
- row(默认值): 主轴为水平方向,起点在左端。
- row-reversr: 主轴为水平方向,起点在右端。
- column: 主轴为垂直方向,起点在上沿。
- column-reverse: 主轴为垂直方向,起点为下沿。
2.2 flex-wrap属性
- 作用: 定义一条轴线排不下的时候如何换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse } -
默认情况下,项目都在一条线(轴线)上。
-
有3个可能值:
-
nowrap : (默认值),不换行。
-
wrap : 换行,第一行在上面。
-
wrap-reserve: 换行,第一行在下方。
2.3 flex-flow属性
- flex-direction属性和 flex-wrap属性的**简写形式**。
.box{
flex-flow : <flex-direction> || <flex-wrap>
}- 默认值: row nowrap
2.4 justify-content属性
- 作用: 定义项目在主轴上的对齐方式。
.box{ justify-content: flex-start | flex-end | center | space-between | space-around }
- 有 5 个可能值:
- flex-start : 默认值,左对齐。
- flex-end : 右对齐。
- center : 居中。
- space-between: 两端对齐,项目之间的间隔都是相等的。(项目左右端居贴着容器框)
- space-around: 每个项目两侧的间隔相等.所以,项目之间的间隔 比 项目与边框的间隔 大一倍。
2.5 align-items属性
- 作用: 定义项目在交叉轴上如何对齐。
.box{ align-items: flex-start | flex-end | center | baseline | stretch } -
具体的对齐方式 与 交叉轴的方向有关.
* 假设交叉轴的方向从上往下,有 5个可能值:
* flex-start : 交叉轴的起点对齐。
* flex-end : 交叉轴的终点对齐。
* center : 交叉轴的中点对齐。
* baseline: 项目的第一行文字的基线对齐。
* stretch : 默认值。如果项目**未设置高度/设置为auto**,将占满整个容器的高度。
2.6 align-content属性
* 作用: 定义了多根轴线的对齐方式。
.box{
align-content:flex-start | flex-end | center | space-between | space-around | stretch ;
}
* 注意: 如果项目只有一根轴线,该属性不生效。
* 有6个可能值:
* flex-start : 与交叉轴的起点 对齐。
* flex-end : 与交叉轴的终点 对齐。
* center : 与交叉轴的中点 对齐。
* space-between : 与交叉轴两端对齐, 轴线之间的间隔平均分布。
* space-around : 每根轴线两侧的间隔相等。所以,周线之间的间隔 比 周线与边框之间的间隔 大一倍。
* stretch:默认值。轴线占满整个交叉轴。
三:项目的属性
* 在项目上设有6个属性值:
* order
* flex-grow
* flex-shrink
* flex-basis
* flex
* align-self
3.1 order属性
* 作用:定义项目的排列顺序。
* 数值越小,排列越靠前,默认为0。
.item{
order: <integer> /* 例如: 1 -1 99 */
}
3.2 flex-grow属性
* 作用: 定义项目的放大比例。
* 默认值为0,即:如果存在剩余空间也不放大
.item{
flex-grow: <number> /* default: 0 */
}
* 如果所有项目的flex-grow属性值都为1,则它们将等分剩余空间(如果有的话)。
* 如果一个项目的flex-grow属性值为2,其它项目都为1,则 前者占据的剩余空间 将比 其他项 多一倍。
3.3 flex-shrink属性
* 作用: 定义了项目的缩小比例。
* 默认值为1,即: 如果空间不足,该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
* 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
* 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
3.4 flex-basis属性
* 作用: 定义了在分配多余空间之前，项目占据的主轴空间（main size）。
* 默认值为auto，即项目的本来大小。
* 浏览器根据这个属性，计算主轴是否有多余空间。
.item {
flex-basis: <length> | auto; /* default auto */
}
* 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
3.5 flex属性
* flex-grow, flex-shrink 和 flex-basis的简写。
* 默认值为 0 1 auto。后两个属性可选。
* 有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
* 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
3.6 align-self属性
* 作用: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
* 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
* 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。