HTML及CSS基礎(chǔ)知識資料

(一)使用

〈styletype="text/css”>

具體css語句

</style>

(二)語法

<styletype=*text/css*>

mm{background-color:red);/*這行表示標(biāo)簽為mm的，背景色為紅色，如果mm替換為p,

則所有<pX/p>標(biāo)簽覆蓋內(nèi)的變?yōu)榧t色*/

</style>

①包含在<style>之中；

②格式為：標(biāo)簽名{具體樣式}

③使用花括號來包含；

④有時(shí)候需要使用雙引號來包含值

大概如下圖

屬性值屬性值

,一「，一h—一卜——1一、

hl{color:red;font-size:14px;}

?千——十-----'

選擇器聲明聲明

(三)顏色

mm{background-color:red：/*這行表示標(biāo)簽為mm的，背景色為紅色，如果mm替換為p,

則所有<p></p>標(biāo)簽覆蓋內(nèi)的變?yōu)榧t色”

mm{color:rgb(50%,50%,0%)}/*可以和上一行寫一起，也可以分開寫*/

nn{color:rgb(50,55,155))/*另外一種顏色表示方法*/

nn{background-color:#0F0l/*第三種顏色表示方法*/

(四)多重聲明：

即把上面的第1、2行合并

mm{background-color:red;

color:rgb(50%,50%,0%)}

效果是一樣的

（五）大小寫

一般來說，CSS對大小寫不敏感，但如果名稱涉及HTML等，則需要注意大

小寫（如class二〃樣式〃）

（六）同一種標(biāo)簽里，通過添加新的標(biāo)簽，以使其和一般的

標(biāo)簽不一樣

nn{color:rgb（50,55,155）}/*另外一種顏色表示方法*/

nn{background-color:#0F0;

font-size:30px;

}/*第三種顏色表示方法*/

nndifferent{/*雖然在nn里，但背景顏色和普通的nn不同，不過字體依然使

用nn的大小（其他的也是）*/

background-color:rgb（10%,10%,10%）}

}

（七）id選擇器和類選擇器

在html可以在標(biāo)簽里加id,然后css可以對id相符的進(jìn)行樣式操作。

有標(biāo)簽：<mmid="nn">pppp</mm>

有操作：

#nn{

background-color:red;

position:absolute;

left:500px;

top：500px；

color:rgb（50%/50%,0%）;

font-size:45px;

）

即可

（八）絕對定位

丟一個(gè)盒子的樣式：

.box{

position:absolute;

height:200px;

width:200px;

background-color:#ddd;

border:Ipx#eee;

border-top-width:Ipx;

border-right-width:lpx;

border-bottom-width:Ipx;

border-left-width:Ipx;

border-top-style:none;

border-right-style:none;

border-bottom-style:none;

border-left-style:none;

border-top-color:rgb(238,238,238);

border-right-color:rgb(238>238,238);

border-bottom-color:rgb(238,238,238);

border-left-color:rgb(238,238,238);

-moz-border-top-colois:none;

-moz-border-right-co1ors:none;

-moz-border-bottom-colors:none;

-moz-border-left-colors:none;

border-image-source:none;

border-image-slice:100%100%100%100%;

border-image-width:1111;

border-image-outset:0000;

border-image-repeat:stretchstretch;

padding:5px：

padding-top:5px;

padding-right:5px;

padding-bottom:5px;

padding-left:5px;

)

(8)CSS的position

語法為：

position:fixed

值描述

absolute生成絕對定位的元素，相對于static定位以外的第一個(gè)父元素進(jìn)行定位。

元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。

fixed生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。

元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。

relative生成相對定位的元素，相對于其正常位置進(jìn)行定位。

因此，"left:20”會(huì)向元素的LEFT位置添加20像素。

static默認(rèn)值。沒有定位，元素;1；現(xiàn)在正常的流中（忽略top,bottom,left,right或者z-index聲明）。

inherit規(guī)定應(yīng)該從父元素繼承position屬性的值。

(9)div里面套用div

html方面：

<divid="box">

<divclass="smallbox">

<divclass="smallerboxl">

Nol：

</div>

<divid="nol"class="smallerbox2">

文字1

</div>

</div>

<divclass="smallbox">

<divclass="smallerboxl">

No2：

</div>

<divid="nol"class="smallerbox2">

文字2

</div>

</div>

</div>

css方面：

<styletype="text/css">

#box{

position:absolute;

width:400px;

height:500px;

background-color:#ddd;

)

