前端學習筆記 七

2021-08-18 10:20:52 字數 1750 閱讀 1690

什麼叫優先順序!

同優先順序 後面覆蓋上面

高優先順序始終覆蓋低優先順序

/*基本選擇器的優先順序*/

id > class > tagname > *

總結:控制範圍越小優先順序越高 也就是越精準優先順序越高!

id選擇器個數不相等,id個數多的優先順序高,後面不用比

id選擇器個數相等,則看class個數

class 個數相等 ,再看tagname 個數

#wrap ul li .list{} 和.wrap ul li #list{}優先順序一樣

選擇器基本的原則,精準控制元素 先看精確度

選擇器使用原則:

精準的控制元素最終選擇到要控制的元素本身,這樣就能實現精準控制元素!

比樣式優先順序我們首先要保證選擇器優先順序是一樣的情況下才有意義

內部樣式有兩種,寫在裡面的是叫做內嵌樣式。

直接寫在標籤前面的 用style=''屬性引用的樣式,叫做行內樣式

外部樣式(顧名思義將樣式寫在外部)

@charset 'utf-8';

/*外部樣式也需要規定編碼格式*/

外部的樣式用link標籤引入

需要注意的是引入檔案的時候要寫../ 注意路徑問題

外部樣式匯入式的方式:

匯入式會在整個網頁裝載完後再裝載css檔案,因此這就導致了乙個問題,如果網頁比較大則會兒出現先顯示無樣式的頁面,閃爍一下之後,再出現網頁的樣式。這是匯入式固有的乙個缺陷。

@import"路徑"; 不用

在不考慮選擇器優先順序的情況下樣式的優先順序是:

行內樣式 > 內部樣式 = 外部樣式

如果我們的固有的結構不能變化,又想提公升樣式的優先順序!

color:red !important; 不推薦

四個值: 左上 右上 右下 左下

三個值: 左上 右上左下 右下

兩個值: 左上右下 右上左下

乙個值: 所有角一樣的值

單獨定義某乙個角的圓角:

bordertopleftradius:

bordertoprightradius:

borderbottomrightradius:

borderbottomleftradius:

寫乙個圓

border-radius:50%;

hshadow    水平偏移量。允許負值 ( 必需)

vshadow    垂直偏移量。允許負值 (必需)

blur 模糊半徑 (可選。)

spread 陰影的大小 (可選。)

color 陰影的顏色 (可選。)

outset 外部陰影 (預設) 內部陰影(inset可選 )

3.overflow:;規定元素溢位後如何顯示

visible 預設值

hidden 隱藏,並且其餘內容是不可見的。

scroll 出現滾動條

auto 根據內容情況來決定是否出現滾動條

水平溢位隱藏 overflowx:

垂直溢位隱藏 overflowy:

為元素建立空間,無論它們是否是可見或不可見

和display的區別是:

為display none時,元素會從頁面結構中刪除,完全不佔內容。

而visibility為hidden的時,即使使用者看不見元素,他任然佔據位置

div

web前端學習 工作筆記 七

webstrom gitlab操作 112.select元件雙向繫結核心 selectchange e 113.引數擷取第乙個,類似bind的實現 array.prototype.shift.call arguments,0 114.webpack打包分析 analyz cross env node...

前端開發學習筆記第七天

1 定位流中,設定為相對定位的元素並未脫離標準流,對於該元素仍可以設定margin屬性並可以起效果,只是起的效果相對於起原始位置 即不是他通過 top right bottom left 偏離之後的位置。2 定位流中,設定為絕對定位的元素則脫離了標準流。預設情況下,設定為絕對定位i的元素的參考點是b...

前端學習筆記

前端 做網頁 靜態網頁 動態的web應用 前後端分離的單頁應用 資料 json ajax html css js jquery ajax 開發工具notepad hbuilder vscode webstorm 瀏覽器 谷歌 firefox edge 什麼是html hypertext makeup...