html弹性盒⼦⾃适应⽐例,css和css3弹性盒模型实现元素宽度
（⾼度）⾃适应
⼀、css实现左侧宽度固定右侧宽度⾃适应
1、定位
⾃适应
*{
padding: 0;
margin: 0;
}
.left{
background: red;
width: 200px;
height: 200px;
position: absolute;/*定位*/
left: 0;
top:0;
}
.right{
background: blue;
height: 200px;
margin-left: 210px;
}
定宽
⾃适应
2、浮动
⾃适应
*{
css固定定位padding: 0;
margin: 0;
}
.left{
background: red;
width: 200px;
height: 200px;
float: left;/*浮动*/
}
.right{
background: blue;
height: 200px;
margin-left: 210px;
}
定宽
⾃适应
3、margin
⾃适应
*{
padding: 0;
margin: 0;
}
.left{
background: red;
width: 200px;
height: 200px;
}
.right{
background: blue;
height: 200px;
margin-top: -200px;/*margin*/ margin-left: 210px;
}
定宽
⾃适应
⼆、css3弹性盒模型实现⾃适应1、上下⾼度固定中间⾼度⾃适应*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
}
#contain{
display: flex;
flex-direction: column;/*列 垂直⽅向*/
height: 100%;/*全屏效果 该元素及其⽗元素及html、body height：100%*/ }
#top{
height: 200px;
background: red;
}
#center {
flex: 1;
background: blue;
}
#bottom{
height: 100px;
background: green;
}
你好
你好
你也好
2、左侧宽度固定右侧宽度⾃适应
* {
margin: 0;
padding: 0;
}
#contain {
display: flex; /*⽗元素设置该属性*/
}
#left {
width: 100px;
height: 200px;
background: #fff8a8;
margin-right: 10px;
}
#right {
flex: 1; /*所占⽐例/份数*/ height: 200px; background: #ff9bad; }

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