.smallbox{

position:abbr;

width:400px;

height:100px;

left:20px;

top:20px;

background-color:#aaa;

)

.smallerboxl{

position:relative;

left:20px;

top:10px;

background-color:#777;

width:60px;

)

.smallerbox2{

position:relative;

Ieft:80px;

top；-12px；

background-color:#333;

width:200px;

)

</style>

(9)CSSpaddingmarginborder屬性詳解

關(guān)于定義：

margin：層的邊框以外留的空白

background-color：背景顏色

background-image：背景圖片

padding：層的邊框到層的內(nèi)容之間的空白

border：邊框

content：內(nèi)容

關(guān)于四個(gè)方向：

先上圖:

background<olor

margin,

,transparentelements

平面圖如下:

測試：（有些結(jié)論是驗(yàn)證后copy現(xiàn)有的，因?yàn)榧儨y試不可能推出必然結(jié)果）

①首先定義三個(gè)：body為背景，one為測試塊，another為對比塊

body

background-color:#000;

)

.one

position:absolute;

background-color:#333;/*黑色背景*/

width:200px;

height:200px;

text-align:center;

font-size:50px;

)

.another

(

position:absolute;

top:250px;

background-color:#999;

width:200px;

height:200px;

text-align:center;

font-size:50px;

）

效果：

￡最常訪問火狐官方站點(diǎn)⑥Googl

②向測試塊追加屬性margin（控制塊級元素之間的距離）：

margin:200px;

效果為：

說明：

<l>margin本身是透明的（背景還是黑色）；

<2>margin:200px;是向四個(gè)方向追力口200px,相當(dāng)于上下、左右各增加400px；

<3>單純追加margin-top:200px;將導(dǎo)致原有塊往下移動(dòng)200Px距離；

假如刪除兩個(gè)塊的：position:absolute;將導(dǎo)致當(dāng)前塊和之后的塊都移動(dòng)相

對位置。

變化前：

。際干町IT入MX曰/b

變化后:

最常訪問火孤官方站點(diǎn)國Goog

<4>margin-left:200px不會(huì)使得后面的塊占用之前塊的位置（因?yàn)橄喈?dāng)于前塊

width增加200px）

③向塊內(nèi)追加padding屬性：（控制塊級元素內(nèi)部）

padding:200px;追力口后：

對比塊

<1>說明padding分為四個(gè)方向。200相當(dāng)于每邊追加200px

padding-right:200px;追加后:

<1>說明padding不影響塊內(nèi)文字原有布局（文字還在原來位置）。

④關(guān)于border：

語法：

border:粗細(xì)樣式顏色；

關(guān)于樣式：

?none:無樣式

?hidden:除了同表格的邊框發(fā)生沖突的時(shí)候，其它同none

?dotted:點(diǎn)劃線

?dashed:虛線

?solid:實(shí)線

?double:雙線,兩條線加上中間的空白等于border-width的取值

?groove:槽狀

?ridge:脊?fàn)?，和groove相反

?inset:凹陷

?outset:凸出，和inset相反

追力口border:100pxgroovered;

效果說明:

<l>border的第一個(gè)參數(shù)同樣指每個(gè)邊增加的數(shù)值。

<2>第二個(gè)參數(shù)是樣式（更多樣式參考上面）；

<3>第三個(gè)參數(shù)是顏色（也可以寫為#000這種形式）；

⑤border和padding的雙重追加

padding-right:200px;

border:50pxdouble#fff;

效果說明：

①border在padding外側(cè)（二者沒有重疊部分）；

⑥border、padding、margin三者同時(shí)追加:

padding-right:200px;

border:50pxdouble#fff;

margin-bottom:100px;

效果：

效果說明：

①margin在border的更外面。

總結(jié)：

①最外面是margin：

不能染色（透明的），屬于塊間元素（控制塊和塊的距離）；可以選擇寬度，可

以只影響某一個(gè)方位。

②次外面是border：

可以染色（同時(shí)也受背景圖片/背景顏色的影響），可以選擇樣式，可以選擇寬

度，可以只在某一個(gè)方位應(yīng)用如：border-left:50pxdouble#fff;

③再次是padding：

可以染色（根據(jù)background-color）,受背景圖片的影響，可以選擇寬度，可以

