CSS布局模型

2021-09-24 20:18:21 字數 1140 閱讀 4005

一.常見的三種布局模型

流動模型(flow):元素沒有轉換型別,沒有設定float的預設顯示狀態

浮動模型(float):通過給元素設定float進行頁面布局

層模型:語法:position:static|

absolute | relative |fixed

二.定位

1絕對定位:position:absolute;

參照物:必須滿足以下2個條件:

a. 參照物和絕對定位元素必須是包含與被包含關係

b. 參照物必須具有定位屬性;

如果找不到滿足以上條件的參照物,那麼相對於瀏覽器視窗進行定位

注:定位的位置是由left,right,top,bottom四個屬性值決定

2.相對定位

語法:position:relative

參照物:元素偏移前的位置
相對定位和絕對定位的區別:、

1.    參照物不同

相對定位參照的是元素偏移前的位置,絕對定位參照離他最近且具有定位屬性的父包含塊

2. 是否會脫離文件流

相對定位不會脫離文件流,絕對定位會脫離文件流,原來的位置被其它元素佔據。

3.固定定位

語法:position:fixed;

參照物:瀏覽器視窗或螢幕視窗
注:當絕對定位和固定定位的參照物都為瀏覽器視窗時,固定定位的元素不會跟隨滾動條滾動,固定在乙個位置上

注:設定了固定定位會脫離文件流,元素原來的位置被其他元素佔據

三、透明度的設定

語法:opacity:數值; (取值範圍0-1,0為完全透明,1為完全不透明)

注:ie8及以下瀏覽器不支援opacity屬性,相容寫法如下:

filter:alpha(opacity=數值); (取值範圍0-100)

四.圖層

語法:z-index: auto |整數值

注: 允許設定負值

只有具有定位屬性的元素設定z-index才能有效

沒有設定z-index時,最後寫的物件優先顯示在上層,設定後,數值越大,層越靠上

CSS 布局模型

一.流動模型 flow 1.首先它是網頁預設的布局方式,有兩個基本的特徵 i.塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布,因為在預設狀態下,塊狀元素的寬度都為100 實際上,塊狀元素都會以行的形式佔據位置。如右側 編輯器中三個塊狀元素標籤 div,h1,p 寬度顯示為100 ii.在流...

CSS布局模型

css包含3種基本的布局模型,用英文概括為 flow layer 和 float。在網頁中,元素有三種布局模型 1 流動模型 flow 2 浮動模型 float 3 層模型 layer 1.流動模型 流動 flow 是預設的網頁布局模式。也就是說網頁在預設狀態下的 html 網頁元素都是根據流動模型...

css布局模型

清楚了css 盒模型的基本概念 盒模型型別,我們就可以深入 網頁布局的基本模型了。布局模型與盒模型一樣都是 css 最基本 最核心的概念。但布局模型是建立在盒模型基礎之上,又不同於我們常說的 css 布局樣式或 css 布局模板。如果說布局模型是本,那麼 css 布局模板就是末了,是外在的表現形式。...