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中border-image的使用
Jul 18 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 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
Php+SqlServer实现分页显示
2006/10/09 PHP
深入php数据采集的详解
2013/06/02 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
python 类详解及简单实例
2017/03/24 Python
用python找出那些被“标记”的照片
2017/04/20 Python
python爬虫超时的处理的实例
2018/12/19 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
python中rc1什么意思
2020/06/19 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
综合测评自我鉴定
2013/10/08 职场文书
教师远程培训感言
2014/03/06 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
销售开票员岗位职责
2015/04/15 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
关爱空巢老人感想
2015/08/11 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL