- 在ios里面长按无法识别二维码
- 新学了几个Linux命令
- 解决1px像素的问题
- flex垂直居中
- 使用:not()去除最后一个li的的右边框
- 给body添加line-height属性
- 使用负的nth-child选取元素
- 紧贴底部的页脚
- 在css中利用attr()显示html中的属性值
- 使用content在列表中自动添加序号
- innerHtml、innerText、textContent、html区分
- data[“00340F0R”]和data.00340F0R
纪录在工作中遇到的一些问题：
- 在ios里面长按无法识别二维码
- 新学了几个Linux命令
- 解决1px像素的问题
- flex垂直居中
- 善用:not()选择器
- 给body添加line-height属性
- 使用负的nth-child选取元素
- 紧贴底部的页脚
- 在css中利用attr()显示html中的属性值
- 使用content在列表中自动添加序号
- innerHtml、innerText、textContent、html区分
- data[“00340F0R”]和data.00340F0R
在ios里面长按无法识别二维码
问题：
在ios里面长按无法识别二维码
解决方法：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
新学了几个Linux命令
把images文件夹下的文件压缩成iamges.zip:
zip -r images.zip images
解压images.zip文件包
unzip images.zip
不想解压images.zip，只想看看里面的文件
unzip -v images.zip
把当前目录下的文件转移到另一个目录下
mv cacert.pem /c/Ruby22/bin/
删除文件
rm -f .DS_Store
删除文件夹
rm -rf .git
解决1px像素的问题
在_px2rem.scss里面添加了：
// 解决1px像素的问题
@mixin border($bdv,$w,$s,$c){
#{$bdv}: $w $s $c;
@at-root [data-dpr="2"] &{
#{$bdv}: $w/2 $s $c;
}
@at-root [data-dpr="3"] &{
#{$bdv}: $w/2.8 $s $c;
}
}
在article_back_new.scss里面调用：
.ui-title {
@include border (border-bottom,1px,solid,rgba(0,0,0,0.1));
}
正常情况下：
.ui-title {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
3屏下显示的效果：
[data-dpr="3"] .ui-title {
border-bottom: 0.3571428571px solid rgba(0, 0, 0, 0.1);
}
2屏下显示的效果：
[data-dpr="2"] .ui-title {
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}
flex垂直居中
.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
使用:not()去除最后一个li的的右边框
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
给body添加line-height属性
文本元素是很容易从body那里继承到的。所以不需要每个文本元素去设置line-height:1。
body {
line-height:1;
}
使用负的nth-child选取元素
li {
display: none;
}
/* 选择第1到3个元素并显示它们 */
li:nth-child(-n+3) {
display: block;
}
紧贴底部的页脚
背景：有一个具有块级样式的页脚（比如它设置了背景或阴影），当页面内容足够长时，这个页脚一切正常；而当页面较短时（比如错误信息页面）就会出现问题。此时的问题在于，页脚不能像我们所期望的那样 “紧贴” 在视口的最底部，而是紧跟在内容的下方。 ——来自css魔法师翻译的《css-secrets》学习笔记。
在css中利用attr()显示html中的属性值
h3:before {
content: attr(data-prefix) " ";
}
<h3 data-prefix="Custom prefix">This is a heading</h3>
//result:Custom prefix This is a heading
使用content在列表中自动添加序号
<section>description one</section>
<section>description two</section>
<section>description three</section>
<section>description four</section>
body {
counter-reset: my-awesome-counter;
}
section {
counter-increment: my-awesome-counter;
}
section:before {
content: counter(my-awesome-counter) ". ";
}
result:
1. description one
2. description two
3. description three
4. description four
innerHtml、innerText、textContent、html区分
innerText和textContent推荐使用textContent textContent会获取所有元素的内容，包括 script 和 style元素，然而IE里面的innerText不会
innerText会受样式的影响，他不返回隐藏元素，而textContent返回
由于innerText会受样式的影响，所以它会触发重排（reflow）,但textContent不会
当需要往一个元素里面写文本的时候，innerHtml和textContent推荐使用textContent 因为textContent文本不会解析html，所以他很可能在性能上表现更好，同时还能避免XSS攻击
当需要往一个元素里面写html内容的时候，innerHtml和html推荐使用html
data[“00340F0R”]和data.00340F0R
data[“00340F0R”]和data.00340F0R前者更好些
html5 element.dataset API
这是html5的新功能，用来取代jquery中的$.data()
如果你的页面只需要简单的操作data-*自定义属性,可以用它
使用方法
<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>
//获取数据
// Get the element
var element = document.getElementById("myDiv");
// Get the id
var id = element.dataset.id;
// Retrieves "data-my-custom-key"
var customKey = element.dataset.myCustomKey;
// 可以赋值
element.dataset.myCustomKey = "Some other value";
//给不存在的data-属性赋值，会自动创建
element.dataset.mootoolsFtw = "true";