1. Float布局
<style>
.left,.right {
width: 100px;
height: 100px;
float: left;
background-color: pink;
}
.main {
height: 100px;
background-color: cadetblue;
overflow: hidden;
}
.right {
float: right;
}
</style
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
注意: float布局是现在用的比较多的布局很多门户网站目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。
请看mian盒子放在了最下面 这是为什么？ 我们放中间试试
怎么换行了？
因为main是块级 默认
<div class="main"><div> 是块级 标签后面有<br/>换行后在渲染right盒子自然会换行啦！ 至于放中间为什么不换行，这和bfc有关， 我们下一篇文章再讲。
2. Flex布局
<style>
.father {
display: flex;
height: 300px;
}
.left, .right {
width: 100px;
background-color: blanchedalmond;
}
.main {
flex:1;
background-color: cadetblue;
}
</style>
<div class="father">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
注意： ie9一下不兼容
3. table布局
<style>
.box {
height: 500px;
}
.grandfather {
width: 100%;
display: table;
}
.father {
display: table-row;
}
.left,.main,.right {
display: table-cell;
}
.main {
display: table-cell;
background-color: chartreuse;
}
.left, .right {
width: 50px;
background-color: pink;
}
</style>
<div class="box grandfather">
<div class="father">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</div>
注意： 对搜索引擎不友好
4. grid布局
<style>
body,
html {
width: 100%;
height: 100%;
/* 去掉滚动条 */
margin: 0;
}
.container {
width: 100%;
height: 100%;
display: grid;
/* 三栏布局，中间自适应,将左右两栏写死，中间设置1fr自适应分配即可 */
grid-template-columns: 100px 1fr 100px;
/*不写默认是100%,子元素默认撑满单元格高度 */
/* grid-template-rows: 100px; */
}
.left,.right,.con {
height: 100px;
}
.left {
background: skyblue;
}
.right {
background: rebeccapurple;
}
.con {
background: orange;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="con"></div>
<div class="right"></div>
</div>
</body>
注意: 有兼容性问题
5. Proition布局
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
height: 200px;
}
.father {
position: relative;
}
.main {
/* 触发了BFC */
overflow: hidden;
background-color: pink;
}
.left {
width: 50px;
left: 0px;
top: 0px;
position: absolute;
background-color: aquamarine;
}
.right {
width: 50px;
right: 0px;
top: 0px;
position: absolute;
background-color: bisque;
}
.footer {
width: 100%;
height: 50px;
background-color: chartreuse;
}
</style>
<div class="father">
<div class="box left"></div>
<div class="box right"></div>
<div class="box main"></div>
</div>
<div class="footer"></div>
6. 圣杯布局
<style>
* {
margin: 0px;
padding: 0px;
}
.father {
padding: 0px 100px;
border:1px solid red;
}
.left,.right {
height: 200px;
}
.main {
width: 100%;
height: 200px;
display: inline-block;
background-color: cadetblue;
}
.left,.right {
width: 100px;
background-color: pink;
}
.left {
float: left;
margin-left: -100px;
}
.right {
float: right;
margin-right: -100px;
}
</style>
<div class="father">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
注意： 边框下面为什么有空白
因为main盒子设置了display:inlink-block 基线对齐 可以father盒子加font-size:0px解决
.father {
padding: 0px 100px;
border:1px solid red;
font-size: 0px;
}
注意 以后使用display:inlink-block 需要注意盒子对齐方式
6.圣杯布局 中间盒子优先加载
<style>
.left, .right {
width: 100px;
height: 100px;
background-color: #a45;
}
.left {
float: left;
margin-left: -100px;
}
.right {
float: right;
margin-right: -100px;
}
.main {
width: 100%;
height: 100px;
overflow: hidden;
display: inline-block;
background-color: cadetblue;
}
.father {
padding: 0px 100px;
}
</style>
<div class="father">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
7. 双飞翼布局
<style>
* {
margin: 0px;
padding: 0px;
}
.father {
margin: 0px 100px 0px 100px;
/* border: 1px solid red; */
box-sizing: border-box;
}
.main {
width: 100%;
height: 100px;
display: inline-block;
background-color: cadetblue;
}
.left,.right {
width: 100px;
height: 100px;
background-color: pink;
}
.left {
float: left;
margin-left: -100px;
}
.right {
float: right;
margin-right: -100px;
}
</style>
<div class="father">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
注意： 当给中间盒子添加最小宽度， 缩小浏览器会右盒子会换行
