引导：清除浮动带来的影响
如果不清除浮动就会带来一系列影响，需要在父盒子里加上overflow：hidden属性（或者其他清除浮动的方式）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档标题</title> <style> .father{ border: 1px solid #f00; /*overflow: hidden;*/ } .son{ width: 100px; height: 100px; background-color: pink; border:1px solid deepskyblue; float: left; } </style> </head> <body> <div class="father"> <div class="son"></div> <div class="son"></div> <div class="son"></div> </div> 父盒子垮掉了 </body> </html>
下面的栅格布局可以直接排列盒子不带来影响
一、flex伸缩（弹性）布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档标题</title> <style> .father{ border: 1px solid #f00; /* 1. 把父盒子设置成伸缩盒布局 特征：子元素默认水平排列 */ display: flex; } .son{ width: 100px; height: 100px; background-color: pink; border:1px solid deepskyblue; } </style> </head> <body> <div class="father"> <div class="son"></div> <div class="son"></div> <div class="son"></div> </div> </body> </html>
二、flex伸缩布局的方向
- 特征：子元素默认水平排列
- 竖直flex方向
flex-direction: row;
- 竖直flex方向
flex-direction: column ;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档标题</title> <style> .father{ border: 1px solid #f00; /* 1. 把父盒子设置成伸缩盒布局 特征：子元素默认水平排列 */ display: flex; /* 2. flex方向 */ flex-direction: column ; } .son{ width: 100px; height: 100px; background-color: pink; border:1px solid deepskyblue; } </style> </head> <body> <div class="father"> <div class="son">1</div> <div class="son">2</div> <div class="son">3</div> <span>行内</span> <span>行内</span> </div> </body> </html>
三、水平垂直居中
传统布局（回顾）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档标题</title> <style> .father{ border: 1px solid #f00; width: 500px; height: 500px; position: relative; } .son{ width: 100px; height: 100px; background-color: pink; border:1px solid deepskyblue; position: absolute; left: 50%; top:50%; /*margin-left: -50px;*/ /*margin-top: -50px;*/ transform: translate(-50%,-50%); } </style> </head> <body> <div class="father"> <div class="son">盒子</div> </div> </body> </html>
flex布局
- 主轴对其
justify-content: center;
- 交叉轴对其
align-items: center;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档标题</title> <style> .father{ border: 1px solid #f00; width: 500px; height: 500px; display: flex; justify-content: space-between; align-items: center; } .son{ width: 100px; height: 100px; background-color: pink; border:1px solid deepskyblue; } </style> </head> <body> <div class="father"> <div class="son">盒子</div> </div> </body> </html>
四、flex换行排列
用 flex-wrap: wrap
图例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档标题</title> <style> *{ margin: 0; padding: 0; } .wrap{ border: 1px solid #f00; width: 750px; height: 1000px; margin: 0 auto; } .nav{ display: flex; /* 伸缩盒换行 */ flex-wrap: wrap; } .item{ width: 20%; height: 100px; background-color: pink; border:1px solid deepskyblue; box-sizing: border-box; } </style> </head> <body> <div class="wrap"> <div class="nav"> <div class="item">分类</div> <div class="item">大聚惠</div> <div class="item">苏宁超市</div> <div class="item">红孩子母婴</div> <div class="item">服装城</div> <div class="item">爆款手机</div> <div class="item">赚钱</div> <div class="item">领云钻</div> <div class="item">身边苏宁</div> <div class="item">生活家电</div> </div> </div> </body> </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"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } a { text-decoration: none; } .slider img { width: 100%; /*width: 375px;*/ } .index-nav ul { overflow: hidden; } .index-nav li { width: 33.33333%; height: 100px; border: 1px solid #ccc; text-align: center; float: left; box-sizing: border-box; } .index-nav li img { width: 40px; margin-top: 18px; } .index-nav li p { font-size: 14px; color: #333; } .index-enter { height: 200px; text-align: center; padding-top: 20px; font-size: 40px; background-color: red; } </style> </head> <body> <div class="slider"> <img src="assets/images/banner-01.png" alt=""> </div> <div class="index-nav"> <ul> <li> <a href="#"> <img src="assets/icons/grid-01.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-02.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-03.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-04.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-05.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-06.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-07.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-08.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-09.png" alt=""> <p>美食</p> </a> </li> </ul> </div> <div class="index-enter"> 首页入口 </div> </body> </html>
flex布局实现
<!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"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } a { text-decoration: none; } .slider img { width: 100%; /*width: 375px;*/ } .index-nav li{ width: 33.33333%; border: 1px solid #ccc; box-sizing: border-box; } /*ul是栅格布局*/ .index-nav ul { /* 5. 给当前父元素设置成伸缩盒模式 */ display: flex; /* 6. 设置子元素换行能排列 */ flex-wrap: wrap; } /*li里面的元素也是栅格布局*/ .index-nav li a{ height: 100px; /* 1. 给当前父元素设置成伸缩盒模式 */ display: flex; /* 2. 设置垂直排列 */ flex-direction: column; /* 3.设置主轴居中 */ justify-content: center; /* 4.设置交叉轴居中 */ align-items: center; } .index-nav li img { width: 40px; } .index-nav li p { font-size: 16px; color: #444; } .index-enter { height: 200px; text-align: center; padding-top: 20px; font-size: 40px; background-color: skyblue; } </style> </head> <body> <div class="slider"> <img src="assets/images/banner-01.png" alt=""> </div> <div class="index-nav"> <ul> <li> <a href="#"> <img src="assets/icons/grid-01.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-02.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-03.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-04.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-05.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-06.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-07.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-08.png" alt=""> <p>美食</p> </a> </li> <li> <a href="#"> <img src="assets/icons/grid-09.png" alt=""> <p>美食</p> </a> </li> </ul> </div> <div class="index-enter"> 首页入口 </div> </body> </html>
