左中右布局的五种实现⽅式  总结前端知识点后的随笔...
  页⾯样式
  页⾯代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0px;
border: 0px;
box-sizing:border-box;
}
div{
border: 1px solid black;
}
.left{
height: 100px;
width: 100px;
background-color: red;
}
.right{
height: 100px;
width: 100px;
background-color: blue;
}
.center{
height: 100px;
}
.floatDiv .left{
float: left;
}
.floatDiv .right{
float: right;
}
.
floatDiv .center{
}
.positionDiv .left{
position: absolute;
left: 0px;
}
.positionDiv .right{
position: absolute;
right: 0px;
}
.positionDiv .center{
margin-left: 100px;
margin-right: 100px;
}
.tableDiv{
display: table;
width:100%;
}
.tableDiv .left{
display: table-cell;
}
.tableDiv .right{
display: table-cell;
}
.tableDiv .center{
display: table-cell;div中的div居中
}
.flexDiv{
display:flex;
}
.flexDiv .left{
}
.flexDiv .right{
}
.flexDiv .center{
flex:1;
}
.gridDiv{
display: grid;
width: 100%;
grid-template-rows:100px;
grid-template-columns:100px auto 100px;
}
.gridDiv .left{
}
.gridDiv .right{
}
.gridDiv .center{
}
</style>
</head>
<body>
<h1>float实现布局</h1>
<div class="floatDiv">
<div class="left"></div>
<div class="right"></div>
<div class="center">
float布局时，居中的div必须要放在最后。居中的div的模型宽度为整个页⾯，但是展⽰的时候会在可视范围内展⽰。即不会展⽰⼤屏居左或者居右的div下⾯。
<strong>
因为float的初衷是实现⽂字环绕图⽚
</strong>
，当我们缩⼩浏览器的宽度时，会发现⽂字会环绕在居左和居右的div周围。
</div>
</div>
<br/><br/>
<h1>position实现布局</h1>
<div class="positionDiv">
<div class="left"></div>
<div class="right"></div>
<div class="center">
position布局时，居中的div必须放到最后。
<strong>
与float不同的事，⽂字会被左右的div遮盖
</strong>
，所以需要使⽤margin-left:100px；来调整div
</div>
</div>
<h1>table + table-cell实现布局</h1>
<div class="tableDiv">
<div class="left"></div>
<div class="center">
使⽤display:table实现左中右时，
<strong>
居中的div必须放中间
</strong>
。另外，⽗元素必须设置width:100%; 。并且，居中的div的宽度不再为页⾯的宽度</div>
<div class="right"></div>
</div>
<h1>flex实现布局</h1>
<div class="flexDiv">
<div class="left"></div>
<div class="center">
使⽤flex实现左中右时，居中的div设置flex:1，居中的div的宽度不再为页⾯的宽度</div>
<div class="right"></div>
</div>
<h1>grid实现布局</h1>
<div class="gridDiv">
<div class="left"></div>
<div class="center">
使⽤grid实现左中右时，⽹格内部的div的宽度和⾼度都由⽗标签设置！
</div>
<div class="right"></div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。