浮动带来的影响
<div class="father">
<div class="son"/>
<div class="son"/>
<div class="son"/>
</div>
上述布局在标准流下,是依次沿着竖直方向排开的。并且father包裹son布局。
但是,当使用浮动实现son水平布局时,fater将不能包裹son.为了使其能够包裹son,需要实现清除浮动的效果。
<style>
.father{
border: 1px solid red;
overflow:hidden; //通过添加此属性清除浮动
}
.son{
background-color:pink;
border:1px solid black;
float:left;
}
</style>
flex 伸缩盒(弹性)模式和 flex方向
<div class="father">
<div class="son"/>
<div class="son"/>
<div class="son"/>
</div>
<style>
.father{
border: 1px solid red;
display:flex; //把父盒子设置为伸缩盒模式,子盒子默认水平排列
//设置伸缩盒子的方向
flex-direction:row;//column row-reverse collumn-reverse
}
.son{
background-color:pink;
border:1px solid black;
float:left;
}
</style>
flex 方向
实现子盒子在父盒子中垂直居中的功能。
1. 传统做法 使用定位 子绝父相
2. 使用flex
.father{
border: 1px solid red;
display:flex;
justify-content:center; //水平居中 (主轴对齐) space-between
align-items:center; //垂直 居中 (交叉轴对齐)flex-end
}
.son{
background-color:pink;
border:1px solid black;
float:left;
}
flex 换行
<div class="father">
<div class=nav>
<div class="son">1</son>
<div class="son">2</son>
<div class="son">3</son>
<div class="son">4</son>
<div class="son">5</son>
<div class="son">6</son>
<div class="son">7</son>
<div class="son">8</son>
<div class="son">9</son>
<div class="son">10</son>
</div>
</div>
<style>
.father{
width:500px;
height:1000px;
margin:0 auto;
}
.nav{
display:flex;
flex-wrap:wrap; //实现换行
}
.son{
width:20%;
background-color:pink;
border:1px solid black;
float:left;
box-sizing:border-box; //注意
}
</style>
用传统盒子实现首页
效果图:
移动端开发,首先添加如下参数:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{
margin: 0px;
border: 0px;
list-style: none;
}
.slider img{
width: 375px;
}
.menus ul{
margin: 0 auto;
overflow: hidden;
padding:0px;
}
.menus li{
border: 1px solid #999999;
width: 33.3333%;
height: 100px;
float: left;
box-sizing: border-box;
text-align: center;
}
.menus img{
width: 40px;
height:40px;
margin-top: 18px;
}
.menus p{
color: #333;
font-size: 15px;
}
.menus a{
text-decoration: none;
cursor: text;
}
<div class="slider">
<img src="assets/images/banner-01.png" alt="">
</div>
<div class="menus">
<ul>
<li>
<a href="">
<img src="assets/icons/grid-01(1).png" alt="">
<p>美食</p>
</a>
</li>
<li>
<a href="">
<img src="assets/icons/grid-01(1).png" alt="">
<p>美食</p>
</a>
</li>
<li>
<a href="">
<img src="assets/icons/grid-01(1).png" alt="">
<p>美食</p>
</a>
</li>
<li>
<a href="">
<img src="assets/icons/grid-01(1).png" alt="">
<p>美食</p>
</a>
</li>
<li>
<a href="">
<img src="assets/icons/grid-01(1).png" alt="">
<p>美食</p>
</a>
</li>
<li>
<a href="">
<img src="assets/icons/grid-01(1).png" alt="">
<p>美食</p>
</a>
</li>
<li>
<a href="">
<img src="assets/icons/grid-01(1).png" alt="">
<p>美食</p>
</a>
</li>
<li>
<a href="">
<img src="assets/icons/grid-01(1).png" alt="">
<p>美食</p>
</a>
</li>
<li>
<a href="">
<img src="assets/icons/grid-01(1).png" alt="">
<p>美食</p>
</a>
</li>
</ul>
</div>
<div class="login">
登录
</div>
使用flex实现首页
<style>
*{
margin: 0px;
border: 0px;
list-style: none;
}
.slider img{
width: 375px;
}
.menus ul{
margin: 0 auto;
padding:0px;
display: flex;
flex-wrap: wrap;
}
.menus li{
border: 1px solid #999999;
width: 33.3333%;
box-sizing: border-box;
}
.menus img{
width: 40px;
height:40px
}
.menus p{
color: #333;
font-size: 15px;
}
.menus a{
text-decoration: none;
cursor: text;
display: flex;
height: 100px;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>