第一题:实现左边固定200px, 左右自适应布局的方法(圣杯布局)
<!--外层框架-->
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer"></div>
<style>
.box{
height:200px;
width:600px;
display:flex;
}
.left{
width:200px;
height:200px;
}
.right{
height:200px;
flex:1;
}
</style>
2.## Css3新盒子模型给左边一个200px的padding
道理和代码同上,就是把rigt 的盒子模型给为display:border-box 宽度不设置
3.## 普通盒子模型,但是子盒子不设置框度,加浮动实现给左边一个200px的margin
首先创建一个大的div盒子,起类名为bix,它含有两个子div盒子,一个类名为left ,一个为right
然后底部区域清除浮动,防止跟随上边的区域一起浮动。
把右边的来名为right的浮动设置框度为100%
<!--外层框架-->
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer"></div>
<style>
// css样式
.box{
height:200px;
width:600px;
padding-left:200px;
}
.footer{
clear:both;
}
.left{
width:200px;
height:200px;
float:left;
}
.right{
width:100%;
height:200px;
}
</style>
- grid网格(考虑浏览器兼容问题),
<style>
.box{
height:200px;
width:600px;
display:grid;
grid-template-columns: 200px auto ;
}
</style>