css樣式中px，pt，em，rem的使用

x：也稱作像素，是相對于屏幕分辨率而言的，也是我們最常使用的一個單位。使用方法可謂簡單粗暴，不必多說。
em：是一個相對長度的單位，相對于當前對象問本的字體的尺寸大小，如果當前行內文本的字體尺寸未被人設置，則是相對于瀏覽器的默認字體尺寸而言。em的值不固定，它會繼承父元素的字體大小。瀏覽器的默認字體大小為16px，也就是1em=16px，這樣的話可根據這個比例在文檔中使用em了。
rem：是css3新增的一個單位，也是一個相對單位，與em不同的是，rem相對的是html的根元素。只改變跟元素的字體大小就可以按比例調整所有字體大小。
pt：印刷常用的單位，指的是磅，常用于打印和頁面排版。

成	語言	描述
結構	HTML	網頁元素和內容
表現	CSS	網頁元素頁面樣式
行為	JavaScript	網頁交互

1 HTML概念

HTML，超文本標記語言（Hyper Text Markup Language），是一門描述性語言。標記，標簽，元素，叫法不同，意思相同。HTML超文本標記語言主要通過標簽的方式，對網頁頁面的文本、圖片、音頻、視頻等內容進行描述。學習HTML，就是學習各種標簽，來搭建網頁的結構。

2 HTML結構

結構：!DOCTYPE

說明：作用是告訴瀏覽器用哪個文檔規范來解析文檔

標簽：html

說明：用于搭建HTML網頁文檔結構和網頁布局

?標簽：head

說明：用于定義HTML網頁文檔的頭部,它是所有頭部元素的容器?

?標簽：body

說明：用來定義HTML網頁文檔的主體區域?

?標簽：meta

說明：用來描述HTML網頁文檔的屬性?

?標簽：title

說明：用來放到HTML網頁文檔的頭部，是搜索引擎首要抓取的目標代碼?

?2.1 標簽

標簽，也叫作標記，是由一對尖括號<>，里面包含單詞組成

2.1.1 雙標簽

<html></html>

2.1.2 單標簽

<br>

2.1.3 標簽關系

嵌套關系

<html>
    <head>
    </head>
</html>

并列關系

<head>
</head>
<body>    
</body>

3 注釋

注釋用來幫助程序員記錄程序設計方法，輔助程序閱讀

4 head標簽

4.1 title標簽

雙標簽，定義網頁的標題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

4.2 meta標簽

是單標簽，用來描述HTML網頁文檔的屬性

4.2.1 name屬性

屬性值	說明
keywords	網頁關鍵字，多個逗號隔開
description	網頁描述
author	作者
copyright	版權信息

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 網頁關鍵字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 網頁描述 -->
    <meta name="description" content="基礎前端知識">
    <!-- 網頁作者 -->
    <meta name="author" content="buddha">
    <!-- 網頁版權信息 -->
    <meta name="copyright" content="版權所有，翻版必究">
</head>
<body>

</body>
</html>

標簽屬性：

1、標簽的屬性寫在開始標簽內部

2、標簽名與屬性之間要有空格隔開

3、一個標簽可以同時存在多個屬性

4、屬性之間以空格隔開

5、屬性沒有先后順序之分

4.2.2 http-equiv屬性

屬性值	說明
Content-Type	定義網頁所使用編碼
refresh	定義網頁自動刷新跳轉

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 設置網頁編碼完整寫法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 設置網頁編碼簡寫寫法 -->
    <meta charset="UTF-8">
    <!-- 網頁打開3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

4.3 style標簽

是雙標簽，用來定義標簽的css樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css內聯樣式寫這里 */
    </style>
</head>
<body>

</body>
</html>

4.4 link標簽

是單標簽，是用來引入外部css樣式文件

<link rel="stylesheet" href="css/index.css" type="text/css">

4.5 script標簽

是雙標簽，是用來寫JavaScript代碼的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 這里寫JavaScript代碼 */
    </script>

</head>
<body>

</body>
</html>

4.6 base標簽