只影響某一個(gè)方位。不影響最內(nèi)層的文字。

④最內(nèi)層是content：

文本內(nèi)容區(qū)，受width、height>背景圖片、背景顏色等影響,

如圖:

（10）打開一個(gè)網(wǎng)頁時(shí)，以新窗口形式打開

將

<ahref=""x/a>

新增屬性：

<ahref=""target=M_blank"x/a>

即可。

（11）關(guān)于塊間的莫名空隙

假設(shè)有html代碼：

<divid="a">

<divid="mm">

aa

</div>

</div>

<divid="b">

〈divid="mm">

bb

</div>

</div>

其有CSS屬性：

#mm{

margin:20px;

）

問題：

若給a塊和b塊染色，會(huì)發(fā)現(xiàn)，a塊和b塊之間將會(huì)有一定空隙（透明的）。

解決辦法：

①給mm的父塊a和b,增加一條屬性：

paddingilpx;

即可（不能是0）。（背景色將自動(dòng)填充空隙區(qū)域）

②如果想避免在其他方向出現(xiàn)的空隙，那么在只在需要的方向（例如只對

padding-top和padding-buttom設(shè)置屬性）

（12）背景圖片（完全填充）

HTML代碼：

<!--背景圖片一>

<divid="LayerlM>

<imgsrc="image/index_bg2.jpg"height="100%"width="100%"/>

</div>

CSS代碼：

#Layerl

