目录
CSS2两列布局
商品列 注意 要给right开启BFC
body{ min-width: 400px; }
#left{width: 200px;height: 100px;background: pink;float: left;}
#right{height: 100px;background: deeppink;
/*注意：要给right开启BFC做一个干净的两列布局的关键*/
overflow: hidden;}什么是BFC?
- BFC（Block Formatting Context）直译为“块级格式化上下文”。它是一个独立的渲染区域，只有块级盒子参与， 它规定了内部的Block-level Box 如何布局，并且与这个区域外毫不相干
BFC布局规则
- 内部的Box会在垂直方向，一个接一个的放置
- BFC的区域不会与float box重叠。
- 内部的Box垂直方向的距离由margin决定。属于同一个BFC的相邻Box的margin会发生重叠
- 计算BFC的高度时，浮动元素也参与其中计算，（清除浮动 haslayout）
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
BFC什么时候出现（哪些元素会生成BFC）
- 根元素
- float属性不为none
- position为absolute或fixed
- overflow不为visible
- display为inline-block,table-cell,table-caption,flex,inline-flex
CSS2三列布局
CSS2三列布局之圣杯布局
1.两边固定 当中自适应
2.当中列要完整显示
3.当中列要优先加载
<!--首先我们要把三列放在一个content容器中-->
<div id="content">
<div class="middle"></div><!--中间列优先加载-->
<div class="left"></div>
<div class="right"></div>
</div>*{margin:0;padding:0;}
div{height:100px;}
/*浮动: 搭建完整的布局框架*/
/*.middle{float: left;background: green;} 宽度没有的话，width会为0*/
.middle{float: left;background: green;width:100%;}
.left,.right{background: pink;width:200px;}
/*margin 为负值:调整旁边两列的位置(使三列布局到一行上)，此时中间列并不能完全显示*/
.left{float: left;margin-left: -100%;}
.right{float: left;margin-left: -200px;}
/*将外部的content内边距设为左右各为200px*/
#content{padding: 0 200px;}
/*两边设置相对定位，分别向左向右移动200px*/
.left{position: relative;left: -200px;}
.right{position: relative;right: -200px;}以上，圣杯布局完工~
CSS2三列布局之双飞翼布局
两组实现的对比:
1.俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
2.两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
3.两种布局方式的不同之处在于如何处理中间主列的位置：
圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
<div class="middle">
<div class="m-inner">middle</div>
</div>.m-inner{padding: 0 200px;}以上，双飞翼完工~
CSS2垂直水平居中问题
水平居中
#test{
width: 200px;
height: 200px;
line-height: 200px;/*文字垂直方向居中*/
background: pink;
margin: 0 auto;/*块元素水平方向居中*/
text-align: center;/*文字水平方向居中*/
}垂直水平居中
已知高度的元素水平垂直居中方案height:100px width:100px
方案一：position:absolute;lt:50%;ml,mr:-50px
#inner{position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;
width: 100px;height: 100px;background: deeppink; }绝对定位盒子的特性
高宽有内容撑开
水平方向上： left + right + width + padding + margin = 包含块padding区域的尺寸
0 0 100 0 0 400
垂直方向上： top + bottom + height + padding + margin = 包含块padding区域的尺寸
0 0 100 0 0 600方案二：position:absolute;lrtb:0;margin:auto;
#inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
width: 100px;height: 100px;background: deeppink;}未知高度的垂直水平居中方案(包含块一定的是容器) （绝对定位盒模型的特性）
position:absolute;lt:50%;transform:translate3d(-50%,-50%,0);
#inner{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);background:deeppink;}图片垂直水平居中
<style>
*{margin: 0;padding: 0;}
html,body{height: 100%;}
body{text-align: center;}
/*关键是这里的 vertical-align*/
body:after{content: "";display: inline-block;height: 100%;vertical-align: middle;}
img{vertical-align: middle;}
</style>
<body>
<img src="q_r1.jpg">
</body>