是單標簽，是用來設置整個網頁的基礎路徑。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

開發中很少用到，有人使用知道就行

上面所述標簽是放在head標簽里的，接下來接觸的標簽都是放在body標簽內的

5 文本標簽

5.1 標題標簽

是雙標簽，h是header的縮寫

<h1>h1標簽：一級標題</h1>
<h2>h2標簽：二級標題</h2>
<h3>h3標簽：三級標題</h3>
<h4>h4標簽：四級標題</h4>
<h5>h5標簽：五級標題</h5>
<h6>h6標簽：六級標題</h6>

特點：

1、字體加粗

2、獨占一行

3、從h1到h6，字體逐漸減小

4、使用<h>標簽的主要意義是告訴搜索引擎這是一段文字的標題

5、<h1>在一個頁面最多只能有一個，不要用多個

5.2 段落標簽

是雙標簽，p是paragraph的縮寫

<p>這是一段文字</p>
<p>這是一段文字</p>
<p>這是一段文字</p>

特點：

1、獨占一行

2、段落與段落之間，存在間隙

5.3 換行標簽

是單標簽，br是break的縮寫

<p>這是一段<br>文字</p>

特點：

1、強制換行

2、單標簽

5.4 水平線標簽

是單標簽，hr是horizon地平線的縮寫

<p>這是一段文字</p>
<hr>
<p>這是一段文字</p>

特點：

1、在頁面中顯示一條水平線

2、單標簽

6 文本格式化標簽

標簽1	標簽2	說明
b	strong	加粗
u	ins	下劃線
i	em	傾斜
s	del	刪除線

<b>這是一段文字</b>
<strong>這是一段文字</strong>
<br>
<u>這是一段文字</u>
<ins>這是一段文字</ins>
<br>
<i>這是一段文字</i>
<em>這是一段文字</em>
<br>
<s>這是一段文字</s>
<del>這是一段文字</del>

特點：

1、不會獨占一行

2、推薦使用標簽2所在列標簽

6.1 上標標簽

sup是superscripted這個單詞的縮寫

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

6.2 下標標簽

sub是subscripted這個單詞的縮寫

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

6.3 字符實體

在網頁中展示特殊符號效果時，需要使用字符實體替代

顯示結果	描述	實體名稱
	空格
<	小于號	<
>	大于號	>
&	與	&
"	雙引號	"
x	乘號	×
÷	除號	÷
-	長破折號	—
\|	豎線	\|
‘	左單引號	‘
‘	右單引號	’
?	版權符	©
?	注冊商標	®
?	商標	™
°	度	°

7 媒體標簽

7.1 圖片標簽

<img src="./001.jpg" alt="">

img標簽常見屬性：

屬性名	說明
src	圖片路徑（絕對路徑、相對路徑）
alt	圖片加載失敗時，顯示的文字
title	鼠標懸停時，顯示的文字
width	圖片寬度
height	圖片高度

只設置寬或高，會自動等比縮放，寬高只需要數字，不需要'px'

<img src="./001.jpg" alt="圖片加載失敗" title="這是程序兔" width="200" height="200">

絕對路徑：指目錄下的絕對位置，比如從根目錄開始的路徑，或完整的網絡地址
相對路徑：從當前文件開始出發找目標文件的過程

7.2 音頻標簽

<audio src="music.mp3" controls autoplay loop></audio>

audio標簽常見屬性：

屬性名	說明
src	音頻路徑
controls	顯示播放控件
autoplay	自動播放
loop	循環播放

支持mp3、wav、ogg三種音頻格式

7.3 視頻標簽

<video src="video.mp4" controls loop autoplay></video>

屬性名	說明
src	視頻路徑
controls	顯示播放控件
autoplay	自動播放
loop	循環播放

支持mp4、webm、ogg三種視頻格式

7.4 超鏈接標簽

超鏈接，是雙標簽，實現各個獨立頁面之間進行跳轉，可以跳去站外也可以在站內之間跳轉

<a href="鏈接地址">文本或圖片</a>

站外跳轉，采用絕對路徑

<a href="http://www.baidu.com" target="_blank">百度</a>

