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）使用

等H5新元素代替

。

2）行内排列：

除了使用float浮动之外，使用dispaly:inline-block; 然后用vertical-align:top/middle;对齐，这样可以将元素排成一排，还可以避免浮动引发的元素塌陷。

3）多列：columns:200px 2； //设置两列

 

3.标签居中方法：

水平居中：

想要

居中仅仅使用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个: maxlength="30"</span>  ">

2）用户可自由缩放文本域:resize:both;

3)设置字母间距：letter-sapcing

 

7.点击按钮改变样式

比如长按按钮变亮：

.div:enabled:active{ 

filter:alpha(opacity=80);//IE 

opacity: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设置样式

几个关键点：

（1）设置input的opacity为0。

（2）在input后面添加一个label，for属性绑定input的id。

（3）在label中加入两个标签，内部标签负责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()可以获取所有匹配节点的内容（文本）。