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 相关文章推荐
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 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中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
javascript 写类方式之五
2009/07/05 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
python下10个简单实例代码
2017/11/15 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
英国足球店:UK Soccer Shop
2017/11/19 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
什么是封装
2013/03/26 面试题
主持人婚宴答谢词
2014/01/28 职场文书
大课间活动实施方案
2014/03/06 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
详解MySQL的半同步
2021/04/22 MySQL
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers