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、浮动

自适应

*{

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;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。