双飞翼布局
代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>双飞翼布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,
.footer{
border: 1px solid #333;
background: #aaa;
text-align: center;
}
.sub,
.main,
.extra{
float: left;
min-height: 130px;
}
.sub{
margin-left: -100%;
width: 200px;
background: red;
}
.extra{
margin-left: -220px;
width: 220px;
background: blue;
}
.main{
width: 100%;
}
.main-inner{
margin-left: 200px;
margin-right: 220px;
min-height: 130px;
background: green;
word-break: break-all;
}
.footer{
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="main">
<div class="main-inner">
<h4>main</h4>
<p>HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</p>
</div>
</div>
<div class="sub">
<h4>sub</h4>
<p>oooooooooooooo
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000</p>
</div>
<div class="extra">
<h4>extra</h4>
<p>BBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBB
88888888888888888888</p>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
这里相应解释一下，中间的main设置了width：100%，所以后面的浮动元素没有位置换行到了下一行，但是实际还是相当于排在main的后面。此时，left块使用margin-left：-100%，则让left块向左边移动了父元素100%的距离，成功移动到了main的左边，对于右侧元素，使用margin-left：-自身width，则可以移动到main的右侧，最后，给main加一个wrap，给上合适的margin，左右侧栏设置position：relative方便调整，布局完成。
BFC
创建BFC的方法：
- 根元素或其它包含它的元素
- 浮动元素的不是 none
- 绝对定位的元素 (元素具有为 absolute或 fixed)
- 内联块 inline-blocks (元素具有display： inline-block）
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- 块元素具有overflow且值不是 visible
BFC的特点：
- 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box叠加。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
- 计算BFC的高度时，浮动元素也参与计算。
margin负值
对于static元素：
当元素没有设置width（或者width：auto）时，margin left/right为负值会使元素向指定的方向拉伸，增加元素的宽度。
当元素设置了width属性时，margin left/top设置负值会使元素向左/上偏移，而margin right/bottom会将后续的元素拖拉进来，覆盖本来的元素。我认为这与BCF中margin box的左边会与包含块的左边相接触以及BFC内部的Box会在垂直方向，从顶部开始一个接一个地放置这两个规则有关。
对于浮动元素：
如果向浮动的方向设置负margin，会使元素向这个方向移动，如果设置与浮动方向相反的负margin，会使后面的浮动元素覆盖本身。著名的双飞翼布局就是将浮动和margin负值应用起来实现的。
Flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
flex容器结构
容器上的属性
以下六个属性设置在容器上
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1 . flex-direction决定了主轴的方向（也就是项目的排列顺序）
主轴的四个方向
这个属性可能有四个值
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
2 .flex-wrap属性
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
可能为以下下三个值：
1 .nowrap(默认)：不换行
2 . wrap：换行，第一行在上方。
3 . wrap-reverse：换行，第一行在下方。
3 . flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: <flex-direction> || <flex-wrap>;
4 . justify-content属性
justify-content: flex-start | flex-end | center | space-between | space-around;
justify-content
它可能有五个值：
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5 . align-items
align-items: flex-start | flex-end | center | baseline | stretch;
align-items
6 .align-content
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
image.png
该属性可能取得值
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
项目上的属性
以下六个属性设置在项目上
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1 .order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2 .flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
- align-self属性
align-items: flex-start | flex-end | center | baseline | stretch;
属性和align-items一致
网友评论