css和css3弹性盒模型实现元素宽度高度自适应

一、css实现左侧宽度固定右侧宽度自适应

1、定位

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>自适应</title>    <style>        *{            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;        }    </style></head><body>    <div class="left">        定宽    </div>    <div class="right">        自适应</div></body></html>

2、浮动

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>自适应</title>    <style>        *{            padding: 0;            margin: 0;        }        .left{            background: red;            width: 200px;            height: 200px;            float: left;/*浮动*/        }        .right{            background: blue;            height: 200px;            margin-left: 210px;        }    </style></head><body>    <div class="left">        定宽    </div>    <div class="right">        自适应</div></body></html>

3、margin

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>自适应</title>    <style>        *{            padding: 0;            margin: 0;        }        .left{            background: red;            width: 200px;            height: 200px;        }        .right{            background: blue;            height: 200px;            margin-top: -200px;/*margin*/            margin-left: 210px;        }    </style></head><body>    <div class="left">        定宽    </div>    <div class="right">        自适应</div></body></html>

二、css3弹性盒模型实现自适应

1、上下高度固定中间高度自适应

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        *{            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;        }    </style> </head><body><div id="contain">    <div id="top">你好</div>    <div id="center">你好</div>    <div id="bottom">你也好</div></div></body></html>

2、左侧宽度固定右侧宽度自适应

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        * {            margin: 0;            padding: 0;        }         #contain {            display: flex; /*父元素设置该属性*/        }         #left {            width: 100px;            height: 200px;            background: #fff8a8;            margin-right: 10px;        }         #right {            flex: 1; /*所占比例/份数*/            height: 200px;            background: #ff9bad;        }    </style></head><body><div id="contain">    <div id="left"></div>    <div id="right"></div></div></body></html>

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

css和css3弹性盒模型实现元素宽度高度自适应