结合他人经验以及自己学习过程中遇到的问题，将知识点整理如下。
这篇是布局篇（采用stylus）
flex布局
- 如果一个布局需要左边是固定长度，右边是自适应宽度，随拉大而大，缩小而小，则可以使用flex布局。移动端很适合。
-
.wrapper
-
display:
flex
-
width: 100
px
-
.left
-
flex: 0 0 20
px <!
–固定宽度
–>
-
.right
-
flex
:1 <!
–自适应
–>
- 如果左右两边平分，则左右都是flex为1
-
.wrapper
-
display:
flex
-
width: 100
px
-
.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: 64
px
-
.detail-close
-
position:
relative
-
width: 32
px;
-
height: 32
px;
-
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: 54
px
-
width: 56
px
-
padding: 0 12
px
-
line-height: 14
px
-
.text
-
display:
table-cell
-
width: 56
px
-
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: 14
px
-
white-space:
nowrap //不换行
-
overflow:
hidden //超过则隐藏
-
text-overflow:
ellipsis //超过则以...显示
box-sizing
box-sizing类型中width包含的是内容+内边距+边框，在这种布局的元素下的子元素继承的width是内容的高度
-
width: 56
px
-
height: 56
px
-
box-sizing:
border-box
设置一个模糊的且置于文字下面的背景图
-
z-index:
-1
-
filter:
blur(10
px)
实现宽高相等的容器
-
width
:100px
-
height
:0
-
padding-top
:100%
结合他人经验以及自己学习过程中遇到的问题，将知识点整理如下。
这篇是布局篇（采用stylus）
flex布局
- 如果一个布局需要左边是固定长度，右边是自适应宽度，随拉大而大，缩小而小，则可以使用flex布局。移动端很适合。
-
.wrapper
-
display:
flex
-
width: 100
px
-
.left
-
flex: 0 0 20
px <!
–固定宽度
–>
-
.right
-
flex
:1 <!
–自适应
–>
- 如果左右两边平分，则左右都是flex为1
-
.wrapper
-
display:
flex
-
width: 100
px
-
.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: 64
px
-
.detail-close
-
position:
relative
-
width: 32
px;
-
height: 32
px;
-
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: 54
px
-
width: 56
px
-
padding: 0 12
px
-
line-height: 14
px
-
.text
-
display:
table-cell
-
width: 56
px
-
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: 14
px
-
white-space:
nowrap //不换行
-
overflow:
hidden //超过则隐藏
-
text-overflow:
ellipsis //超过则以...显示
box-sizing
box-sizing类型中width包含的是内容+内边距+边框，在这种布局的元素下的子元素继承的width是内容的高度
-
width: 56
px
-
height: 56
px
-
box-sizing:
border-box
设置一个模糊的且置于文字下面的背景图
-
z-index:
-1
-
filter:
blur(10
px)
实现宽高相等的容器
-
width
:100px
-
height
:0
-
padding-top
:100%