学习笔记之vue高仿饿了么课程项目--布局篇

跟着慕课网上的视频（vue.js高仿饿了么外卖App）做了一个基于vue2.0的项目。

欢迎大家来访问我的github哦：my-github

现把项目中学到的知识和遇到的问题做一整理。这篇是布局篇（采用stylus）

flex布局

如果一个布局需要左边是固定长度，右边是自适应宽度，随拉大而大，缩小而小，则可以使用flex布局。移动端很适合。

.wrapper
display: flex
width: 100px
.left
flex: 0 0 20px    <!--固定宽度-->
.right
flex:1            <!--自适应-->

如果左右两边平分，则左右都是flex为1

.wrapper
display: flex
width: 100px
.left
flex: 1    <!--固定宽度-->
.right
flex:1            <!--自适应-->

sticky-footer

sticky-footer就是如果页面不够长的时候，页脚块粘贴在视窗底部，如果内容足够长时，页脚块会被内容向下推送。

html

<div class="detail-wrapper">
<div class="detail-main">
....
</div>
</div>
<div class="detail-close">
<i class="icon-close"></i>
</div>

stylus    

     给main包一个wrapper，是要设置最小高度100%，这样当内容较少时下面的close也可以定在底部

     给main设置一个padding，是要给close留出位置，这样当内容较多时close的内容不会遮挡住main的内容

     给close设置负margin，可以把位置往上提

.detail-wrapper
min-height: 100%
.detail-main
padding-bottom: 64px
.detail-close
position: relative
width: 32px;
height: 32px;
margin: -64px auto 0 auto
clear: both

多行文字垂直居中

html

<ul>
<li v-for="(item,index) in goods" class="menu-item" >
<span class="text">
...
</span>
</li>
</ul>

stylus

.menu-item
display: table
height: 54px
width: 56px
padding: 0 12px
line-height: 14px
.text
display: table-cell
width: 56px
vertical-align: middle

inline-block

两个元素都设置为inline-block则可以实现两个元素在同一行。但是两个元素之间有空白符，这时只要在他们的父元素上设置字体大小为0则可以消除空白，注意要给两个元素分别设置字体大小，否则就继承父元素字体大小为0了。

.content-wrapper
font-size: 0
.avatar
display: inline-block
font-size:14px
     .content
display: inline-block
font-size: 14px

超出文字以...显示

white-space: nowrap     //不换行
overflow: hidden        //超过则隐藏
text-overflow: ellipsis     //超过则以...显示

注：此时不能设置font-size为0
box-sizing

box-sizing类型中width包含的是内容+内边距+边框，在这种布局的元素下的子元素继承的width是内容的高度

width: 56px
height: 56px
box-sizing: border-box

模糊
设置一个模糊的且置于文字下面的背景图

z-index: -1
filter: blur(10px)

实现宽高相等的容器

width:100px
height:0
padding-top:100%