一、常用屬性:
1、Height:設(shè)置DIV的高度。
2、Width:設(shè)置DIV的寬度。
例:
<div style=”width:200px;height:200px;background-color:Black;”>
</div>
3、margin:用于設(shè)置DIV的外延邊距,也就是到父容器的距離。
例:
<div style=”background-color:Black;width:500px;height:500px;”>
<div style=”margin:5px 10px 20px 30px;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:到父容器下邊框的距離。
例:
<div style=”width:500px;height:500px;background-color:Black;”>
<div style=”margin-left:50px; margin-top:50px; width:200px; height:200px;
background- color:White;”>
</div>
</div>
8、padding:用于設(shè)置DIV的內(nèi)邊距。
例:
<div style=”padding:5px 10px 20px 30px;background-color:Black;width:500px;height:500px;”>
<div style=”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)邊距。
例:
<div style=”padding-left:50px;padding-top:50px;width:150px;height:150px;background-color:Black;”>
<div style=”width:140px; height:140px;background-color:White;”>
</div>
</div>
13、position:設(shè)置DIV的定位方式。
例:
<div style=”width:200px; height:200px;background-color:Black;”>
<div style=”position:relative; top:10px;left:10px; width:140px; height:140px;
background-color:White;”>
</div>
<div style=”position:absolute; top:60px;left:60px; background-color:Silver;
width:100px;height:100px;”>
</div>
<div style=”position:fixed; top:210px;left:210px; background-color:Navy;
width:100px;height:100px;”>
新聞熱點
疑難解答