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

web Worker、web Socket、Web Storage

mui关于上啦刷新的实现

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,169评论 2 19
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,443评论 0 25
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 宝宝成长点滴0007(20170119周四) 妈妈从厨房出来,手里拿着一个桔子,身后有个小尾巴儿——宝宝跟在后面,...
    格桑菩提子阅读 101评论 0 0