站內跳轉，采用相對路徑

<!-- a頁面 -->
<a href="b.html">跳去b頁面</a>

<!-- b頁面 -->
<p>b頁面</p>

頁面內跳轉

<a href="#ms">美食</a>
<a href="#jd">景點</a>
<h3 id="ms">推薦美食</h3>
<!-- 省略n個br標簽 -->
<br>
<h3 id="jd">推薦景點</h3>

屬性名	說明
href	跳轉鏈接
target	鏈接打開方式

target屬性值

屬性值	說明
_self	默認，原窗口打開鏈接
_blank	在新窗口打開鏈接
_parent	在父窗口打開鏈接
_top	在頂層窗口打開超鏈接

target屬性值一般使用_self（默認）和_blank

8 列表標簽

8.1 無序列表

<ul type="屬性值">
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ul>

解釋：

1、ul，unordered lists，無序列表，li，list item，列表項

2、ul標簽子標簽只允許是li標簽

3、li標簽可以包含任意內容

type屬性值

屬性值	說明
disc	默認，實心圓
circle	空心圓
square	實心方型

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

8.2 有序列表

<ol type="屬性值">
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ol>

解釋：

1、ol，ordered lists，有序列表，li，list item，列表項

2、ol標簽子標簽只允許是li標簽

3、li標簽可以包含任意內容

type屬性值

屬性值	說明
1	默認，阿拉伯數字，1,2,3......
a	小寫英文字母，a,b,c......
A	大寫英文字母，A,B,C......
i	小寫羅馬數字,i,ii,iii......
I	大寫羅馬數字,I,II,III......

<ol>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ol>

8.3 自定義列表

<dl>
    <dt>名詞</dt>
    <dd>描述</dd>
    ……
</dl>

解釋：

1、dl，definition lists，自定義列表；dt，definition term，自定義列表組；dd，definition description，自定義列表描述

<dl>
    <dt>稱呼</dt>
    <dd>你</dd>
    <dd>我</dd>
    <dd>他</dd>
</dl>

9 表格標簽

9.1 表格基本結構

<table>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
    </tr>
    <tr>
        <td>單元格3</td>
        <td>單元格4</td>
    </tr>
</table>

解釋：

1、tr，table row，表格行；td，table data cell，表行單元格

<table>
    <tr>
        <td>1</td>
    </tr>
</table>

9.2 表格標簽屬性

屬性名	屬性值	描述
border	數字	邊框寬度
width	數字	表格寬度
height	數字	表格高度

<table border="1" width="200" height="50">
    <tr>
        <td>1</td>
    </tr>
</table>

9.3 表格標題標簽

<caption>標題內容</caption>，位于表格內第一行

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <tr>
        <td>1</td>
    </tr>
</table>

9.4 表格表頭單元格標簽

<th></th>，th，table header cell，表頭單元格

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <tr>
        <th>序號</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

9.5 表格語義化結構標簽

thead、tbody、tfoot

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <thead>
        <tr>
            <th>序號</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>匯總</td>
        </tr>
    </tfoot>
</table>

9.6 合并單元格

屬性名	屬性值	說明
rowspan	合并單元格個數	合并行，單元格垂直合并
colspan	合并單元格個數	合并列，單元格水平合并

<td rowspan="跨越的行數"></td>

<td colspan="跨越的列數"></td>

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <thead>
        <tr>
            <th>序號</th>
            <th>金額</th>
            <th>金額</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="2">20</td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>匯總</td>
            <td colspan="2">40</td>
        </tr>
    </tfoot>
</table>

10 表單標簽

10.1 form標簽

雙標簽，包裹其它表單標簽

<form>
    // 表單
</form>

form標簽的常用屬性

屬性	說明
name	表單名稱
method	提交方式
action	提交地址
target	打開方式
enctype	編碼方式

name屬性

一個頁面中，表單可能不止一個。name屬性，用來區分不同的表單

<form name="myForm"></form>

method屬性

用來指定表單數據使用哪種提交方式給后端

屬性值	說明
get	get方式
post	post方式

<form method="get"></form>

action屬性

用來指定表單數據提交到哪個地址

<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>

target屬性

該屬性跟a標簽的target屬性一樣，其屬性值也是四個，一般情況只用到_blank屬性值，默認也是這個值

<form target="_blank"></form>

enctype屬性

屬性值	說明
application/x-www-form-urlencoded	在發送前編碼所有字符（默認）
multipart/form-data	不對字符編碼，在使用包含文件上傳控件的表單時，必須使用該值
text/plain	空格轉換為 "+" 加號，但不對特殊字符編碼

<form enctype="multipart/form-data"></form>

10.2 input標簽

input是單標簽

<input type="表單類型">

屬性值	說明
text	單行文本框
password	密碼文本框
radio	單選框
checkbox	多選框
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
file	文件上傳

單行文本框常用屬性

屬性	說明
value	設置文本框的默認值
size	設置文本框的長度
maxlength	設置最多可輸入字符

<form>
    <input type="text" value="默認值" size="長度" maxlength="可輸入字符">
</form>

<form>
    <label>姓名：<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>

密碼文本框常用屬性

密碼文本框常用屬性和單行文本框常用屬性相同

<input type="password" value="默認值" size="長度" maxlength="可輸入字符">

<form>
    <label>密碼：<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>

單選框

屬性	說明
name	組名，同組單選框，組名要相同，必要屬性
value	單選框選項取值，必要屬性
checked	默認選中項，同組單選框，可以有一個默認選中項

<input type="radio" name="組名" value="取值" checked="checked">

<form>
    性別：
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
</form>

復選框

復選框和單選框的屬性都相同，區別復選框可以多選

<form>
    愛好：
    <input type="checkbox" name="hobby" value="籃球" checked>籃球
    <input type="checkbox" name="hobby" value="足球" checked>足球
    <input type="checkbox" name="hobby" value="臺球">臺球
</form>

普通按鈕

<input type="button" value="取值">

<form>
    <input type="button" value="普通按鈕">
</form>

<button>普通按鈕</button>

區別：

1、input是單標簽，button是雙標簽

2、button標簽的信息除了文本，還可以是圖像、其它標簽等

3、button有type屬性，屬性值可以是button、submit、reset等

提交按鈕

<input type="submit" value="取值">

<form>
    <input type="submit" value="提交">
</form>

把對應表單數據提交給后端服務器

重置按鈕

<input type="reset" value="取值">

<form>
    <input type="reset" value="重置">
</form>

點擊重置后，所在form表單里所有內容被清空了

文件上傳

<input type="file">

<form>
    <input type="file">
</form>

10.3 多行文本框

<textarea name="文本名稱" cols="列數" rows="行數"></textarea>

<form>
    <textarea name="文本名稱" cols="1" rows="2"></textarea>
</form>

10.4 下拉列表

<select>
    <option>選項內容</option>
    <option>選項內容</option>
</select>

下拉列表標簽是為了節省頁面空間

select標簽屬性

屬性名	說明
name	數據提交后端所需字段
size	下拉選項顯示個數
multiple	默認只允許選一個，選多個得加這個屬性
disabled	所有下拉選項禁止選中

<form>
    <select name="age" size="4" multiple="multiple" disabled="disabled">
        <option>18歲以下</option>
        <option>18-28歲</option>
        <option>28-38歲</option>
        <option>38歲以上</option>
    </select>
</form>

option標簽屬性

屬性名	說明
selected	默認選中
value	被選中，數據提交后端的值
disabled	該下拉選項禁止選中

<form>
    <select name="age" size="5">
        <option value="1">18歲以下</option>
        <option value="2" disabled="disabled">18-28歲</option>
        <option value="3" selected="selected">28-38歲</option>
        <option value="4">38歲以上</option>
    </select>
</form>

11 框架標簽

<iframe src="URL" width="數值" height="數值"></iframe>

框架標簽常用屬性

屬性名	說明
src	嵌入的文檔地址
width	標簽寬度
height	標簽高度

<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>

有些文檔禁止被嵌入