{/*由于背景圖片不能縮放，故如此設(shè)置*/

position：absolute;

width:100%;

height:100%;

z-index:-l;

opacity:0.7;

）

即可

（13）輸入框在空的時(shí)候有文字，輸入內(nèi)容后消失

<inputid="keyword"type="text"placeholder二“過濾“value二"”/>

這里的placeholder”過濾“，就是底文字

(14)鼠標(biāo)移動(dòng)到上面的時(shí)候，顯示提示

如代碼：

<inputid="baoji"type="text"placeholder="請輸入數(shù)字

style="text-align:right;width:75px"title：”可以輸入小數(shù)”〉

效果：

外攻攻擊:

會(huì)心幾率:I廠他——

會(huì)心效果：;：可二入〃強(qiáng)1

破防傷害：t力—

.點(diǎn)擊計(jì)宜傷室

(15)HTML標(biāo)簽圖

(16)設(shè)置文本垂直居中

簡單辦法是：在CSS屬性里，設(shè)置

1ine-height*xxpx；

其中的xx,值和這個(gè)div塊的height的一樣。

(17)選擇器整理

選擇器方法HTML示例

id#id名<pid=,,a">#a{xxxx}

class.class名<pclass="a">.a{xxx}

通配符通配符名<div>div{xxxx}

如果是*,表示所有

兒系

屬性disabled<inputdisabled>[disabled]{xxxx}

<xxtype="button>[type=button]{xxx}

選擇所有[class^=class<xclass="ab">[class^=a]{xxx}

有class="a"名]<xclass="a">

的兩個(gè)被同時(shí)選中

選擇所有[屬性l=pp]<plang="pp">[lang|=pp]{xxx}

某屬性的<plang="bpp">

值里有pp都要被選中

②

<div>

<ahref="hllp:〃www.w3.org/*>W3C</a>

<ahref="#htmr>HW/a>

<ahref="#css”>CSS</a〉

</div>

[hrefy#"]{color:red}

選中href里面，有#的（第2、3個(gè)），這個(gè)符號是英文狀態(tài)下，shift+6

③

<ahref="http:〃xxx.doc”>word文檔.doc</a>

<ahref="http:〃xxxx.pdf”>pdf文件.pdf</a>

[href$=pdf]{color:red;}

選中href里面，格式是pdf的（即第二個(gè)）

④

<ahref="http:〃lady.163.com/15.女

<ahref="http:〃lady.163.com/10,范

<ahref="http:〃sports.163.com/12.html”>

<ahref=z，http://sports.163.com/09.htmlzz>

[href*=",lady.l63.tom"]{color:pink;}

選擇href里面，值有的所有標(biāo)簽（即1和2）

④偽類選擇器

<ahref二〃http://www?163.com〃>忸

a:link{color:gray;}

a:vi$ited{color:red;}

a:hover{color:green;}

a:active{color:orange;}

a:link表示，所有鏈接的樣式；

a:visited表示，訪問過的鏈接的樣式；

a:hover表示，鼠標(biāo)移動(dòng)上去之后的樣式；

a:active表示，用戶鼠標(biāo)點(diǎn)擊上去之后的樣式

其中hover和active還可以對其他的生效。

如果四個(gè)都用，要按順序來寫。

⑤不同狀態(tài)下的樣式

?:enabled

-input:enabled{color:#ccc;}

?:disabled

-input:disabled{color:#ddd;}

?xhecked

一input:checked{color:red;}

enabled表示，可用時(shí)的樣式；

disabled表示，不可用時(shí)的樣式；

checked表示，選中時(shí)的樣式,（比如單選框）

⑥和列表相關(guān)的

<U1>

<li>—</li>

<li>：</li>

<li>三</li>

<li>四</li>

Gi>五</li>

<li>六</li>

</ul>

H:first-child{xxxx}表示第一個(gè)的樣式

Ii:last-child{xxx}表示最后一個(gè)的樣式

li:nth-child(even){xxx}表示奇偶相間的，偶數(shù)項(xiàng)的樣式，odd表示奇數(shù)

項(xiàng)。注意，如果有其他＜p＞或者＜li＞標(biāo)簽或其他，雖然標(biāo)簽名不同，但

依然會(huì)影響起效果的順序(比如奇數(shù)變偶數(shù))。

even可以修改，比如使用2n+2(n從0開始)，表示選擇2、4、6

項(xiàng)個(gè)子元素。

也可以改為：li：nth-last?child(2n+2){xxx}表示倒著數(shù)第2、4、6個(gè)，這

里是5、3、1項(xiàng)

⑦只選中只有一個(gè)子元素的項(xiàng)

<ul>

<li>-</li>

</ul>

<ul>

<li>—</li>

<li>二</li>

</ul>

:only-child{color:red;}

html代碼如：

<html>

<body>

<ol>

<li>aa</li>

</ol>

<ul>

<li>bb</li>

<li>cc</li>

</ul>

<p>qq</p>

</body>

<style>

:only-child{color:red;}

</style>

</html>

只影響aa

⑧對于自定義列表，選擇第一個(gè)<dd>

<dl>

<dt>作者:</dt>

<dd>DaveShea</dd>

<dd>MollyE.Holzschlag</dd>

<dt>出版社:</dt>

<dd>人民郵電出版社</dd>u

</dl>

dd:first-of-type{color:red}

效果是DaveShea那項(xiàng)變紅色(但人民郵電出版社不變)

first?of-type表示第一個(gè)這個(gè)類型(dd)的元素。

可以更改為last-of-type(最后一個(gè))

nth-of-type(even)表示偶數(shù)個(gè)

nth-last-of-type(2n)倒數(shù)的偶數(shù)項(xiàng)的元素

⑨選擇在A標(biāo)簽范圍內(nèi)，只有一個(gè)B標(biāo)簽的B標(biāo)簽

<pXspan>CSS</span〉和<span>HTML</span〉是頁面制作的基礎(chǔ)。</p>

<p><span>CSS</span>主要是用于定義<。0)>閨、皿</011)>內(nèi)容在瀏覽器內(nèi)的顯示樣式</p>

如第一行有2個(gè)<span>,而第二行只有一個(gè)<span>

若對第二行CSS染色，使用

span:only-of-type{xxxx}

⑩不常用的

：empty選中頁面中沒有子元素的元素

:root選中根標(biāo)簽

：not()不包含某個(gè)選擇器的元素，參數(shù)是簡單選擇器

：target選中被錨點(diǎn)選中的目標(biāo)元素

：lang()language為某些特殊值的元素

簡單選擇器組合起來之后，表示兩個(gè)條件都符合的元素。

(18)設(shè)置文本框輸入的最大字符數(shù)

①屬性：maxlength="15"表示限制最多輸入15個(gè)字符(中文或者數(shù)

字、英文都是15個(gè)字符)。

(19)min-width和max-width的替代

在某些版本IE中(有一說是IE6和以下，但我自己實(shí)測IE8也不行)，

min-width和max-width不可用。

可用以下代碼替代：

min-width:200px的替代

_width:expression((documentElement.clientWidth<1000)?"200px":

"auto");

max-width:1000px的替代

_width:expression((documentElement.clientwidth>1000)?"lOOOpx":

"auto");

解釋：

①后面的auto根據(jù)實(shí)際需要使用。

②前面的documentElement.clientWidth按查到的說明，指的是屏幕空

間寬度，但實(shí)際應(yīng)用中，不知為何，documentElement.clientWidth

的值總為0

(20)絕對定位、定寬情況下，設(shè)置水平居中

①思路：

首先絕對定位：position:absolute;

其次設(shè)置左方位置：left:50%;

然后定寬(假設(shè)300px)：width:300px;

讓內(nèi)容往左邊移動(dòng)寬帶一半的位置：margin-left:-150px;

于是內(nèi)容中間的位置，就在其父塊的中間

②如果定高，垂直居中的話，同理。

(21)滾動(dòng)條的美化

forchrome內(nèi)核：

/*有這行才有效，滾動(dòng)條的寬度*/

::-webkit-scrollbar{

width:12px;

)

/*滾動(dòng)條的背景*/

::"webkit-scrollbar-track{

-webkit-box-shadow:insetO06pxrgba(0,0,0,0.3);

-webkit-border-radius:lOpx;

border-radius:lOpx;

)

/*滾動(dòng)條*/

::-webkit-scrollbar-thumb{

-webkit-border-radius:10px;

border-radius:lOpx;

background:rgba(255z0z0,0.8);

-webkit-box-shadow:insetO06pxrgba(0,0,0,0.5);

)

/*貌似是切換窗口時(shí)顯示的顏色*/

;;-webkit-scrollbar-thumb:window-inactive{

background:rgba(255,0/0/0.4);

}

更詳細(xì)的說明：

/sweetsuzyhyf/article/details/8089158

forIE：

html{

overflow:auto;

SCROLLBAR-FACE-COLOR:4BED8EB;

SCROLLBAR-SHADOW-COLOR:#DDF8FF;

SCROLLBAR-HIGHLIGHT-COLOR:#92COD1;

SCROLLBAR-3DLIGHT-COLOR:#DDF8FF;

SCROLLBAR-DARKSHADOW-COLOR:#92COD1;

SCR0LLBAR-TRACK-C0L0R:#BED8EB;

SCROLLBAR-ARROW-COLOR:#92COD1

)

forfirefox：

firefox的需要使用插件。

這里放一個(gè)我copy到的內(nèi)容，需要的時(shí)候找吧

<linkrel=*stylesheet*

href=*js/malihu-custon)-scrollbar-plugin/jqucry.mCustomScrollbar.min.css”>

