前端CSS3弹性布局方式

前端开发利用浏览器 前端开发产品开发流程 前端和游戏开发哪个好学

1)最常见的 浮动、定位
2)自适应 百分比布局
3)响应式 @media媒体查询
4)弹性布局 display:flex;
5)亲测 兼容ie11、10 谷歌 火狐 安卓 很遗憾没苹果手机
6)需要学习视频+Q 280034684

通过下方的小案例能清楚的看到:
给父元素设置 display:flex;
给子元素设置flex: 来控制比例
比如
=1 平分父元素的宽度
hover *=5 平分成8份鼠标移动上去的div占5份其余占3份
html 代码

<!doctype html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 500px;
        }
        .box div {
            height: 100px;
            border: 1px #00a6f1 solid;
            flex: 1;
            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            transition: all .3s;
        }
        .box div:hover {
            flex: 5;
        }
    </style>
</head>
<body>
    <div class=”box”>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

前端开发浏览器兼容问题 前端开发用的谷歌浏览器版本 开发前端 流程图

» 本文来自:前端开发者 » 《前端CSS3弹性布局方式》
» 本文链接地址:https://www.rokub.com/5409.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!