前端學習之路css 04 基礎知識

2021-07-29 08:30:17 字數 1616 閱讀 5676

分組選擇器

在樣式中,我們可能有很多元素擁有同樣的樣式,我們可以使用分組選擇器將它們一次性定義出來。每個選擇器用逗號分隔。

巢狀選擇器

它適用於選擇器內部的選擇器樣式。

css中允許我們控制元素的寬高,屬性大致包括以下;

此屬性就是控制元素是否顯示的。隱藏元素有兩種表示方式;

visibility:hidden,元素隱藏了但是仍然占用空間;

display:none,元素隱藏了且不占用空間;

display屬性還有兩個值;

display:inline,將元素顯示為內聯元素,即不換行;

display:block,將元素顯示為塊元素,換行;

定位就是以什麼為參照物的問題,比如相對布局以某個已知的元素為參照物,或者絕對布局等等,參照物的不同決定了元素位置的不同。它有四種定位方式:static、relative、fixed、absolute。如position:static;

static

html的預設值,即沒有定位,元素出現在正常的流中,靜態定位不會收到top、left、bottom、right等的影響;

relative

元素相對於瀏覽器視窗位置的定位,即使視窗是滾動的它也不可移動。

fixed

是相對其正常位置的定位。

absolute

絕對定位的元素的位置相對於最近的已定位父元素,如果元素沒有已定位的父元素,那麼它的位置相對於:

overflow

屬性規定當內容溢位元素框時發生的事情。

overflow:scroll; 表明多出的空間可滑動檢視;

overflow:hidden; 表明隱藏多出的控制項部分;

例項參考

具體參見

文字對齊請參照

另外我們可以通過margin、position、float設定塊對齊

前端基礎筆記 CSS 04 浮動

清除浮動 1.普通流 標準流 2.浮動 讓盒子從普通流中浮起來,主要作用是讓多個塊級盒子在一行內顯示。3.定位 將某個盒子定位在瀏覽器的某一固定位置。float的語法 選擇器 例1 兩個普通流塊級元素各佔一行從上到下順序排列 當給乙個元素設定浮動之後,它就會 飄起來 例2 將三個塊級元素設定disp...

前端學習之CSS(04)布局

盒子模型 頁面元素的大小 邊框與其他元素的距離 定位機制 文件流浮動定位 層定位 盒子模型組成 charset utf 8 type text css box style head box 內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容 div body html overflow屬...

前端 CSS基礎知識

css文件 目錄css基礎選擇器 id選擇器 萬用字元選擇器 css設定字型 css文字屬性 css引入方式 css復合選擇器 css元素顯示模式 css的背景 背景影象固定 復合寫法 css3背景顏色半透明效果 css三大特性 優先順序層疊樣式表 cascading style sheets,縮寫...