歡迎大家來訪問我的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的內容
.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爲0box-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%