<!-latestjQuerydirectfromgoogle*sCDN->

<scripttype=*text/javascript*src=*js/jquery-l.11.l.min.js*>

</script>

<scripttype=*text/javascript*src=*js/jquery-migrate-l.2.1.min.js*>

</script>

<scriptsrc=*Js/mal1hu-custom-scrol1bar-plugln/Jquery.mCustomScrol1bar.concat.mln.Js*>

</script>

<script>

if(!$.browser,webkit){

$.mCustomScrolIbar.defaults.scrollButtons.enable=true;//enablescrollingbuttonsby

default

S.mCustomScrolIbar.defaults,axis="yx";//enable2axisscrollbarsbydefault

$(".(oniainer^).mCustomScrolIbar({theme:"dark"});

Tab標(biāo)簽的內(nèi)容區(qū)，高度自適應(yīng)父容器

假

父div高度大小不確定，子div分為多層，一層需要自適應(yīng)，其他固定高

度

類

<ci:\class="parent”)

class="child”)

<divclass="tab〃>

</div>

<d.class="content”)

</div>

</div>

</div>

父容器的高度不確定，并且是可變的；

我們需要child能填滿父容器，并且tab的高度定高，content的高度不定高,

content里面的內(nèi)容可能較多，需要滾動(dòng)條。

那么這么設(shè)置：

<style>

?child(

height:100%;

width:100%;

padding-top:20二;

}

.tab{

margin-top：-20px;

height:20px;

width:100%;

)

.content{

height:100%;

width:100%;

</style>

是可以達(dá)到我們的要求的。

另外，只要child里還可以添加更多的定高標(biāo)簽，只要只有一個(gè)要求自適應(yīng)即可,

方法依然是調(diào)整父容器的padding屬性，和其他定高/定寬標(biāo)簽的margin屬性

(23)textarea的拼寫檢查

默認(rèn)是有的，對拼寫不正確的單詞下面添加紅色波浪線；

屬性設(shè)置方法：

〈標(biāo)簽名spellcheck=true|false>

如果值是true,則檢查(有紅色波浪線)；

如果是false,則不檢查。

例子：

<textareaspellcheck=falsex/textarea>

禁止拉伸：

在css屬性里添加

resize:none

(24)chrome開啟賬號密碼自動(dòng)填充后，背景色為黃色的問題

/articles/EZ777

(25)關(guān)于圖片

有時(shí)候會(huì)遇見這樣的事情：

我們需要一個(gè)圖片，他平常假設(shè)是20Px大小，當(dāng)我們鼠標(biāo)移動(dòng)上去之后，他的

大小變?yōu)?0px,且是以圖片中心放大的。

實(shí)現(xiàn)方法是這樣：

.img{

height:20px;

width:20px;

position:relative;

)

.img:hover{

height:30px;

width:30;

top:-5px;

left:-5p.\;

)

其關(guān)鍵是讓圖片的position屬性變?yōu)閞elative,于是，圖片首先沒有脫離文檔流,

不存在其他dom結(jié)點(diǎn)占用了文檔流的位置，又或者是圖片的變大，把其他圖片

遮擋住了；

然后設(shè)置其變大后的寬高，并且向左移動(dòng)增加寬度的一半，向上移動(dòng)增加高度的

一半，以確保結(jié)果是以圖片原中心為中心變化的；

而:hover表示只有鼠標(biāo)移動(dòng)上去之后才會(huì)這樣，鼠標(biāo)沒有移動(dòng)上去的時(shí)候是保持

原樣的。

另外一個(gè)問題是，我們?nèi)绾巫寛D片出現(xiàn)在我們指定的位置，并且大小為我們指定

