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.父元素 直接包含該元素的祖元素。...