多栏布局的解决方案
-
两栏布局（一边固定一边自适应）
左右两个盒子，左边设置固定的宽度，右边的设置100%；
左边的盒子绝对定位定到左上角 ；
右边的盒子设置margin-left 值的大小等于左侧盒子的宽度 -
三栏布局（两边固定，中间自适应）
圣杯布局
先加载主体 在加载两边 。3个盒子同时进行右浮动，由于先加载中间盒子（宽度为100%）两边通过添加margin的负值使左右盒子跑到第一排。然后在考虑如何解决文字被右侧遮挡问题，可以通过给最外面的大盒子添加margin值并且配合左右盒子自身的定位 来保证中间盒子正常显示。最后给外面最大的盒子添加min-width确保盒子不会掉下来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
* { margin: 0; padding: 0;
.wrap { height: 600px; background: #00f; padding: 0px 200px; min-width: 416px; }
.center { width: 100%; height: 500px; background: pink; float: left;
}
.L { width: 200px; height: 480px; background: lightblue; float: left; margin-left: -100%; position: relative; left: -200px; }
.R { width: 200px; height: 480px; background: yellow; float: left; margin-left: -200px; position: relative; left: 200px; }
</style>
</head>
<body>
<div class="wrap">
<div class="center">中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部分中间的内容部 </div>
<div class="L"> 左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区左侧的内容区 </div>
<div class="R"> 右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区右侧的内容区
</div>
</div>
</body>
</html>双飞翼布局
先加载主体 在加载两边 。3个盒子同时进行右浮动，由于先加载中间盒子（宽度为100%）两边通过添加margin的负值使左右盒子跑到第一排。然后在考虑如何解决文字被右侧遮挡问题，双飞翼是在中间里面的盒子在套一个盒子给内层盒子添加一个左右的margin来控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
* { margin: 0; padding: 0; }
.C { width: 100%; height: 500px; background: red; float: left; }
.L { width: 200px; height: 480px; float: left; margin-left: -100%; background: pink; }
.R { width: 200px; height: 480px; float: left; background: yellow; margin-left: -200px; }
.Con { margin: 0 200px; }
</style>
</head>
<body>
<div>
<div class="C">
<div class="Con"> 中间的内容部分 </div>
</div>
<div class="L">左边的内容部分</div>
<div class="R">右边的内容部分</div>
</div>
</body>
</html>
等高布局一行变高，其他列进行等高变化
方法一：利用margin的负值和padding的正值做一个伪等高。相对来说比较简单。注意父元素要加overflow：hidden
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; }
.wrap { width: 600px; overflow: hidden;
}
.wrap div { min-height: 100px; padding-bottom: 900px; margin-bottom: -900px; float: left; }
.left { width: 150px; background: pink; }
.center { width: 300px; background: lightblue; }
.right { width: 150px; background: lightyellow; } </style></head>
<body> <div class="wrap"> <div class="left">左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试</div> <div class="center"> 中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容 </div> <div class="right">右边右边右边 右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边</div> </div></body>
</html>方法二 由内容进行撑开，给每一列添加相对应的容器，并且进行相互嵌套，并对每个容器中设置背景色（这里需要注意有几多少列就需要多少个容器）
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .clearfix:after { content: ""; display: block; clear: both; }
.wrap { margin: 0 auto; width: 960px; overflow: hidden; }
.bg1 { width: 100%; background: lightblue;
}
.bg2 { width: 100%; background: yellow; position: relative; left: 200px; }
.bg3 { width: 100%; background: pink; position: relative; left: 560px; }
.bg3 div { min-height: 100px; }
.left { width: 200px; float: left; margin-left: -760px; }
.center { width: 560px; float: left; margin-left: -560px; }
.right { width: 200px; float: left; } </style></head>
<body> <div class="wrap"> <div class="bg1"> <div class="bg2"> <div class="bg3 clearfix"> <div class="left">左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试左边测试</div> <div class="center"> 中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容 </div> <div class="right">右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边 </div> </div> </div> </div> </div></body>
</html>大banner
切成多个小图片 使用背景图 背景位置设置center top
- BFC规范（块级格式化上下文）
概念：
块级格式化上下文，它是指一个独立二点块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关
生成：
overflow除了visible
float的值不为none
display 为inline-block
positon中使用fixed和absolute
BFC的特性：
1 内部标签会在垂直方向上一个接一个的放置
2 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
3 每个标签的左外边距与包含的左边界相接触（从左向右）即使浮动标签也是如此
4 BFC的区域不会与flaot的标签区域重复
5 计算 BFC高度的时候，浮动子标签也参与计算
6 BFC 就是页面上一个隔离的独立容器，容器里面的子标签不会影响到外面标签 反之亦然 - H5新增加的语义化标签
- header
- footer
- main（ie9以上也是不支持
- nav
- aside
- section
- article
- figure
- figcaption
- hgroup
- mark（行内
- time（行内
129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
