css div屬性詳解

2021-05-22 13:14:25 字數 2103 閱讀 3961

步驟一、

分析乙個典型的定義div例子:

說明如下:

● margin是指層的邊框以外留的空白,用於頁邊距或者與其它層製造乙個間距。

如果上右下左margin值均為10px, 則**為:

margin-top: 10px;

margin-right: 10px;

margin-bottom: 10px;

margin-left: 10px;

"10px 10px 10px 10px"分別代表"上右下左四個邊距, 上面也可簡寫為

margin: 10px 10px 10px 10px;

當上下, 左右margin值分別一致, 可簡寫為:

margin: 10px 10px;

前乙個10px代表上下margin值, 後乙個10px代表左右margin值.

當上下左右margin值均一致, 可簡寫為:

margin: 10px;   

如果邊距為零,要寫成"margin: 0px;"。注意:當值是零時,除了rgb顏色值0%必須跟百分號,其他情況後面可以不跟單位"px"。

margin是透明元素,不能定義顏色。

● bordet是指層的邊框,這裡定義層的邊框顏色為"#111",寬度為"10px",樣式為"solid"直線。如果要虛線樣式可以用"dotted"。

● padding是指層的邊框到層的內容之間的空白。和margin一樣,分別指定上右下左邊框到內容的距離。如果都一樣,可以縮寫成"padding:0px"。單獨指定左邊可以寫成"padding-left: 0px;"。padding是透明元素,不能定義顏色。 更

● background是定義層的背景。分2級定義,先定義背景,採用"url(../images/bg_logo.gif)"來指定背景路徑;其次定義背景色"#fefefe"。"no-repeat"指背景不需要重複,如果需要橫向重複用"repeat-x",縱向重複用"repeat-y",重複鋪滿整個背景用"repeat"。後面的"right bottom;"是指背景從右下角開始。如果沒有背景可以只定義背景色background: #ccc

● background-image 屬性為元素設定背景影象。預設地,背景影象位於元素的左上角,並在水平和垂直方向上重複。

例:body

●color用於定義字型顏色。  

● text-align用來定義層中的內容排列方式,center居中,left居左,right居右。  

● line-height定義行高,150%是指高度為標準高度的150%,也可以寫作:line-height:1.5或者line-height:1.5em,都是一樣的意思。

●width這個屬性定義元素內容區的寬度,,可以採用固定值,例如500px,也可以採用百分比,象這裡的"60%"。

要注意的是:這個寬度僅僅指你內容的寬度,不包含margin,border和padding但在有些瀏覽器中不是這麼定義的需要多試試

步驟二、

再看乙個例子:

css:

#sample {

margin: 50px;

border:50px solid #0aa;

padding: 50px;

background-color: #aa0;    

color: #009;;

width:50px;

height:50px;

html:

的大小是78*78畫素,超過了width定義的大小,就越過了width定義的範圍,width不會自動調整大小,定多少就是多少

將換成文字也一樣。

步驟三、

1、將上面的

2、去掉width或height,or

3、改變width和height的值,

試一下看看效果,理解width等屬性的含義。

HTML學習 CSS div詳解

css作用 是為了使網頁美觀,公升級方便,維護輕鬆,能夠讓網頁內容和樣式資訊進行分離。讓內容和樣式分開 使用link來匯入css檔案。語法 每個html都帶了乙個屬性style,可以直接設定css樣式。語法 選擇器 html選擇器 以原始本身命名的選擇器。語法 table會自動呼叫style裡面的屬...

CSS DIV之強化border屬性

在網易首頁改版過程中,在div層套入border邊框是最常用的,它就像如同 可以將樣式 文字 包裝起來。border邊框屬性主要學習邊框風格屬性 border style 邊框寬度屬性 border width 邊框顏色屬性 border color 這三個屬性可以對整個邊框或者單邊框架多樣化設定。...

關於css div屬性的框框

這幾天一直有點糊塗,自學摸索也許比較費勁吧。關於盒子,還有padding margin border 之類屬性還好理解,但是那個絕對浮動相對浮動真的沒搞明白。學了快乙個禮拜了,html css大概過了一遍,標籤屬性理解,關於這個盒子,思路不是很清晰。個人覺得這個html css 就是切圖。把盒子做好...