发表于： 2018-09-01 23:20:16
1 651
今天完成的事情
任务十三卧底胜利页面
看了前面几个任务的深度思考，有的还很模糊
明天计划的事情
继续先做任务吧
有时间准备下盒模型小课堂
遇到的问题
总体框架是很容易搭建出来，里面具体布局还是难以掌控，盒模型感觉概念是理解，用的时候又觉得padding和margin有点模糊，各种小细节再去去修改的时候总觉得无从下手
还是不太会总结
收获
1.css如何画正方形
（2）用padding-bottom
div{
2.搜索了下实现九宫格布局的方法。首先保证子元素是正方形有圆角
（1）浮动。父元素class为wrapper
.wrapper div{
width:32%;
padding-bottom:32%;
background:#0d99a5;
border-radius:10px;
margin-top:10px;
float:left;
margin-left:10px;
}
（2）九个div设为inline-block
.wrapper div{
width:32%;
padding-bottom:32%;
background:#0d99a5;
border-radius:10px;
margin-top:10px;
display:inline-block;
margin-left:10px;
}
（3）ui+li实现，li设置为 display:inline-block;
<style>
.wrapper li{
width:32%;
padding-bottom:32%;
background:#0d99a5;
border-radius:10px;
margin-top:10px;
display:inline-block;
margin-left:10px;
}
</style>
<body>
<ul class="wrapper">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
（4）flex布局 flex-wrap:wrap;
.wrapper{
display:flex;
flex-wrap:wrap;
}
.wrapper div{
width:32%;
padding-bottom:32%;
background:#0d99a5;
border-radius:10px;
margin-top:10px;
margin-left:10px;
}
（5）flex布局 的另一种 <div class="wrapper">里面三个盒子</div>
.wrapper{
display:flex;
justify-content:space-around;
}
.wrapper div{
width:32%;
padding-bottom:32%;
background:#0d99a5;
border-radius:10px;
margin-top:10px;
margin-left:10px;
}
返回列表
评论