的大小。

解決辦法是，設(shè)置一個(gè)div,用這個(gè)div的contentbox區(qū)域來確定圖片所在的位

置，然后該div內(nèi)只設(shè)置這一個(gè)圖片，以避免不同圖片在同一個(gè)div容易導(dǎo)致的

沖突（比如位置不好確定）。

然后讓圖片填充滿contentbox的區(qū)域；

注意：這個(gè)div的主要目的是為了定位圖片的位置，之所以是8ntembox區(qū)域，

是因?yàn)楸苊夂拖噜廳iv,或者其他什么東西所導(dǎo)致的沖突，而這些沖突有時(shí)候在

遇見之前有時(shí)候是無法預(yù)料到的（雖然我一時(shí)也想不起來有什么，但是以一個(gè)良

好的習(xí)慣來避免麻煩的發(fā)生，是一種明智的抉擇）；

html代碼大概是這樣：

<(class二〃parent”〉

<class="icon"〉

<1:class="img〃src=〃Lpng〃>

</div>

<d\class二〃icon”>

<class二〃img〃src=〃2.png〃>

</div>

<dLclass二〃icon〃>

<class=imgsrc=3.png>

</div>

</div>

(26)enctype屬性

<formenctype="va￡ue">

值value描述

application/x-www-form-urlencoded在發(fā)送前編碼所有字符(默認(rèn))

multipart/form-data不對字符編碼。在使用包含文件上傳控件的表單時(shí),必須使用該值.

text/plain空格轉(zhuǎn)換為"+"加號，但不對特殊字符編網(wǎng)。

(27)自定義checkbox或者radio

html代碼：

<label>

:type=〃checkbox"class="radio"name=//TableCheckedz，/>

<span></span>

選擇磁盤</siin>

</label>

CSS代碼:

.radio{/*這個(gè)描述的是輸入框的基木樣式，透明，絕對定位，浮動(dòng)在最下*/

opacity:0;

position:absolute;

z-index:-1;

^overflow:auto;我找到的代碼有這一行，但我自己試驗(yàn)后感覺并沒有必

要*/

}

.radio[type=checkbox]+span{/*如果類型是radio,那么這里就是

type=radio,當(dāng)然不寫也可以。+s￡an表示這個(gè)元索局的第一個(gè)span元素*/

display:ic/*因?yàn)樾枰獙憇pan元素的大小*/

height:20"；/明標(biāo)的大小*/

width:20px;

background-image:.i1(01.png);

background-position:CCULT;/*讓背景圖居中*/

position:rilniive;/*相對定位*/

top:J-G可能需要根據(jù)實(shí)際情況來調(diào)整位置本/

left:5px;

L

.radio[type=checkbox]:checked+、0M{/*選中時(shí)的樣式*（

background-image:url（02.png）;

）

（28）禁止元素被選中

在css的樣式表里，添加這樣屬性（可兼容所有瀏覽器）

{

-moz-user-select：-moz-none：

-khtml-user-select：none；

-webkit-user-select：none；

-ms-user-select；none；

user-select：none；

）

關(guān)于IE10的：

/*

IntroducedinIE10.

See/testdrive/HTML5/msUserSelect/

*/

（29）label的用法

用法一：（帶id的）

＜inputtype="checkbox"id="check”）

for=〃check〃＞點(diǎn)擊我,左邊也可以被改變＜/：

方法二：被label包含在一起的

type="checkbox"id="check”）點(diǎn)擊我，左邊也可以被改變

</label>

(30)設(shè)置background-image大小

背景圖片的默認(rèn)大小由圖片來源決定；

假如我們需要調(diào)整其大小，有兩種辦法，更換為image標(biāo)簽，或者是使用

background-size屬性

其值有多種：

值描述

length設(shè)置背景圖像的高度和寬度。

第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。

如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為"auto%

percentage以父元素的百分比來設(shè)置背景圖像的寬度和高度。

第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。

如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為Tut?！薄?/p>

cover把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。

背曷圖像的某些部分也許無法顯示在背景定位區(qū)域中。

contain把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。

【1】length顧名思義，就是lOOpx之類;假如原有圖像分辨率為30Px*30px,那

么這里寫成40px,圖片就被放大了；

[2]百分比：這里指的是相市于其塊的大小。假如一個(gè)div其大小為40px*40px,

背景圖大小為16px*16px,那么100%的話，就是把背景圖變?yōu)?0px*40Px大??；

[3]和【4】見描述，其中[3]是xy比例不變放大，【4】是拉伸至填滿；

一般需要配合background-positionxenter來使用；讓圖片居中顯示；

有兩個(gè)參數(shù)，第一個(gè)是x軸的，第二個(gè)是y軸的，如果省略只寫一個(gè)的話，應(yīng)該

是等比例y大小隨之變化。按說明，只寫一個(gè)y的屬性值為auto；

（31）使用padding來進(jìn)行左定寬右自適應(yīng)布局，及其遇見問題和解決辦法

①情景：

有一父容器div,其高和寬不定，稱之為P；

該父容器有兩個(gè)子div,左右布局，左定寬，滿高，右自適應(yīng)剩余區(qū)域；

其中，定寬稱之為A,變寬稱之為B；

A和B是等向的；

P必然能容納A和B

可能的附加條件：

【1】A和B的寬高度可能不會(huì)撐滿P,即上下左右都可能留有空隙，但這些空

隙的寬或者高是已知的；

[2]A和B之間可能有一定間隙；

備注：

[1]左自適應(yīng)右定寬方法同理；

[2]上下布局同理；

②方法：

原理：利用P的padding屬性和A的margin屬性來布局;

[1]由于P寬高不定，因此可以忽視對P的寬高設(shè)置；

【2】假設(shè)A的寬度為lOOpx；A距離左側(cè)lOpx,距離B有：LOpx。因此，B的左

側(cè)實(shí)際有120Px寬度；先設(shè)置P的css屬性如下設(shè)置：

?P{

padding-left:120px;

width:略；

height:略；

)

【3】設(shè)置A的CSS屬性,如果要加border屬性,那么需要注意A和B的box-sizing

要設(shè)置為border-box

.A{

margin-left:-llOpx;

width:lOOpx;

box-sizing:borer-box;

float:left;

Note：

《1》如果有border屬性，那么content區(qū)域要對應(yīng)減少border的寬度（并且如

果兩側(cè)都有，那么是雙倍的寬度）；

《2》必須添加float屬性，以使其脫離文檔流;假如拋棄float屬性,而采用display:

inline-block屬性的話，會(huì)導(dǎo)致右側(cè)的B會(huì)靠近A,而不是在我冶預(yù)想的區(qū)域之中。

[4]設(shè)置B的CSS屬性，沒有什么特殊的，只需要設(shè)置寬高為100%即可；

.B{

width:100%;

height:100%;

box-sizing:border-box;

}

③如此，便能實(shí)現(xiàn)左定寬，左變寬的布局了；并且由于沒有使用CSS3屬性，并

且margin的范圍沒有超出P的盒模型，因此相對兼容性也很好。

④可能存在的問題：

[1]由于使用了float屬性，也許在某些版本的瀏覽器中可能出現(xiàn)問題（真有這

種可能？）；

解決辦法：

取消A的float屬性，用以下CSS替代：

display:inline-block;------A和B都設(shè)置

vertical-align:top;------A和B都設(shè)置

margin-right:若干px;------A設(shè)置，注意：這行的值可能并非10px,也許只有

5px

(31)CSS3屬性pointer-events

①語法：

pointer-events：auto|none|visiblepainted|visiblefill|visiblestroke|visible|painted|fill|stroke

Iall

默認(rèn)值：auto

適用于：所有元素

繼承性：有

動(dòng)畫性：否

計(jì)算值：指定值

②效果：

當(dāng)屬性值為none時(shí)，元素永遠(yuǎn)不會(huì)成為鼠標(biāo)事件的目標(biāo)。例如點(diǎn)擊事件，打開

新連接(ahref='xxxx')事件等。

如代碼：

<!DOCTYPEhtml>

<htmllang="zh-cmn-Hans">

<head>

<metacharset="utf-8"/>

<title>pointer-events_CSS參考手冊_web前端開發(fā)參考手冊系列</title>

<metaname="author"content="JoyDu(飄零霧雨)，dooyoe@,

"/>

<style>

a[href=""]{

pointer-events:none;

)

</style>

<script>

functionabc(){

alert("l");

)

</script>

</head>

<body>

<ul>

<lixaonclick="abc()">MDN</ax/li>

<lixaonclick="abc()"href="">一個(gè)不能點(diǎn)擊的鏈接

</ax/li>

</ul>

</body>

</html>

上面這段代碼，第二行文字既不會(huì)觸發(fā)alert事件，也不會(huì)觸發(fā)打開新鏈接的事

件。

（32）旋轉(zhuǎn)的盒子

①關(guān)鍵之處在于：

必須在box外面套一層殼，然后透視的CSS屬性設(shè)置給他，否則旋轉(zhuǎn)的時(shí)候，旋

轉(zhuǎn)的是box,那么透視角度會(huì)跟著box一起轉(zhuǎn)，導(dǎo)致視角出錯(cuò)。

②html：

id="Box_Background”>

<divclass=*Box*>

<divclass="surfacetop”>

top

</div>

<divclass="surfacebottom”〉

bottom

</div>一

<divclass=*surfaceleft”)

left

_________</div>

<diclass=z，surfaceright”)

right

</div>一

<divclass="surfaceback”)

back

</div>一

<divclass="surfacefront*>

front

</div>

</div>

</div>

③CSS代碼:

#Box_Background{

position:nbsolui

top:300px;

left:500px;

width:300px;

height:300px;

border:Ipxsoljc#aaa;

perspective:500px;

perspective-origin:50%50%;

}

.Box{

position:absolute;

top:lOOpx;

left:lOOpx;

width:lOOpx;

height:lOOpx;

text-align:eent(??;

transform-style:preserve-3d;

.Box.surface{

position:absolute;

border:Ipxsolidblack;

width:lOOpx;

height:lOOpx;

line-height:lOOpx;

text-align:center;

?keyframestop{

0%{

}_______________________________________________________________________

100%{__________________________________________________________________________________

transform:roiateX(90dcg)tt；.nslatcZ(50px)

工

}

?keyframesbottom{

0%(

~r

100%j_________________________________________________________________

transform:tai\(-90(le)Iran：<Z(50px)

丁

}

?keyframesleft{

0%{

}

____￡00%{

tmnsforiii:(一90)()

}

}

?keyframesright{

0%{

}

100%{___________________________________________

transform:roiatoY(90deg)translaicZ(50px)

~r

)

?keyframesfront{

0%{

nr

100%{

transform:iianslatcZ(50px)

}

)

?keyframesback{

0%{

}

100%{

transform:trans1atcZ(-50px)rot<,eY(180(：)

~T~

)

?keyframesall{

0%「

100%{______________________________________________________________________

transform:rotaie3d(l,1,1,360deg)

________________