总结前端开发中经验与坑持续更新

pupuk commented 6 years ago

textarea中的placeholder换行

1、利用伪元素的content属性来实现

textarea::-webkit-input-placeholder::after {
    display:block;
    content:"第一行\A 第二行";
}

这种肯定会有兼容性的问题，毕竟使用了webkit的私有属性，如果要兼容火狐，IE等，需要适配更多的属性。好在已经有人做成的js的插件 https://github.com/marioestrada/jQuery-Watermark

2、在placeholder属性中使用unicode换行字符
 如：<textarea rows="6" placeholder="第一行
第二行"></textarea> 原来这种方式最先chrome浏览器中实现，好在现在火狐，IE均实现了。推荐。

pupuk commented 6 years ago

inline-block元素之间的换行符（html源文件的换行符）占据4个像素

因为inline-block如果标签换行的话会有4像素的间隔别人的回答和我的理解

pupuk commented 6 years ago

[1, 2, 3].map(parseInt)的结果为什么是 [1, NaN, NaN]

有2个关键点 1、array.map(function(currentValue, index, arr), thisValue) function里面也默认有三个参数 2、parseInt(string, radix) 默认会接受2个参数，因为虽然注入了3个参数，但是按照顺序，parserInt只能接收前2个参数

所以在这三次遍历中，实际执行的是：

parseInt(1, 0) //1
parseInt(2, 1) //NaN
parseInt(3, 2) //NaN

pupuk commented 6 years ago

jquery $(document).ready() 与window.onload的区别

浏览器加载完DOM后，会通过javascript为DOM元素添加事件，在javascript中，通常使用window.onload()方法。

在jquery中，则使用$(document).ready()方法。下面介绍一下两者的区别。

1.执行时机 window.onload ：必须在页面所有元素（包括图片，引用文件）加载完后执行。。 $(document).ready() ：是页面中所有HTML DOM，CSS DOM结构加载完之后就会执行，其他图片可能没有加载完。

如果想要网页所有内容（包括图片等）加载完毕，再注册事件，使用$(window).load(function);等价于window.onload()。

2.编写个数不同

   window.onload ：不能同时写多个，后面的将会覆盖前面的。

  $(document).ready() ：可以同时编写多个，并且都可以得到执行。

3.简化写法

  window.onload ：无。

  $(document).ready() ：

pupuk commented 5 years ago

CSS object-fit属性

最近在项目中有使用到CSS的属性，object-fit有5个属性依次，做一个笔记。以前都是使用background-size，其中两个值最常用：cover, contain 而object-fit有5个属性依次是：

fill default property
contain
cover
none
scale-down 属性的意思，可以参考MDN或者W3C，这篇博客也有详细的介绍：https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/

这里重点整理一下每种属性的特点和适用范围

属性	是否会缩放	是否会约束比例	优缺点
fill	是	否	能够完整填充元素容器，但是图片会拉变形
contain	是	是	能在容器内完整装下图片，但是可能会留白边
conver	是	是	可能图片边缘的部分，会被隐藏掉
none	否	是	直接显示图片本身，可能留下白边，也有可能边缘被隐藏
scale-down	否（是）	是	依次设置了none或contain的效果，最终呈现尺寸小的效果

这里面比较重要的是：理解可替换元素。

其内容不受CSS视觉格式化模型（中文释义参见这里）控制的元素，比如image, 嵌入的文档(iframe之类)或者applet。比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。

CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object, video, textarea, input也是替换元素，audio和canvas在某些特定情形下为替换元素。

使用CSS的content属性插入的对象是匿名替换元素。

比如一个可替换元素img，如果我们不指定它的width和height，那么他的width和height就是有scr中图片的宽高和决定的。如果我们指定img的宽高，那么src的内容，就可以运用object-fit来匹配在img容器中显示位置和缩放效果。

pupuk / blog