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

古城微笑少年丶 2022-05-18 02:16 171阅读 0赞

结合他人经验以及自己学习过程中遇到的问题，将知识点整理如下。  
这篇是布局篇（采用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

*  stylus

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

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

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

.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

*  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 //超过则以...显示

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

**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%