HTML和css在做網頁時遇到的問題總結

2021-10-12 10:33:26 字數 1063 閱讀 5002

一.關於透明度

當使用opacity設定乙個背景為透明時,因為其有繼承性,所有他的子類也會隨之透明,使用rgba設定透明,則不會引起子類隨著透明,即雖然rgba和opaciy都可以使背景設定為透明,但為了使其子類的文字或其他內容不受影響,使用rgba更合適.

二.關於定位問題

(1)相對定位

1.當開啟了相對定位以後 若不設定偏移量 則元素的位置不會發生變化

2.相對定位是相對於元素再文件流中原來的位置進行定位

3.相對定位的元素不會脫離 文件流

4.相對定位會使元素提公升乙個層級

5.相對定位不會改變元素的性質(內斂還是內斂 )

6.通常偏移量只需要使用兩個就可以對乙個元素進行定位

一般選擇水平方向的乙個偏移量和豎直方向的偏移量來定義乙個元素的位置

(2)絕對定位

1.開啟絕對定位會使元素脫離文件流

2.開啟絕對定位以後 如果不設定偏量 則不會發生變化

3.絕對定位會相對於離他最近的開啟了定位的祖先元素進行定位(一般情況,開啟了子元素的絕對定位)如果所有的祖先元素都沒有開啟定位 那麼相對於瀏覽器視窗進行定位

4.絕對定位會使元素提公升乙個層級

5.絕對定位會使元素的性質改變內斂元素變為塊元素

(3)固定定位

固定定位也是一種絕對定位,他的大部分特點與絕對定位一樣。

不同的是,固定定位永遠都會相對於瀏覽器的視窗進行定位,

固定會固定再瀏覽器視窗的某個位置,不會隨滾動條滾動。

並且在製作網頁時,往往外層使用相對定位,內層使用絕對定位

三,文字格式化

(1)文字的字型

font-family 可以指定文字的字型

當採用某種字型時,如果瀏覽器支援則使用該字型

如果不支援,則使用預設字型

該樣式可以採用多個字型時 瀏覽器會優先使用前邊的字型

如果前邊沒有則嘗試下乙個

瀏覽器使用的字型是預設的 就是計算機中的字型

如果計算機中有 則使用 如果沒有 就不使用

(2)行間距

在設定行高時 一定要注意 實際上的行間距:

行間距=行高-字型大小

H5 CSS寫網頁時遇到的一些坑 1

我們想要這樣的效果,嗯,看起來很不錯 結果把設定好了之後 float,大小什麼的 興高采烈的f5了一下,以為達到了預期效果,結果是這樣的 wtf,這和說好的不一樣啊,然後我就開始debug了一晚上,從div巢狀檢查到所有相關的css,結果還是找不出答案。最後無意之中用一串中文代替了 結果成這樣了 一...

CSS設計網頁時的一些常用規範

一 注釋書寫規範 1 行間注釋 直接寫於屬性值後面,如 search 2 整段注釋 分別在開始及結束地方加入注釋,如 搜尋條 search 搜尋條結束 二 樣式屬性 縮寫 1 不同類有相同屬性及屬性值的縮寫 對於兩個不同的類,但是其中有部分相同甚至是全部相同的屬性及屬性值時,應對其加以合併縮寫,特別...

CSS設計網頁時的一些常用規範

css命名規範 一 檔案命名規範 全域性樣式 global.css 框架布局 layout.css 字型樣式 font.css 鏈結樣式 link.css 列印樣式 print.css 二 常用類 id命名規範 常用類的命名應盡量以常見英文單詞為準,做到通俗易懂,並在適當的地方加以注釋。對於二級類 ...