2017.9.9v-for和v-if、v-if-else、v-else、省略号、实现三角形的关键代码

闭包

个人理解的闭包就是:能够读取其他函数内部变量的函数

*

getElementsByTagName("*")
*表示匹配该页面所有的标签、该js语句的意思就是获取页面中所有的DOM元素

v-for和v-if、v-if-else、v-else

问题:一个数组中每一项的内容不一样,这个时候不能使用v-for渲染,那应该怎么做呢?

解决方法:v-for中使用v-if和v-else判断即可

省略号

单行省略号

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

这个是处理多行的时候用的

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;     

实现三角形的关键代码

      border-top: 4px solid;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;  

还有的话,就是设置宽高都为0

渐进增强和优雅降级

渐进增强:针对低版本的浏览器进行构造页面,保证了基本的功能的实现,再针对高级浏览器进行效果、交互等改进和追加功能以达到更好的效果

优雅降级:一开始就构造完整的功能,然后再针对低版本的浏览器进行兼容

行内元素和块级元素

行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不 会产生边距效果.

vertical-align

竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效
所以要设置display:table-cell;

居中方法

.item{
        position: absolute;
        margin:auto;
        left:0;
        top:0;
        right:0;
        bottom:0;
    }

各个浏览器前缀

各个浏览器前缀:

 -webkit:chrome和safari
-moz:firefox
-ms:IE
-o:opera

浏览器的内核

分别为:

IE:trident
Firefox:gecko内核
Opera:Blink内核(基于webkit)
chrome:Blink

css优先级

css优先级

注意的一点就是类选择器=伪类

rem布局

另外

百分比

margin-top、padding-top,设置为百分比的时候,相对的是最近的父级块级元素的width

web Worker、web Socket、Web Storage

2017.9.9v-for和v-if、v-if-else、v-else、省略号、实现三角形的关键代码_第1张图片
web Worker、web Socket、Web Storage

mui关于上啦刷新的实现

你可能感兴趣的:(2017.9.9v-for和v-if、v-if-else、v-else、省略号、实现三角形的关键代码)