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>