[置顶] web前端开发技巧（HTML+CSS+Jquery）

HTML+CSS
1.css选择器
1）伪元素：利用：after伪元素为标签添加内容，比如：a:after{ content：“￥”}。
2）属性选择器，比如：input [ type=text ]，用法和jquery的属性选择器类似。
3）组合选择器，A,B 同时匹配两个元素；A+B匹配紧随A之后的同级元素B。
4）::selection 鼠标选中时变样式
 
2.布局
1）使用<section><header><nav><footer><figure>等H5新元素代替<div>。
2）行内排列：
除了使用float浮动之外，使用dispaly:inline-block; 然后用vertical-align:top/middle;对齐，这样可以将元素排成一排，还可以避免浮动引发的元素塌陷。
3）多列：columns:200px 2； //设置两列
 
3.标签居中方法：
水平居中：
想要<div>居中仅仅使用margin:0 auto;是不管用的，还需要在父标签中设置text-alien:center;
垂直居中：
1）单行文字垂直居中：设置line-height的高度和height高度一致。

2）多行文字垂直居中：.father{display:table;height:400px;}.son{vertical-align:middle; display:table-cell;vetical-align:middle};

3）父标签采用百分比：.father{display:table}.son{display:table-cell;vetical-align:middle};
 
4.为溢出的文字设置省略号：
紧贴文字的标签设置，例如a标签text-overflow:ellipsis; overflow:hidden; 父标签white-space:nowrap
多行（紧贴文字的标签设置）：
 overflow: hidden;
 text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //行数

 
5.文字大小自适应:使用vw代替px，1vw=1%的页面宽度。
 
6.文本域设置
1）限制文字字数30个:<textarea placeholder="点击设置" maxlength="30"  "></textarea>
2）用户可自由缩放文本域:resize:both;
3)设置字母间距：letter-sapcing
 
7.点击按钮改变样式
比如长按按钮变亮：
.div:enabled:active{ 
filter:alpha(opacity=80);//IE 
opa
4000
city:0.8
}
/*这一句是用来解决在安卓上的点击出现蓝框问题*/

body{ -webkit-tap-highlight-color:rgba(0,0,0,0); }

/*下面是解决ios上去除微信点击蓝色边框 */

a:focus,

input:focus,

p:focus,

div:focus{

-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-user-modify:read-write-plaintext-only; 

}

 
8.为radio设置样式
<input id="radio"  type="radio"name="age" /><label for="radio"><span><span></span></span></label>
几个关键点：
（1）设置input的opacity为0。
（2）在input后面添加一个label，for属性绑定input的id。
（3）在label中加入两个<span>标签，内部标签负责checked样式，外部负责未选中样式边框。然后在css中修改想要的样式就可以了，样式类似这个样纸。

9.设置渐变色
为border设置渐变色：
border-image:-webkit-linear-gradient( red, blue) 30 30;
border-image:url() 70 round/streth;

为文字设置渐变色：
 background-image:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51,51, 51, 1)));
 
10.设置padding向内收缩
box-sizing:border-box;
11.使用calc()完成百分比和像素之间的运算："width:calc(50%+2em)"
 
12.隐藏元素的区别
display: none; //不占据空间，无法点击
height: 0; overflow: hidden; //不占据空间，无法点击
position: absolute; top: -999em; //不占据空间，无法点击
position: absolute; top: -999em; //不占据空间，无法点击
visibility: hidden; //占据空间，无法点击
position: relative; top: -999em; //占据空间，无法点击
position: absolute; visibility: hidden; //不占据空间，无法点击
opacity: 0; filter:Alpha(opacity=0);
// 占据空间，可以点击
position: absolute; opacity: 0;filter:Alpha(opacity=0); // 不占据空间，可以点击

13.修改placeholder的颜色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 

color: #666; 

} 

input:-moz-placeholder, textarea:-moz-placeholder { 

color: #666; 

} 

input::-moz-placeholder, textarea::-moz-placeholder { 

color: #666; 

} 

input:-ms-input-placeholder, textarea:-ms-input-placeholder { 

color: #666; 

} 

14.某元素随页面滚动到一定位置后固定：position:sticky; top:100px;只支持FireFox和iOS的Safari浏览器。

Jquery

1.html()和text()的区别

html()只能获取第一个节点的内容（节点和文本），

text()可以获取所有匹配节点的内容（文本）。