CSS布局有哪幾種型別,CSS樣式的選擇器的四種型別中,哪種型別主要用於網頁的布局?

2022-12-14 05:16:21 字數 4829 閱讀 2147

1樓:匿名使用者

五種基本布局定位型別:* 彈性布局 - 總體寬度及其中所有欄的值都以 em 單位編寫。這應使布局能夠使用瀏覽器的指定基本字型大小縮放。

對於視力不好的使用者, 這可能更有吸引力、更易於訪問, 因為欄寬度將變得更寬, 能以任何大小顯示更舒適、更可讀的行長度。 由於總體寬度將縮放, 您的設計必須允許可這寬度。* 固定布局 - 總體寬度及其中所有欄的值都以畫素單位編寫。

布局位於使用者瀏覽器的中心。* 流體布局 - 總體寬度及其中所有欄的值都以百分比編寫。 百分比通過使用者瀏覽器視窗的大小計算。

* 混合布局 - 混合布局組合兩種其他型別的布局 - 彈性和流體。 頁面的總寬度為 100%, 但側欄值設定為 em 單位。* 絕對定位布局 - 所有前述布局的外欄使用浮動內容。

而絕對定位布局完全如其名所示 - 有絕對定位的外欄。 必須記住, 當使用這些布局時, 側欄會「提出文件流程」, 因而可能有一些不合適的結果 (例如, 頁尾可能「看不見」在側欄在何處結束並在主要內容區域包含的內容少於側欄的頁面與頁尾重疊)。

2樓:育知同創教育

css布局方式有哪些:

五種基本布局定位型別:

* 彈性布局 - 總體寬度及其中所有欄的值都以 em 單位編寫。這應使布局能夠使用瀏覽器的指定基本字型大小縮放。 對於視力不好的使用者, 這可能更有吸引力、更易於訪問, 因為欄寬度將變得更寬, 能以任何大小顯示更舒適、更可讀的行長度。

由於總體寬度將縮放, 您的設計必須允許可這寬度。

* 固定布局 - 總體寬度及其中所有欄的值都以畫素單位編寫。 布局位於使用者瀏覽器的中心。

* 流體布局 - 總體寬度及其中所有欄的值都以百分比編寫。 百分比通過使用者瀏覽器視窗的大小計算。

* 混合布局 - 混合布局組合兩種其他型別的布局 - 彈性和流體。 頁面的總寬度為 100%, 但側欄值設定為 em 單位。

* 絕對定位布局 - 所有前述布局的外欄使用浮動內容。 而絕對定位布局完全如其名所示 - 有絕對定位的外欄。 必須記住, 當使用這些布局時, 側欄會「提出文件流程」, 因而可能有一些不合適的結果 (例如, 頁尾可能「看不見」在側欄在何處結束並在主要內容區域包含的內容少於側欄的頁面與頁尾重疊)。

3樓:匿名使用者

大致就是塊級與塊級,行級與行級,塊級與行級,主要就是div+css 或者table+css

css樣式的選擇器的四種型別中,哪種型別主要用於網頁的布局?

4樓:

這個問題不全,沒法回答,請將問題不全,謝謝!

html裡面有幾種布局方式?

5樓:教育小百科是我

1.自然布局。

沒有任何修飾的布局是自動靠左的。

2.流動布局

上面講的float:left的情況。

3.定位布局

相對定位和絕對定位都是相對于父div標籤的。

相對------以這個元素的本來應該在的位置為參照點絕對——以父div標籤的原點(左上角)為參照點。

由於外層是position:relative,所以裡層是absolute的話,則會以外層的左上角為位移參考對齊。當然外層只寫position:

relative,寫上left,top這兩個值,則表示以:以這個元素的本來應該在的位置為布局參照原點進行left,top對齊。

還有一種情況是,只是乙個position:absolute;外層沒有position:relative,這時會找尋那個點為參考呢?

這時候的原則是:如果某父級元素中有relative者,則以某父級元素為參考原點,如果沒有position:relative,則以body為參考原點。

如果position:absolute外層沒有relative時,這兩個布局上是沒有區別的。

當然最後一種情況是:外層是:position:

absolute;裡邊是position:relative,那會是什麼情況?按著原來的原則,absolute會參考body為布局原點,relative會參考他本來應該在的位置為布局原點,這時候其實就是參考外層左上角為布局原點。

6樓:

雙飛翼、多欄、彈性、流式、瀑布流、響應式布局

(1)、雙飛翼布局

經典三列布局,也叫做聖杯布局【holy grail of layouts】是kevin cornell在2023年提出的乙個布局模型概念,在國內最早是由**ued的工程師傳播開來,在中國也有叫法是雙飛翼布局,它的布局要求有幾點:

a、三列布局,中間寬度自適應,兩邊定寬;

b、中間欄要在瀏覽器中優先展示渲染;

c、允許任意列的高度最高;

d、要求只用乙個額外的div標籤;

e、要求用最簡單的css、最少的hack語句;

在不增加額外標籤的情況下,聖杯布局已經非常完美,聖杯布局使用了相對定位,以後布局是有侷限性的,而且寬度控制要改的地方也多。在**ued(user experience design)**下,增加多乙個div就可以不用相對布局了,只用到了浮動和負邊距,這就是我們所說的雙飛翼布局。

(2)、多欄布局

a、欄柵格系統:就是利用浮動實現的多欄布局,在bootstrap中用的非常多。

b、多列布局:柵格系統並沒有真正實現分欄效果(如word中的分欄),css3為了滿足這個要求增加了多列布局模組

(3)、彈性布局(flexbox)

