div css常用布局,經典總結

2021-10-20 06:07:50 字數 2007 閱讀 7206

css布局常用的方法:float:none|left|right

取值:none:?預設值。物件不飄浮

left:?文字流向物件的右邊

right:?文字流向物件的左邊

它是怎樣工作的,看個一行兩列的例子

xhtml**:

以下為引用的內容:

這裡是第一列

這裡是第二列

/*這是違背web標準意圖的,只是想說明在它下面的元素需要清除浮動*/

css**:

以下為引用的內容:

#wrap

#column1

#column2

.clear

position:static|absolute|fixed|relative

取值:static:?預設值。無特殊定位,物件遵循html定位規則

absolute:?將物件從文件流中拖出,使用left,right,top,bottom等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據body物件。

而其層疊通過z-index屬性定義

fixed:?未支援。物件定位遵從絕對(absolute)方式。但是要遵守一些規範

relative:?物件不可層疊,但將依據left,right,top,bottom等屬性在正常文件流中偏移位置

它來實現一行兩列的例子

xhtml**:

以下為引用的內容:

這裡是第一列

這裡是第二列

css**:

以下為引用的內容:

#wrap

#column1

#column2

他們的區別在哪?

顯然,float是相對定位的,會隨著瀏覽器的大小和解析度的變化而改變,而position就不行了,所以一般情況下還是float布局!

css常用布局例項

單行一列

以下為引用的內容:

body

#content

兩行一列

以下為引用的內容:

body

#content-top

#content-end

三行一列

以下為引用的內容:

body

#content-top

#content-mid

#content-end

單行兩列

以下為引用的內容:

#bodycenter

#bodycenter#dv1

#bodycenter#dv2

兩行兩列

以下為引用的內容:

#header

#bodycenter

#bodycenter#dv1

#bodycenter#dv2

三行兩列

以下為引用的內容:

#header

#bodycenter

#bodycenter#dv1

#bodycenter#dv2

#footer

單行三列

絕對定位

以下為引用的內容:

#left

#middle

#right

float定位

xhtml**:

以下為引用的內容:

這裡是第一列

這裡是第二列

/*用法web標準不建議,但是記住下面元素需要清除浮動*/

這裡是第三列

/*用法web標準不建議,但是記住下面元素需要清除浮動*/

css**:

以下為引用的內容:

#wrap

#column

#column1

#column2

#column3

.clear

float定位二

xhtml**:

以下為引用的內容:

css**:

以下為引用的內容:

body

.column

#center

#left

#right

Div CSS常見錯誤總結

7.float元素不能指定margin和padding等屬性 ie在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性 可以在float元素內部巢狀乙個div來設定margin和padding 也可以使用hack方法為ie指...

關於CAD用布局出圖

6.調整視口這時候應該清楚想要列印的區域,把視口放進圖框,通過拉扯視口線四個角的藍點來調整顯示區域,用 m 移動視口在圖框中的位置來完成。7.多個視口的字型調整乙個布局裡可以有多個視口,每個視口顯示的比例不一定相同但是它們顯示的字應該是一樣大的。比如說兩個視口的比例分別是1 10和1 20選擇其中乙...

DIV CSS製作網頁之如何設定z index

首先明確幾點在文中所需要用到的概念 1.靜態定位 position static 為position屬性的預設值 2.動態定位 position relative或position absolute或position fixed。3.祖元素 任意包含該元素的元素。4.父元素 直接包含該元素的祖元素。...