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


Posted in HTML / CSS onMay 15, 2019

一、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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 #HTML / CSS
CSS3 实现童年的纸飞机
May 05 #HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 #HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 #HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 #HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 #HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 #HTML / CSS
You might like
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
php笔记之:php数组相关函数的使用
2013/04/26 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
js表单验证实例讲解
2016/03/31 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
Python复制文件操作实例详解
2015/11/10 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
python实现批量转换图片为黑白
2020/06/16 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
python如何操作mysql
2020/08/17 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
儿科护士自我鉴定
2013/10/14 职场文书
大专应届生个人简历的自我评价
2013/10/15 职场文书
女方回门宴答谢词
2014/01/14 职场文书
大学生求职自我评价
2014/01/16 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
设备收款委托书范本
2014/10/02 职场文书
小学中等生评语
2014/12/29 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技