頁面布局基礎篇

2021-09-14 05:40:38 字數 980 閱讀 1623

布局模型:

1.流動模型flow()--預設的網頁布局形式

塊狀元素自上而下的垂直排列;而內聯元素則會在所在行從左到右進行排列

2.浮動模型

任何元素預設是不能浮動的,可用css設定float  如 div、p、table、img 等元素都可以被定義為浮動

(1)可實現兩個div併排顯示

div

(2)同理,可實現兩個div 一左一右一行顯示

div

#div1

#div2

3.層模型

(1)絕對定位:(設定position:absolute;)

使用left,right,top,bottom屬性,相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位,若沒有則為相對於body進行定位

div

(2)相對定位(position:relative;)

相對於以前的位置浮動起來進行移動,而偏移前的位置保持不變。

(3)固定定位(position:fixed;)

相對於檢視固定不變,它不會隨瀏覽器視窗的滾動條滾動而變化,除非你在螢幕中移動瀏覽器視窗的螢幕位置,或改變瀏覽器視窗的顯示大小。

relative 與 absolute 混合使用:

規範:作為參照的元素(設定position:relative;)必須為

進行相對定位元素

(position:absolute;

left:;top:;)的前輩。

參照定位的元素必須加入position:relative;

#box1
定位元素加入position:absolute,便可以使用top、bottom、left、right來進行偏移定位了。

#box2

CSS頁面布局基礎

5 css頁面布局基礎 字符集不能設定寬度,如果要設定寬度必須display設定成塊級 inline 字符集 block 塊級 padding內邊距,border邊框,margin外邊距。4個 上 右 下 左,3個 上 左右 下,兩個 上下 左右,乙個 上下左右。元素浮動 float none 沒有...

頁面布局基礎1

相對定位和絕對定位 1.相對定位用於小幅修改某個元素的位置,使之相對於正常情況應該出現的地方稍微移動一下位置。使用position relative屬性,再連同left,right,top和bottom等屬性,即可實現相對定位功能。屬性名稱 屬性值用途 position static relativ...

頁面布局基礎3

html 5的結構元素 1.html5引入語義上的結構性元素來配置網頁區域,這些新的塊級元素並不是取代div元素,而是和div及其他元素結合使用。2.更多html5結構元素 css對列印和移動web的支援 1.為瀏覽器顯示建立乙個外部樣式樣式表和列印設定建立另乙個樣式表,現代瀏覽器會根據在螢幕上顯示...