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

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"

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設定樣式

<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()可以獲取所有匹配節點的內容（文字）。