双飞翼布局
代码如下
<!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-itemsalign-items: flex-start | flex-end | center | baseline | stretch;
align-items
6 .align-contentalign-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一致
作者：王小维WW
链接：https://www.jianshu.com/p/445a89eb63bb
共同学习，写下你的评论
评论加载中...
作者其他优质文章
