CSS之经典布局和BFC中的2列布局
2019-07-22 本文已影响27人
追逐_chase
web.jpeg
1.三列布局
我们在开发中经常使用到，2边固定，中间列自动，三列布局的特点:1. 2边固定，当中自适应 2.当中列要完整显示，当中列 要优先显示
首先我们研究一下，使用定位实现三列布局
<style>
*{
padding: 0;
margin: 0;
}
body{
/* 设置最小宽度 */
min-width: 600px;
}
div {
height: 100px;
}
.left{
background-color: yellowgreen;
width: 200px;
position: absolute;
left: 0;
top: 0;
}
.middle{
background-color: beige;
/* 让中间列 的内容显示出来 */
padding: 0 200px;
}
.right{
background-color: blueviolet;
width: 200px;
position: absolute;
right: 0;
top: 0;
}
</style>
<body>
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</body>
这样布局有一个严重的缺陷 ，如下图，当屏幕的宽度小于
600px的时候，滑动的时候，下图的情况
Untitled.gif
这个
bug要这样解决呢？ 使用浮动可以这三列布局吗
<style>
*{
padding: 0;
margin: 0;
}
body{
/* 设置最小宽度 */
min-width: 600px;
}
div {
height: 100px;
}
.left{
background-color: yellowgreen;
width: 200px;
float: left;
}
.middle{
background-color: beige;
}
.right{
background-color: blueviolet;
width: 200px;
float: right;
}
</style>
<body>
<!--
1. 2边固定，当中自适应
2. 当中列要完整显示，当中列 要优先显示
3. 最好不要使用定位处理布局框架
-->
<div class="left">left</div>
<!-- 使用浮动 需要调整一下 布局 -->
<div class="right">right</div>
<!--
如果 中间放在第二个的话 right浮动之后，3个是不会出现在同一列的
如果浮动的元素上边是一个没有浮动的块级元素，则浮动的元素不会超过块级元素
-->
<div class="middle">middle</div>
</body>
Untitled.gif
解决上述问题的布局方式，圣杯布局和双飞翼布局
圣杯布局
- 使用
padding撑开content盒子 2.content盒子的子盒子浮动3.浮动的盒子模型，通过外边距margin在同一列 4.通过定位调整2边盒子的位置
<style>
*{
padding: 0;
margin: 0;
}
body{
min-width: 600px;
}
header{
height: 100px;
background-color: antiquewhite;
}
footer {
height: 100px;
background-color:rebeccapurple;
}
.content{
background-color: rgb(67, 87, 36);
/* 显示中间的盒子的 内容 */
padding: 0 200px;
/* 盒子等高 */
overflow: hidden;
}
.content .left,.content .right,.content .middle{
/* 使盒子等高 */
padding-bottom: 10000px;
/* 影响盒子之间的距离 */
margin-bottom: -10000px;
}
.content .middle{
background-color: palevioletred;
float: left;
width: 100%;
}
.content .left,.content .right{
width: 200px;
float: left;
/* 相对定位 是盒子 */
position:relative;
}
.content .left{
background-color: brown;
margin-left: -100%;
/* 使左边盒子 靠近左边 */
left: -200px;
}
.content .right{
background-color: royalblue;
margin-left: -200px;
/* 是右边盒子 靠近右边 */
right: -200px;
}
/* 清楚浮动 */
.clearfix::after,.clearfix::before{
content: "";
display: block;
}
.clearfix::after{
clear: both;
}
.clearfix{
zoom: 1;
}
</style>
<!-- 圣杯布局 -->
<header>头部 header</header>
<div class="content clearfix">
<!-- 当中列优先加载 -->
<section class="middle">
middle <br>
middle <br>
middle <br>
middle <br>
middle <br>
middle <br>
middle <br>
middle <br>
middle <br>
middle <br>
middle <br>
middle <br>
middle <br>
middle <br>
middle <br>
middle <br>
</section>
<aside class="left">left</aside>
<aside class="right">right</aside>
</div>
<footer>尾部 footer</footer>
image.png
双飞翼布局
对比：
1.2种布局方式都是把主队列放在文档流中，主列优先加载
2.2中布局方式都是使用浮动，然后通过负外边距形成3列布局
3.不同之前是
3.1圣杯布局是利用 父容器的左右内边距+ 2列性对定位
3.2双飞翼布局是在主列中嵌套一个新父级元素，利用主列的左右外边距进行布局调整
<style>
*{
padding: 0;
margin: 0;
}
body{
min-width: 600px;
}
header,footer{
height: 40px;
line-height: 40px;
text-align: center;
background-color: antiquewhite
}
.content{
overflow: hidden;
}
.content .middle,.content .left,.content .right{
float: left;
/* 等高 */
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.content .middle{
background-color: plum;
/* 中间第一个盒子 宽度是100% 才可以自动缩放 */
/* 不能在给这个盒子 添加 padding */
width: 100%;
}
.content .middle .m_center{
padding: 0 200px;
}
.content .left{
background-color: aquamarine;
width: 200px;
margin-left: -100%;
}
.content .right{
background-color: pink;
width: 200px;
margin-left: -200px;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
</style>
<body>
<!-- 头部 -->
<header>
<h1>这是头部</h1>
</header>
<!-- 中间列 -->
<div class="content clearfix">
<section class="middle">
<!-- 添加子元素 使盒子 -->
<section class="m_center">
中间栏 <br>
中间栏 <br>
中间栏 <br>
中间栏 <br>
中间栏 <br>
中间栏 <br>
中间栏 <br>
中间栏 <br>
中间栏 <br>
中间栏 <br>
中间栏 <br>
中间栏 <br>
中间栏 <br>
中间栏 <br>
中间栏 <br>
</section>
</section>
<aside class="left">做侧边栏</aside>
<aside class="right">右侧边栏</aside>
</div>
<!-- 尾部 -->
<footer >
<h2>这是尾部</h2>
</footer>
</body>
image.png
移动端的 粘连布局
现象:
1.当 mian 的高度足够高的时候，紧跟在 main后面的元素 footer 会跟在main元素后面
2.当mian的高度比较 短时， footer可以 粘连 在屏幕的底部
原理: 给内容区域设置一个
min-height =100%的高度和一个 footer的padding-bottom,
Untitled.gif
image.png
<style>
* {
padding: 0;
margin: 0;
}
html,body {
height: 100%;
}
body{
background: rgba(0, 0, 0, 0.5);
}
.content {
min-height: 100%;
}
.content .mian{
min-height: 100%;
padding-bottom: 40px;
}
.content .mian p {
text-indent: 2em;
color: #ffffff;
}
.footer{
height: 40px;
background-color: pink;
line-height: 40px;
text-align: center;
color: #ffffff;
margin-top: -40px;
}
</style>
BFC ---块级格式的上下文
- BFC规则
- 内部的BOX会在垂直方向，一个接一个地放置(块级元素 独占一行)
- BFC的区域不会与float BOX重叠
- 内部BOX垂直方向的距离由margin决定，属于
同一个BFC的2个相邻的BOX的margin会发生重叠 - 计算BFC的高度时，
浮动元素也参与计算 - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之如此
- BFC什么时候出现
根元素float属性不为noneposition不为absolute和 fixedverflow不为visibledisplay为inline-blok.flex,inline-flex
body{
min-width: 600px;
}
.left{
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.right{
height: 200px;
background-color: antiquewhite;
/* 开启BFC */
overflow: hidden;
}
image.png
