CSS技巧及常見問題列表

2021-04-16 20:02:48 字數 2931 閱讀 7522

如: div

可以寫為

p再如:

div可以改寫為:

/*注意上、右、下、左的書寫順序*/

div

/*注意,數值與單位不能有空格,每個值之間用空格隔開*/

(詳細請參考:css2參考手冊、常用css縮寫總結)

2、可以同時為乙個html元素的class屬性設定多個規則(多重class定義)。

通常我們寫法為:

實際上我們可以為p元素指定多個規則,如:

css

.a

.b

html:

該元素同時包括a和b中設定的樣式

注意:多個規則之間用空格分開。

3、明確定義單位,除非值為0。

忘記定義尺寸是css初學者新手普遍存在的問題。在html我們可以寫width="100",但在css中應該給出乙個準確的單位。如:width:100px;height:50px;font-size:9pt ,0值除外,因為不論對於任何單位。0值的大小都是相等的。

注意:不要在數值和單位之間加空格。

4、區分大小寫

在xhtml中,css定義的元素名稱是區分大小寫的,class和id的值在html和xhtml中也是區分大小寫的,所以為了避免錯誤,推薦一律使用小寫。

如#aaa,與#aaa是不同的,在xhtml中,p和p也是不同的.他們之間不會覆蓋。

如果在css中定義了#aaa,在html元素中使用aaa來應用將不能得到#aaa中定義的樣式。

示例**:

css:

#aaa

html:

顯示不出來1個畫素的邊線

5、css的最近優先原則

如果對乙個元素定義了多次樣式,則以最近的一級優先,最近一級的樣式將覆蓋其他的樣式定義。

如: css: p

.blue

.yellow

html:

此處顯示為紅色

此處顯示為藍色

此處顯示為綠色

此處顯示為黃色

注意:

(1)注意樣式的幾個優先順序(優先順序由上至下遞減):

--元素style設定

--head區中的設定

--外部引用css檔案

(2)優先順序不是按訪問順序來設定的,而是又css中的宣告順序來設定的。

如上例中此處顯示為黃色

也顯示為黃色,因為在css定義中.yellow在.blue的後面。

6、使用子選擇器減少id和class的定義

例如:

#contain

#contain_ul

.contail_li

可以更改為:

#contain

#contain ul

.contain ul li

7、不要給背景路徑加引號

將background:url("***.gif")改為background:url(***.gif)

因為對於部分瀏覽器加引號反而會引起錯誤。

8、背景的路徑是相對與當前css頁面的路徑。

例如:

有如下目錄結構

|--images

|--***.gif

|--css

|--xx.css

|--index.html

**內容

index.html引用xx.css檔案。

xx.css要引用***.gif其寫法為:background:url(../images/***.gif)

9、使用組選擇器為不同元素應用相同的樣式

如h1,h2,h3,div

則h1,h2,h3,div元素的樣式都為字型16畫素,字型粗體

10、書寫正確的鏈結樣式

當用css定義鏈結的各種狀態時,一定要注意其書寫順序,即::link :visited :hover :active。 如果不按照該順序書寫可能無法達到自己希望的效果。為了記憶該順序我們抽取每個單詞的首字母:l v h a,你可以通過記憶love,hate,兩個單詞來記住其順序。

11、禁止內容換行與強制內容換行

在**或層中我們可能希望內容不換行或強制換行,我們可以通過一些css屬性來達到這些要求。

禁止換行:

white-space:nowrap

強制換行:

word-wrap: break-word; word-break: normal;

12、區別relative和absolute

absolute,css中的寫法是:position:absolute; 他的意思是絕對定位,他是參照瀏覽器的左上角,配合top、right、bottom、left(下面簡稱trbl)進行定位,在沒有設定trbl,預設依據父級的做標原始點為原始點。如果設定trbl並且父級沒有設定position屬性,那麼當前的absolute則以瀏覽器左上角為原始點進行定位,位置將由trbl決定。

relative,css中的寫法是:position:relative; 他的意思是絕對相對定位,他是參照父級的原始點為原始點,無父級則以body的原始點為原始點,配合trbl進行定位,當父級內有padding等css屬性時,當前級的原始點則參照父級內容區的原始點進行定位。

13、區別div和span

div是一 個塊級元素,可以包含段落,**等內容,用於放置不同的內容。一般我們在網頁通過div來布局定位網頁中的每個區塊。

span是乙個內聯元素,沒有實際意義,它的存在純粹是為了應用樣式,給一段內容加上標記可以通過在span上定義樣式來設定其內容的樣式。

14、區別display和visibility

display:none和visibility:hidden都可以隱藏乙個元素, 但visibility:hidden只是隱藏了元素的內容,但其使用的位置空間仍然被保留。 而display:none則相當把元素從頁面中去除,其占用位置也將被刪除。

css常見問題及技巧

1.父級元素如已經設定成了塊級元素 display block 子元素如 設定了float,這時父元素a依然無高度沒有被撐開 解決 在元素的樣式中新增overflow hidden 2.查詢功能 media screen and min width 1280px 這樣書寫瀏覽器可能不會解析成功,an...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中,justify content space between 這個屬性如果最後一行元素沒有填滿,會...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中,justify content space between 這個屬性如果最後一行元素沒有填滿,會...