前端學習之路13 CSS布局

2021-10-14 14:16:37 字數 1485 閱讀 1442

table布局

css中的乙個基本概念是盒模型(box model)。可見元素會在頁面中佔據乙個矩形區域,該區域就是元素的盒子(box),由四部分組成

將display屬性設定為block值會建立乙個塊級元素。塊級元素會在垂直方向跟周圍元素有所區別。通常在元素前後放置換行符也能達到這種效果,在元素和周圍元素之間製造分割的感覺

將display屬性設定為inline-block值會建立乙個其盒子混合了塊和行內特徵的元素。盒子整體上作為行內元素顯示,這意味著垂直方向上該元素和周圍的內容併排顯示,沒有區別。但盒子內部作為塊元素顯示,這樣,width、height和margin屬性都能應用到盒子上。

left, right, none

如果設定了多個浮動元素,預設情況下,它們會乙個挨著乙個地堆疊在一起。使用clear屬性可以阻止出現這種情況。clear屬性可以指定浮動元素的乙個邊界或者兩個邊界不能挨著另乙個浮動元素。

談及浮動,經常會有個問題是清除浮動

清除浮動是指是為了解決,父元素因為子級元素浮動引起的內部高度為0的問題

清除浮動的方法

position屬性的不同值指定了元素定位所針對的不同元素。使用top、bottom、left和right屬性設定元素的偏移量的時候,指的是相對於position屬性指定的元素的偏移量。值描述

absolute

生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。

fixed

生成絕對定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。

relative

生成相對定位的元素,相對於其正常位置進行定位。因此,「left:20」 會向元素的 left 位置新增 20 畫素。

static

預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)。

inherit

規定應該從父元素繼承 position 屬性的值。

z-index屬性指定元素顯示的層疊順序,z-index屬性的值是數值,且允許取負值。值越小,在層疊順序中就越靠後。

Python全棧開發之13 CSS

css 是 cascading style sheets的縮寫,用來設計網頁的樣式布局,以及大小來適應不同的螢幕等,使網頁的樣式和網頁資料分離,匯入css有4種方式 1.行內式 行內式是在標記的style屬性中設定css樣式。這種方式沒有體現出css的優勢,不推薦使用。2.嵌入式 嵌入式是將css樣...

前端學習之路 css選擇器和布局

css 選擇器就是控制html中的標籤的屬性類似android 中控制項的屬性 css 選擇器大致分為以下幾種 1.標籤選擇器例如 p 前就是選擇器 2.id選擇器 例如祝大家雞年大吉 gsc 3.class 選擇器 eg 祝大家雞年大吉 gsc 學習了類選擇器和id選擇器,我們會發現他們之間有很多...

前端學習之路11 CSS

css層疊和繼承 顏色長度 css樣式由一條或多條以分號隔開的樣式宣告組成。每條宣告包含著乙個css屬性和該屬性的值,二者以冒號分隔。以 css為副檔名 可以用 import語句將樣式從乙個樣式表匯入另乙個樣式表 import語句必須位於樣式表頂端,樣式表自已的樣式定義不能出現在它之前。import...