前端CSS3弹性布局方式
摘要：前端开发利用浏览器 前端开发产品开发流程 前端和游戏开发哪个好学 1）最常见的 浮动、定位 2）自适应 百分比布局 3）响应式 @media媒体查询 4）弹性布局 display:flex; 5）亲测 兼容ie11、10 谷歌 火狐 安卓 很遗……
前端开发利用浏览器 前端开发产品开发流程 前端和游戏开发哪个好学
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
近期评论