web第十一講,div與span

2021-10-11 20:48:44 字數 3351 閱讀 5635

案例1

london is the capital city of england.

it is the most populous city in the united kingdom,

with a metropolitan area of over 13 million inhabitants.

11111

2222

test

hello

注意:搞清楚margin、padding、border這三個概念,不能混淆。

margin:容器自身與其他容器之間的距離

padding:容器內部的內容(content)與容器邊框的距離。

border:容器的邊框。

另外:top表示上、bottom表示下、left表示左、right表示右。

案例2

講解

在這個案例中通過合理設定margin和padding,使得不同的div之間有合理的間距,div內部文字也有恰當的間距。

注意span標記的用法,它是對指定內容做特殊處理用的。在上述案例中對"div使用"改變了字型顏色。

案例3

使用div+css進行和簡易頁面布局

講解

在.div1中定義了padding內部邊距為50畫素、background背景色為紅色、width容器寬度為400畫素、height容器高度為400畫素、position定位型別為relative相對定位(相對定位會按照元素的原始位置對該元素進行移動)、left為容器左邊座標是10畫素、top為容器上邊座標是10畫素。

在.div2中定義了padding內部邊距位60畫素、background背景色為綠色、position定位型別為absolute絕對定位(絕對定位會按照頁面的絕對位置定位元素,通過絕對定位可以將指定元素放置在頁面上指定位置),left為容器左邊座標是0畫素、top為容器上邊座標是0畫素。

postion定位型別有三種:

+ 這是第二個塊在使用相對定位左邊偏移50畫素和上邊偏移30畫素後的結果。請注意:它有部分內容與第三個塊重疊了,但它位於文件流中的初始位置仍然還在佔著(虛線框標示的地方),即使把偏移量設得再大它的初始位置也不會被第三個塊填補。同時它的偏移位置也不會把別的塊在文件流的位置擠開,如果有重疊它會和其他元素重疊。

必須給父元素(也可以是祖父級、曾祖父級)增加定位屬性,一般建議使用position:relative。

給子元素加絕對定位position:absolute,同時指定left、right、top、bottom屬性。

+ 下圖中的第二個塊是使用了絕對定位時的樣式。

position:fstatic;靜態定位:html元素的預設值,即沒有定位,遵循正常的文件流物件。另外靜態定位的元素不會受到 top、bottom、left、right影響。

基本語法

塊包含的內容

div標記和span標記預設情況下都沒有對標記內的內容進行格式化或渲染,只有使用css來定義相應的樣式才會顯示出不同。

div標記是塊標記,一般包含較大範圍,在區域的前後會自動換行;span標記是行內標記,一般包含範圍較窄,通常在一行內,在此區域的範圍外不會自動換行。

一般來說,div標記可以包含span標記,但span標記不能包含div標記。

但是塊標記和行標記不是絕對的,可以通過定義css的display屬性來相互轉換。

案例:

這是div1

這是div2

這是span1

這是span2

這是div3

這是div4

這是span3,在使用css排版的頁面中,div標記和span標記是兩個常用的標記。利用這兩個標記,加上css對其樣式的控制,可以很方便的實現各種效果。

這是span4,在使用css排版的頁面中,div標記和span標記是兩個常用的標記。利用這兩個標記,加上css對其樣式的控制,可以很方便的實現各種效果。

div、span標記必須配合css使用才能實現精確定位頁面上的每乙個元素。通過id、class來引用已經定義的css檔案中類選擇器、id選擇器及其它選擇器。

web第十一講,div與span

案例1 london is the capital city of england.it is the most populous city in the united kingdom,with a metropolitan area of over 13 million inhabitants.1...

第十一講 過載

過載單目運算子 單目運算子只有乙個運算元 如 a,b,i,j 等 因此過載函式只有乙個引數,如果過載函式為成員函式,還可以省約此引數。例 將 過載成友元函式。單目運算子一般過載為成員函式 include class complex void show complex operator complex...

第十一講 資料清洗

資料採集完,要進行資料清洗工作,整個資料分析過程中,資料清洗工作幾乎要佔到80 的時間。資料清洗規則總結為四個關鍵點 完全合一 1 完整性 單條資料是否存在空值,統計的字段是否完善。2 全面性 觀察某一列的全部數值,比如平均值 最大值 最小值,根據常識判斷是否有問題。如 資料定義 單位標識 數值本身...