css3引入了一種新的布局模式——flexbox布局,即伸縮布局盒模型(flexible box),用來提供乙個更加有效的方式制定、調整和分布乙個容器裡專案布局,即使它們的大小是未知或者動態的,這裡簡稱為flex。

flexbox布局常用於設計比較複雜的頁面,可以輕鬆的實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變,同時減少了依賴於浮動布局實現元素位置的定義以及重置元素的大小。

flexbox布局在定義伸縮專案大小時伸縮容器會預留一些可用空間,讓你可以調節伸縮專案的相對大小和位置。例如,你可以確保伸縮容器中的多餘空間平均分配多個伸縮專案,當然,如果你的伸縮容器沒有足夠大的空間放置伸縮專案時,瀏覽器會根據一定的比例減少伸縮專案的大小,使其不溢位伸縮容器。

(4)、瀑布流布局

瀑布流布局是流式布局的一種。是當下比較流行的一種**頁面布局,視覺表現為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷載入資料塊並附加至當前尾部。最早採用此布局的**是pinterest,逐漸在國內流行開來。

(5)、流式布局(fluid) 固定布局和流式布局在網頁設計中最常用的兩種布局方式。固定布局能呈現網頁的原始設計效果,流式布局則不受視窗寬度影響,流式布局使用百分比寬度來限定布局元素,這樣可以根據客戶端解析度的大小來進行合理的顯示。

(6)、響應式布局

響應式布局是ethan marcotte在2023年5月份提出的乙個概念,簡而言之,就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。 響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗,而且隨著目前大螢幕移動裝置的普及,用「大勢所趨」來形容也不為過。

隨著越來越多的設計師採用這個技術,我們不僅看到很多的創新,還看到了一些成形的模式。

7樓:海南特產大全

流動(流體)布局

也被成為流體布局,主體部分都是用了百分比寬度,因此可以自適應使用者的解析度。如下圖所示

固定布局

固定布局,顧名思義就是使用固定的width與height來布局**,如下圖所示。

浮動布局

定位布局

希望幫助到你,還有疑問可向我追問,盡我所能為你解答!

8樓:匿名使用者

有table ,div 一般是div+css的

9樓:匿名使用者

table 布局

div+css布局

css有哪些布局模型

10樓:匿名使用者

default,就是塊級元素都自上而下的分布,寬度都為100%。內聯元素都從左到右水平分布。div、p、table、img 等元素都可以設定為浮動。

兩個 div 顯示在一行的**如下:

div層模型有三種形式:

(1)絕對定位(position: absolute)div(2)相對定位(position: relative)(3)固定定位(position:

fixed)層模型中,各元素可能出現堆疊。堆疊順序可以用z-index控制,z-index大者在上。z-index相同時,根據css宣告順序,靠後者在上。

css布局方式有哪些,具體是什麼意思

11樓:育知同創教育

css布局copy方式有哪些:

五種基本布局定位型別:

* 彈性布局 - 總體寬度及其中所有欄的值都以 em 單位編寫。這應使布局能夠使用瀏覽器的指定基本字型大小縮放。 對於視力不好的使用者, 這可能更有吸引力、更易於訪問, 因為欄寬度將變得更寬, 能以任何大小顯示更舒適、更可讀的行長度。

由於總體寬度將縮放, 您的設計必須允許可這寬度。

* 固定布局 - 總體寬度及其中所有欄的值都以畫素單位編寫。 布局位於使用者瀏覽器的中心。

* 流體布局 - 總體寬度及其中所有欄的值都以百分比編寫。 百分比通過使用者瀏覽器視窗的大小計算。

* 混合布局 - 混合布局組合兩種其他型別的布局 - 彈性和流體。 頁面的總寬度為 100%, 但側欄值設定為 em 單位。

* 絕對定位布局 - 所有前述布局的外欄使用浮動內容。 而絕對定位布局完全如其名所示 - 有絕對定位的外欄。 必須記住, 當使用這些布局時, 側欄會「提出文件流程」, 因而可能有一些不合適的結果 (例如, 頁尾可能「看不見」在側欄在何處結束並在主要內容區域包含的內容少於側欄的頁面與頁尾重疊)。

專利的種類有哪幾種專利有哪幾種型別?

專利申請的型別包括哪幾種 1 專利有三種型別 發明專利 實用新型 外觀設計。2 專利,從字面上是指專有的權利和利益。專利一般是由 機關或者代表若干國家的區域性組織根據申請而頒發的一種檔案,這種檔案記載了發明創造的內容,並且在一定時期內產生這樣一種法律狀態,即獲得專利的發明創造在一般情況下他人只有經專...

火車有哪幾種型別,火車有幾種型別?

t和n開頭的是特快,z開頭的是直達特快。d是動車組,速度第二快。g是高鐵,速度最快。原理火車的轉向架卡在軌道上沿著軌道行駛,轉彎時轉向架轉動,讓火車沿著軌道繼續行駛。轉彎時外軌高於內軌。最初的列車是由繩索或馬匹拉動的。到了十九世紀,多數的列車都改由蒸汽機車牽引。1940年代以後蒸汽機車漸由較清潔及需...

鼻炎有哪幾種,鼻炎有哪幾種型別

您好 鼻炎分急性鼻炎,過敏性鼻炎,乾燥性鼻炎,慢性鼻炎,不管是哪種鼻炎,都會給人們生活和工作造成很大的影響。鼻炎主要分為以下幾種,過敏性鼻炎,肥厚性鼻炎及萎縮性鼻炎。過敏性鼻炎和肥厚性鼻炎,如果長期發作會引起鼻塞症狀加重,下鼻甲肥大,嚴重影響呼吸,可以考慮手術 主要是五大類,急性和慢性鼻炎,急慢性鼻...