CSS頁面布局基礎2 定位

2021-06-26 07:41:38 字數 1677 閱讀 3440

1、四種定位型別:通過position屬性指定分別是static(預設值)、relative、absolute、fixed

static(靜態定位):表示按照正常定位方案,元素盒按照在文件流中出現的順序依次格式化

relative(相對定

):將移動元素盒,但是它在文件流中的原始空間會保留下來。

absolute(絕對定位):元素盒徹底從文件流中脫離出來,並相對於其容器塊進行定位。因為這些元素從文件流中脫離出來,所以它們不再影響周邊元素的布局,並且它們佔據的空間不會被保留。

fixed(固定定位):與絕對定位類似,元素從文件流中脫離,但是它們不是相對於容器塊定位,而是相對於視口定位。

2、相對定位:(1)宣告:position:relative

(2)使用top,right,bottom,left中的乙個或者多個偏移屬性相對於它們在正常文件流中的初始位置進行定位。沒有設定偏移屬性的,預設被設定為auto。

(4)在文件流中所佔據的原始空間被保留。

(3)可能會覆蓋其他的元素。

將上述**中的
position: relative;

left:50px;

top:50px;

去掉的時候,執行結果為:

加上後的效果為:

絕對定位

:(1)宣告:position:absolute

(2)使用top,right,bottom,left中的乙個或者多個偏移屬性相對於其容器塊的邊緣進行定位。沒有設定偏移屬性的,預設被設定為auto。

(3)偏移值應用於元素盒的外邊緣(包含margin值)

(4)絕對定位的元素從文件流中完全脫離出來。該元素在正常文件流中所佔據的空間不保留,並且不影響其他元素。

box1

box2

box3

絕對定位box2前:

絕對定位box2後:

絕對定位div3和box2後:

固定定位box3和絕對定位div3後(觀察固定定位和絕對定位的區別)

CSS頁面布局基礎

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

css頁面布局基礎

1.盒模型 margin padding 行高line height 2.vertical align 垂直對齊方式 行高居中 3.如果div沒有設定高度,則會自動增加設定後,自動不變 4.絕對定位 使用position absolute 宣告 使用乙個或多個偏移屬性 top right 相對於其容...

CSS頁面布局基礎

css屬性 css屬性單位 字型屬性 長度pt px 顏色rgb url 絕對長度最好用於列印輸出裝置,而在作為螢幕顯示時,絕對長度無多大的意義 cm mm in 英吋 pt 點 pc picas 相對包括包括px,em,ex。相對長度僅僅是指元素尺寸行對於瀏覽器的系統預設值來相應的縮放 em 當前...