前端开发知识汇总--HTML、CSS

前言

本文主要从html,css，JS，ng以及一些好玩的demo，做一个汇总，会不定期地更新。。

HTML

在HTML中遇到需要用空格来做一些填充时，由于各个浏览器之间对于 ；的实际展示不一样，为了解决个浏览器之间的兼容问题，可以用半角空格ensp;或者全角空格emsp;就可以了，ensp相当于半格中文字符的宽度，emsp相当于一个中文字符宽度。

在使用CANVAS标签时，一定要设置宽高，而且这个宽高是作为canvas属性设置的，曾经被这个坑了，即

<canvas width='100' height='100'></canvas>

3 .dom操作造成页面卡顿，解决方案。

把DOM元素从页面流中脱离或隐藏，这样处理后，只会在DOM元素脱离和添加时，或者是隐藏和显示时才会造成页面的重绘或重排，对脱离了页面布局流的DOM元素操作就不会导致页面的性能问题。这种方式适合那些需要大批量修改DOM元素的情况。

var myElement = document.getElementById('myElement');
myElement.style.display = 'none';
// 一些基于myElement的大量DOM操作
...
myElement.style.display = 'block';

4.免费在线作图网站，作流程图特别好用！https://www.processon.com/

5.重置表单验证信息

$(form).formValidation(options);

$(form).data(‘formValidation’).resetForm();

angularjs

$scope.userForm.setPristine(); scope.userForm.$setUntouched();

CSS

自定义滚动条样式（只能修改谷歌的）。参考

css复合选择器，li:not(:first-of-type)选择除了第一个li。

文字两端对齐的CSS样式，例如对齐红框部分：

.test1 {
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
.test1:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}

给一个元素设置三边阴影。

box-shadow: 0px 0px 2px -5px #00aaef, 0px 0px 0px #00aaef, 0px 4px 12px #00aaef, 0px 0px 0px #00aaef;

A标签伪类LVHA顺序来源：

根据元素CSS权重、特殊性分析，因为link、visited、hover、active权重特殊性均相同，所以根据使用习惯，要想让active始终有作用，需要让后者覆盖前者。

CSS3滤镜效果。参考

CSS画三角形网站。参考

HTML attr 和 DOM property区别

HTML attribute value指定了初始值；DOM value property 是当前值。添加或删除disabled attribute会禁用或启用这个按钮。但 attribute 的值无关紧要，这就是我们为什么没法通过 仍被禁用这种写法来启用按钮。

自定义select样式

select {
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border: solid 1px #000;

/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;

/*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;

/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

兄弟选择器

div+p 选择当前div之后的父元素。

选择当前元素的下一个相邻元素（必须拥有相同父元素）。

less 编译calc计算属性发生错误，解决办法：

使用~符号标记计算属性，例如，计算宽度为100%减去定长，并平分7份的值。

代码为：

div{
@wid: calc(~"100% - 115px");
width: calc(~"@{wid} / 7");
}

消除table 中th,td空隙

border-collapse: collapse;

选择文件夹上传

利用HTML5的webkitdirectory属性。

react默认不支持此属性的渲染，需要在componentDidMount的生命周期中，动态创建此属性，即

componentDidMount() {
this.refs.x.directory = true;
this.refs.x.webkitdirectory = true;
}

render(){
<input type="file" ref="x" name="fileList" />
}

持续更新中~