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

前端  /  管理员 发布于 7年前   190

一、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阴影效果的比较之drop-Shadow与box-Shadow
    下一条：
    CSS -webkit-box-orient: vertical属性编译后丢失问题详解

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客