12 標簽類型

HTML標簽分為三種，行內標簽、塊級標簽和行內塊級標簽。

12.1 行內標簽

特點：

1、在頁面內只占據剛好能包裹自己內容的空間

2、沒有寬高，內容多大就多大，行內標簽不能嵌套塊級標簽（a標簽除外）

3、行內標簽設置寬高無效，可以對行高line-height進行設置

4、可以設置外邊距margin和內邊距padding，但只對左右邊距有效果，上下無效

5、常見行內標簽span、a、strong、ins、del、br等

span標簽

雙標簽，行內標簽，本身沒有固定樣式

<p>我是<span>中國人</span></p>

12.2 塊級標簽

特點：

1、獨占一行

2、高度、寬度、外邊距、內邊距都可以設置生效

3、寬度默認是父級寬度的100%

4、是一個容器盒子，可以嵌套多層子級行內標簽、塊級標簽，文本類塊級標簽除外

5、常見塊級標簽div、p、h1~h6、ol、ul、li等

div標簽

雙標簽，塊級標簽，本身沒有固定樣式

<!-- 頭部區域 -->
<div></div>
<!-- 內容區域 -->
<div></div>

12.3 行內塊級標簽

特點

1、在頁面內只占據剛好能包裹自己內容的空間

2、高度、寬度、外邊距、內邊距都可以設置生效

3、常見塊級標簽img、input、td

12.4 標簽類型轉換

通過css樣式display屬性轉換，這是css的內容

什么說能使用html/css解決的問題就不要使用JS呢？兩個字，因為簡單。簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗，下面介紹幾個實例。

01導航高亮

導航高亮是一種很常見的問題，包括當前頁面的導航在菜單里面高亮和hover時高亮。你可以用js控制，但是用一點CSS技巧就可以達到這個目的，不需要使用JS。

在正常態時，每個導航的默認樣式為：

nav li{
opacity: 0.5;
}

當前頁面的導航透明度為1. 為了實現這個目的：

首先通過body給不同的頁面添加不同的類，用來標志不同的頁面

<body class="home"></body>


<body class="buy"></body>

所有的li也用class標志，為了有一個一一對應的關系：

然后就可以設置當前頁面的樣式，覆蓋掉默認的樣式：

body.home nav li.home,
body.buy nav li.buy{
opacity: 1;
}

這樣子，如果當前頁面是home，則body.home na li.home這條規則生效，home的導航將高亮

這個技藝在《精通CSS》這種書里面有提及。如果你用js控制，那么在腳本加載好之前，當前頁面是不會高亮的，而腳本加載好之后突然就高亮了。所以用js吃力不討好。

hover時的高亮，可以用css的:hover選擇器：

nav li:hover{
opaciy: 1;
}

加上:hover選擇器的優先級將會高于原本的，鼠標hover的時候將會覆蓋默認樣式，即高亮。

你也可以用mouse事件，mouseover的時候添加一個類，mouseleave的時候移除掉這個類，這樣就變復雜了，用CSS甚至可以兼容不支持JS的瀏覽器，用戶可能把瀏覽器的js禁掉了。我一個純展示的靜態頁面，為啥要寫js呢，是吧。

注意這個hover選擇器特別好用，幾乎適用于所有需要用鼠標懸浮時顯示的場景。

02 鼠標懸浮時顯示

鼠標懸浮的場景十分常見，例如導航的菜單：

以及在《Google地圖開發總結》一文提到的，marker詳情框的顯示：

一般要把隱藏的東西如菜單作為hover目標的子元素或者相鄰元素，才方便用css控制，例如上面的菜單，是把menu當作導航的一個相鄰元素：

menu在正常態下是隱藏的：

.menu{
display: none;
}

而當導航hover時顯示：

.user:hover + .menu{
display: list-item;
}

注意這里使用了一個相鄰選擇器，這也是上面說的為什么要寫成相鄰的元素。menu的位置可以用absolute定位。

同時menu自已本身hover的時候也要顯示，否則鼠標一離開導航的時候，菜單就消失了：

