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 transform的skew属性值图文详解
Jul 21 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 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字符串处理的10个简单方法
2010/06/30 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
JS验证字符串功能
2017/02/22 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
JS Math对象与Math方法实例小结
2019/07/05 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
python文本数据相似度的度量
2018/03/12 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
英国航空官网:British Airways
2016/09/11 全球购物
教师职称自我鉴定
2014/02/12 职场文书
商业房地产广告语
2014/03/13 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
五年级学生评语
2014/04/22 职场文书
房地产推广策划方案
2014/05/19 职场文书
施工工地安全标语
2014/06/07 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
python实现学员管理系统(面向对象版)
2022/06/05 Python