您好,登錄后才能下訂單哦!
本篇文章為大家展示了DIV樣式中常用屬性用法是怎樣的,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
DIV樣式匯總
最近在學(xué)習(xí)JavaScript,在做到個要控制控件樣式的例子時,突然有了把常用樣式匯總一下的想法,于是乎就寫了以下內(nèi)容,以下是以div為例來匯總的,希望對大家有些幫助。
一、DIV樣式中常用屬性:
1、Height:設(shè)置DIV的高度。
2、Width:設(shè)置DIV的寬度。
例:
Code <divstyledivstyle="width:200px;height:200px;background-color:Black;"> div>
3、margin:此DIV樣式中常用屬性用于設(shè)置DIV的外延邊距,也就是到父容器的距離。
例:
Code
<divstyledivstyle="background-color:Black;width:500px;height:500px;"> <divstyledivstyle="margin:5px10px20px30px;width:200px;height:200px;background-color:White;"> div> div>
說明:margin:后面跟有四個距離分別為到父容器的上-右-下-左邊的距離;可以看例子中的白色DIV到黑色DIV的邊距離效果。還可以分別設(shè)置這四個邊的距離,用到的屬性如下:
4、margin-left:到父容器左邊框的距離。
5、margin-right:到父容器右邊框的距離。
6、margin-top:到父容器上邊框的距離。
7、margin-bottom:到父容器下邊框的距離。
例:
Code
<divstyledivstyle="width:500px;height:500px;background-color:Black;"> <divstyledivstyle="margin-left:50px;margin-top:50px;width:200px;height:200px; background-color:White;"> div> div>
8、padding:此DIV樣式中常用屬性用于設(shè)置DIV的內(nèi)邊距。
例:
Code
<divstyledivstyle="padding:5px10px20px30px;background-color:Black;width:500px;height:500px;"> <divstyledivstyle="width:200px;height:200px;background-color:White;">div> div>
說明:padding的格式和margin的格式一樣,可以對照學(xué)習(xí)。可以看黑色DIV與白色DIV的邊距來體會此屬性的效果。這是還需要注意的是padding設(shè)置的距離不包括在本身的width和height內(nèi)(在IE7和FF中),比如一個DIV的width設(shè)置了100px,而padding-left設(shè)置了50px,那么這個DIV在頁面上顯示的將是150px寬。也可以用以下四個屬性來分別設(shè)置DIV的內(nèi)邊距:
9、padding-left:左內(nèi)邊距。
10、padding-right:右內(nèi)邊距。
11、padding-top;上內(nèi)邊距。
12、padding-bottom:下內(nèi)邊距。
例:
Code
<divstyledivstyle="padding-left:50px;padding-top:50px;width:150px;height:150px; background-color:Black;"> <divstyledivstyle="width:140px;height:140px;background-color:White;"> div> div>
13、position:此DIV樣式中常用屬性設(shè)置DIV的定位方式。
例:
Code
<divstyledivstyle="width:200px;height:200px;background-color:Black;"> <divstyledivstyle="position:relative;top:10px;left:10px;width:140px;height:140px; background-color:White;"> div> <divstyledivstyle="position:absolute;top:60px;left:60px;background-color:Silver; width:100px;height:100px;"> div> <divstyledivstyle="position:fixed;top:210px;left:210px;background-color:Navy; width:100px;height:100px;"> div> div> <divstyledivstyle="position:absolute;top:50px;left:50px;background-color:Blue; width:100px;height:100px;"> div> <divstyledivstyle="position:fixed;top:200px;left:200px;background-color:Navy; width:100px;height:100px;"> div> <divstyledivstyle="position:static;top:200px;left:100px;background-color:Yellow; width:100px;height:100px;"> div>
說明:position的屬性中有static、fixed、relative、absolute四個屬性。常用relative和absolute。若指定為static時,DIV遵循HTML規(guī)則;若指定為relative時,可以用top、left、right、bottom來設(shè)置DIV在頁面中的偏移,但是此時不可使用層;若指定為absolute時,可以用top、left、right、bottom對DIV進(jìn)行絕對定位;若指定為fixed時,在IE7與FF中DIV的位置相對于屏屏固定不變,IE6中沒有效果(期待高手指點原因);
14、left:設(shè)置對象相對于文檔層次中最近一個定位對象的左邊界的位置。
15、top:設(shè)置對象相對于文檔層次中最近一個定位對象的上邊界的位置。
16、right:設(shè)置對象相對于文檔層次中最近一個定位對象的右邊界的位置。
17、bottom:設(shè)置對象相對于文檔層次中最近一個定位對象的下邊界的位置。
18、z-index:設(shè)置DIV的層疊順序。
例:
Code
<divstyledivstyle="position:absolute;top:50px;left:50px;width:100px;height:100px;background-color:black;"> div> <divstyledivstyle="position:absolute;top:60px;left:60px;width:100px;height:100px; background-color:Blue;z-index:1;"> div> <divstyledivstyle="position:absolute;top:70px;left:70px;background-color:Silver;width:100px;height:100px;"> div>
說明:上例效果中如果不設(shè)z-index屬性藍(lán)色DIV應(yīng)該在中間,而現(xiàn)在的效果藍(lán)色在最上面了。還要說明的是用z-index屬性時,position必需要指定為absolute才行。
19、font:此DIV樣式中常用屬性指定DIV中文本的樣式,其后可跟文本的多個樣式。
例:
Code
<divstyledivstyle="font:bold14px宋體;background-color:Yellow"> 明月幾時有?把酒問青天。不知天上宮闕、今夕是何年?我欲乘風(fēng)歸去,惟恐瓊樓玉宇,高處不勝寒.起舞弄清影,何似在人間? 轉(zhuǎn)朱閣,低綺戶,照無眠。不應(yīng)有恨、何事長向別時圓?人有悲歡離合,月有陰晴圓缺,此事古難全。但愿人長久,千里共蟬娟。 div>
說明:font后可以跟文本樣式的多個屬性,如字體粗細(xì)、字體大小、何種字體等等。還可以用以下幾個屬性分別加以設(shè)置:
20、font-family:設(shè)置要用的字體名稱;
21、font-weight:指定文本的粗細(xì),其值有boldbolderlighter等。
22、font-size:指定文本的大小。
23、font-style:指定文本樣式,其值有italicnormaloblique等。
24、color:此DIV樣式中常用屬性指定文本顏色。
25、text-align:指定文本水平對齊方式,其值有center(居中)leftrightjustify。
26、text-decorator:用于文本的修飾。其值有noneunderlineoverlineline-through和blink的組合。
(在IE中無閃爍效果,F(xiàn)F中有效果。期待高手指點,)
27、text-indent:設(shè)置文本的縮進(jìn)。
28、text-transform:設(shè)置文本的字母大小寫。其值有l(wèi)owercaseuppercasecapitalize(首字母大寫)none。
例:
Code
<divstyledivstyle="text-align:left;text-decoration:line-throughblink;text-indent:30px; text-transform:capitalize;color:Blue;font:bolditalic14px宋體;background-color:Yellow"> 明月幾時有?把酒問青天。不知天上宮闕、今夕是何年?我欲乘風(fēng)歸去,惟恐瓊樓玉宇,高處不勝寒.起舞弄清影,何似在人間? 轉(zhuǎn)朱閣,低綺戶,照無眠。不應(yīng)有恨、何事長向別時圓?人有悲歡離合,月有陰晴圓缺,此事古難全。但愿人長久,千里共蟬娟。 abcdefghijklmnopqRSTUVWXYZ div>
29、overflow:此DIV樣式中常用屬性是指內(nèi)容溢出控制,其值有scroll(始終顯示滾動條)、visible(不顯示滾動條,但超出部分可見)、auto(內(nèi)容超出時顯示滾動條)、hidden(超出時隱藏內(nèi)容)。
30、direction:內(nèi)容的流向。其值有l(wèi)tr(從左至右)、rtl(從右至左)。
31、line-height:指定文本的行高。
32、Word-spacing:字間距。
例:
Code
<divstyledivstyle="font:16px宋體;width:600px;height:200px;word-spacing:5px;line-height:20px; direction:rtl;overflow:auto;background-color:Yellow"> 明月幾時有?把酒問青天。不知天上宮闕、今夕是何年?我欲乘風(fēng)歸去,惟恐瓊樓玉宇,高處不勝寒.起舞弄清影,何似在人間? 轉(zhuǎn)朱閣,低綺戶,照無眠。不應(yīng)有恨、何事長向別時圓?人有悲歡離合,月有陰晴圓缺,此事古難全。但愿人長久,千里共蟬娟。 <br/> 明月幾時有?把酒問青天。不知天上宮闕、今夕是何年?我欲乘風(fēng)歸去,惟恐瓊樓玉宇,高處不勝寒.起舞弄清影,何似在人間? 轉(zhuǎn)朱閣,低綺戶,照無眠。不應(yīng)有恨、何事長向別時圓?人有悲歡離合,月有陰晴圓缺,此事古難全。但愿人長久,千里共蟬娟。 div>
33、border:此DIV樣式中常用屬性設(shè)置DIV的邊框樣式。
例:
Code
<divstyledivstyle="border:dotted2pxblack;background-color:Yellow;width:100px;height:100px;"> div>
說明:border后跟邊框的樣式、寬度、顏色等屬性。還可以用以下屬性分別設(shè)置。
34、border-width:設(shè)置邊框的寬度。
35、border-color:設(shè)置邊框的顏色。
36、border-style:設(shè)置邊框的樣式。
例:
Code
<labelstylelabelstyle="font-size:14px;">選擇樣式:label> <selectidselectid="bstyle"onchange="document.getElementById('tdd').style. borderStyle=this.options[this.selectedIndex].text;"> <optionselectedoptionselected="selected">noneoption> <option>dashedoption> <option>dottedoption> <option>grooveoption> <option>hiddenoption> <option>insetoption> <option>outsetoption> <option>ridgeoption> <option>doubleoption> <option>solidoption> select> <dividdivid="tdd"style="border-style:none;border-width:5px;border-color:Black;width:100px;height:100px; background-color:Yellow;"> div>
說明:border是對四個邊框同時進(jìn)行設(shè)置。也可以單獨對某一邊或幾個邊進(jìn)行設(shè)置,此時用以下屬性:
border-top:設(shè)置上邊框樣式。
37、border-bottom:設(shè)置下邊框樣式。
38、border-left:設(shè)置左邊框樣式。
39、border-right:設(shè)置右邊框樣式。
說明:某一邊框的某一樣式也可單獨設(shè)置,以上邊框為例可以用:border-top-style、border-top-width、border-top-color來分別設(shè)置,由于使用各border相同,所以不在舉例說明。
40、display:設(shè)置顯示屬性。其值有block、none。
41、float:此DIV樣式中常用屬性設(shè)置DIV在頁面上的流向,其值有l(wèi)eft(靠左顯示)、right(靠右顯示)、none。
50、background:設(shè)置DIV的背景樣式。
例:
Code
<divstyledivstyle="width:600px;height:200px;background:yellowurl(mw3.jpg)repeatscroll; overflow:auto"> <divstyledivstyle="width:2px;height:1000px;">div> div>
說明:DIV樣式中常用屬性background后可直接跟背景的顏色、背景圖片、平鋪方式等樣式。也可以用以下屬性分別設(shè)置。
51、background-color:設(shè)置背景顏色。
52、background-attachment:背景圖像的附加方式,其值有scroll、fixed。
53、background-image:指定使有的背景圖片。
54、background-repeat:背景圖象的平鋪方式。其值有no-repeat(不平鋪)、repeat(兩個方向平鋪)、
repeat-x(水平方向平鋪)、repeat-y(垂直方向平鋪)。
55、background-position:在DIV中定位背景位置。其值有topbottomleftright的不同組合。也可以以用坐標(biāo)
指定具體的位置。
例:
Code
<divstyledivstyle="background-color:Yellow; background-image:url(mw3.jpg); background-position:rightbottom;background-attachment:scroll;width:600px;height:200px;"> div>
上述內(nèi)容就是DIV樣式中常用屬性用法是怎樣的,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。