.menu:hover{
display: list-item;
}

這里會有一個小問題，即menu和導航需要挨著一起，否則中間有空隙的話，上面添加的菜單hover就不能發揮作用了，但是實際情況下從美觀的角度，兩者是要有點距離的。這個其實也好解決，只要在menu上面再畫一個透明的區域就好了，如下藍色的方塊：

可以用before/after偽類用absoute定位實現：

ul.menu:before{
content: "";
position: absolute;
left: 0;
top: -20px;
width: 100%;
height: 20px;
/*background-color: rgba(0,0,0,0.2);*/
}

如果我既寫了css的hover，又監聽了mouse事件，用mouse控制顯示隱藏，雙重效果會有什么情況發生，如果按正常套路，在mouse事件里面hover的時候，添加了一個display: block的style，會覆蓋掉CSS的設置。也就是說，只要hover一次，css的代碼就不管用了，因為內聯樣式的優先級會高于外鏈的。但是實際情況下會有意外發生，那就是在移動端iphone上面，觸摸會觸發CSS的hover，并且這個的觸發會很高概率地先于touchstart事件，在這個事件里面會判斷當前是顯示還是隱藏的狀態，由于css的hover發揮了作用，所以判斷為顯示，然后又把它隱藏了。也就是說，點一次不出來，要點兩次。所以最好別兩個同時寫。

第二種場景，使用子元素，這個更簡單。把hover的目標和隱藏的對象當作同一個父容器的子元素，然后hover寫在這個父容器上面就可以了，不用像上面那樣，隱藏元素也要寫個hover：

.marker-container .detail-info{
display: none
}

.marker-container:hover .detail-info{
display: block
}

03自定義radio/checkbox的樣式

我們知道，使用原生的radio/checkbox是不可以改變它的樣式的，得自己用div/span去畫，然后再去監聽點擊事件。但是這樣需要自己去寫邏輯控制，例如radio只能選一個的功能，另一個是沒有辦法使用change事件。就是沒有用原生的方便。

但是實際上可以用一點CSS3的技巧實現自定義的目的，如下，就是用原生實現的radio：

這個主要是借助了CSS3提供的一個偽類:checkd，只要radio/checkbox是選中狀態，這個偽類就會生效，因此可以利用選中和非選中的這兩種狀態，去切換不同的樣式。如下把一個checkbox和一個用來自定義樣式的span寫在一個label里面，checkbox始終隱藏：

寫在label里面是為了能夠點擊span的時候改變checkbox的狀態，然后再改一下選中態的樣式即可：

input[type=checkbox]:checked + .checkbox{

}

關鍵在于這一步，添加一個打勾的背景圖也好，使用圖標字體也好。

:checked兼容性還是比較好的，只要你不用兼容IE8就可以使用，或者說只要你可以用nth-of-type，就可以用:checked

04多列等高

多列等高的問題是這樣的，排成一行的幾列由于內容長短不一致，導致容器的高度不一致：

你可以用js算一下，以最高的一列的高度去設置所有列的高度，然而這個會造成頁面閃動，剛開始打開頁面的時候高度不一致，然后發現突然又對齊了。這個解決辦法主要有兩種：

第一種是每列來一個很大的padding，再來一個很大的負的margin值矯正回去，就對齊了，如下：

效果如下：

你會發現，這個對齊是對齊了，但是底部的border沒有了，設置的圓角也不起作用了，究其原因，是因為設置了一個很大的padding值，導致它的高度變得很大，如上圖所示。所以如果你想在底部absolute定位放一個鏈接”更多>>”也是實現不了了。

第二種辦法是借助table的自適應特性，每個div都是一個td，td肯定是等高的，html結構不變，CSS改一下：

.wrapper{
display: table;
border-spacing: 20px; /* td間的間距*/
}

.wrapper > div {
display: table-cell;
width: 1000px; /*設置很大的寬度，table自動平分寬度 */
border-radius: 5px; /*這里設置圓角就正常了*/
}

對齊效果如下：

這樣還有一個好處，就是在響應式開發的時候，可以借助媒體查詢動態地改變display的屬性，從而改它排列的方式。例如在小于500px時，每一列占滿一行，那么只要把display: table-cell覆蓋掉就好了：

@media (max-width: 500px){
.wrapper{
display: block;
}
.wrapper > div{
display: block;
width: 100%;
}
}

效果如下所示：

如果在pad 1024px的設備上，希望一行顯示2個，那應該怎么辦呢？由于上面用的td，必定會排在同一行。其實可以在第二個和第三個中間加一個tr，讓它換行：

<div class="wrapper">
<div>column 1</div>
<div>column 2</div>
<span class="tr"></span>
<div>column 3</div>
<div>column 4</div>
</div>

在大屏和小屏時，tr是不顯示的，而在中屏時，tr顯示：

.tr{
display: none;
}

@media (max-width: 1024px) and (min-width: 501px){
.tr{
display: table-row;
}
}

就能夠實現在小屏時一行排兩列了，只是這個有個小問題，就是在中屏拉到大屏的時候tr的dipslay: none已經沒有什么作用，因為table的布局已經計算好。但是一般應該不用考慮這種拉伸范圍很大的情況，正常刷新頁面是可以的，如果真要解決那得借助下js

05需要根據個數顯示不同樣式

例如說可能有1~3個item顯示在同一行，而item的個數不一定，如果1個，那這個item占寬100%，2個時每一個50%，3個時每一個33%，這個你也可以用js計算一下，但是用CSS3就可以解決這個問題：

第5行的意思就是選擇li的第一個元素，并且它是倒數第二個元素，第6行的意思是選擇前面有是第一個且是倒數第二個li的所有li，第一行是選擇了第一個，第二行選擇除第一個外的其它所有元素。有三個元素的類似。

06使用表單提交

提交請求有兩種方式，一種是ajax，另外一種是表單提交。很多人都知道ajax，但往往忽略了還有個form提交。

假設在首頁有一個搜索的表單，點擊search的時候就跳到列表頁

你可以一個個去獲取所有的input的值，然后把它拼到網址參數重定向一下，但是其實可以不用這樣，用一個表單提交就好了：

將所有字段的名字寫在input的name里面，然后form的action為搜索頁的鏈接。這樣子不用一行js代碼就能夠搜索跳轉。

如果你需要做表單驗證，那就監聽submit事件，然后做驗證，驗證通過則調一下原生的submit就可以提交了，也是不需要手動去獲取form的值

07自動監聽回車事件

這個的場景是希望按回車的時候能夠觸發請求，像第6點，按回車實現跳轉，或者是像下面的，按下回車就送一條聊天消息：

通常的做法是監聽下keypress事件，然后檢查一下keycode是不是回車，如果是則發請求。

但是其實有個特別簡單的辦法，也是不需要一行JS，那就是把表單寫在一個form里面，按回車會自動觸發submit事件。讀者可以自己試試。這個就啟示我們要用語義的html組織，而不是全部都用div。如果用相應的html標簽，瀏覽器會自動做一些優化，特別是表單提交的input。

08巧用CSS3偽類

CSS3的偽類提供了狀態切換，除了第3點提到的checked之外，還有其它幾個很好用的，例如:focus、:invalid等

1. 例如下面的效果：focus的時候把左邊的放大鏡顏色加深：

借用:focus實現：

2. 再如，如果用戶輸入不合法，則下一步是半透明不可點的狀態：

實現這一步可以用html5的input和css3的:invalid

通過input的type和pattern屬性約束合法性，然后觸發:invalid

JS是萬能的，幾乎可以做任何事情，但是有時候會顯得十分笨拙，在js/html/css三者間靈活地切換，往往會極大地簡化開發，沒有誰是最好的語言，只有適不適合。只要用得好，不管黑貓白貓，都是好貓。

免責聲明：內容和圖片源自網絡，版權歸原作者所有，如有侵犯您的原創版權請告知，我們將盡快刪除相關內容。

在線咨詢

上一篇：HTML DOM 節點介紹
下一篇：使用 Ispell 在命令行中檢查拼寫

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商