學習HTML和css3遇到的問題

2021-08-15 10:30:07 字數 4016 閱讀 6156

1. 特殊符號需要用**表示;¥

¥;這個網頁是各種特殊符號的表示方法

2. 雪碧圖

需要使用一張大圖上的不同位置的小圖時,就要用到雪碧圖了,只需將定位在需要使用的位置,隱藏超出部分,就可以使所有小圖同時載入出來了

3. 表單

關於表單主要說一下textarea和

input

,textarea

是表單中的文字框標籤,使用時要記得調整最大寬高,否則使用者調整時可能會把頁面調亂;

input

是另乙個標籤,有很多屬性和取值,尤其是它的

type

中可以規定要顯示的

input

元素型別

這裡是input標籤的用法和屬性及取值

4. html5新標籤

h5新增了一些標籤,簡化了語法,使用起來更加方便快捷,以下是對這些新標籤的總結

5. id&class

總的來說,id和

class

的最主要區別在於

class

可以再頁面裡重複使用,而

id只能使用一次,所以可以重複引用

class

的css

以減少工作量和**量,不過

id的優先順序是高於

class的

6. 單位

這個部落格中總結了css的各種單位的使用方法及其優缺點

7. 顏色的表達方式

①用顏色的英文名稱

②rgb

③rgba

④十六進製制數

⑤hsl

⑥hsla

(其中十六進製制通常是六位數,有兩種情況可以簡寫成三位,第一種是#cccccc可以簡寫為

#ccc

,第二種是

#aabbcc

可以簡寫為

#abc)

8. 清除浮動的幾種方法

①在浮動元素的父元素中新增屬性overflow:hidden

,但這樣會將超出的部分隱藏起來

②在浮動和盒子下再放乙個標籤,在這個標籤中使用clear

:both

,但這種方式會增加頁面的標籤,使結構混亂

③使用偽元素,在after

中清除浮動

9. 關於margin

①乙個值:表示外邊距均為這乙個數

②兩個值:第乙個值表示上下邊距,第二個值表示左右邊距

③三個值:第乙個表示上邊距,第二個表示左右邊距,第三        個表示下邊距

④四個值:順序為上、右、下、左

10. transition變換過渡

這裡對transition的講解很全面很詳細^^

11. animation動畫

animation是不需要

hover

@keyframes

來使用,同樣也可以設定很多屬性,相較於

transition

有更自然的變換效果

這是對animation的詳細介紹

12. 內聯元素、塊級元素、內聯塊級元素

塊級元素:在html中、 、

、、和 就是塊級元素。設定

display:block

就是將元素顯示為塊級元素。塊級元素特點:①每個塊級元素都從新的一行開始,並且其後的元素也另起一行;②元素的高度、寬度、行高以及頂和底邊距都可設定;③元素寬度在不設定的情況下,是它本身父容器的

100%

(和父元素的寬度一致),除非設定乙個寬度。

內聯元素:在html中,、、

和就是典型的內聯元素(行內元素)(

inline

)元素。當然塊狀元素也可以通過**

display:inline

將元素設定為內聯元素。內聯元素特點:①和其他元素都在一行上;②元素的高度、寬度及頂部和底部邊距不可設定;③元素的寬度就是它包含的文字或的寬度,不可改變。

內聯塊狀元素(inline-block)就是同時具備內聯元素、塊狀元素的特點,**

display:inline-block

就是將元素設定為內聯塊狀元素,

、標籤就是這種內聯塊狀標籤。

inline-block

元素特點:①和其他元素都在一行上;②元素的高度、寬度、行高以及頂和底邊距都可設定。

13. position定位

static:預設的,一般不用

fixed:相對於電腦螢幕定位,例如返回頂部

relative:相對於自己原本的位置進行的定位

absolute:向外層找

relative

,相對於有

relative

的父級定位;如果找不到,相對於

body定位

14. 選擇器

常用的:類選擇器

萬用字元選擇器 id選擇器 後代選擇器 子元素選擇器 相鄰兄弟選擇器 多類選擇器

不常見的:簡單屬性選擇器

子串匹配屬性選擇器

特定屬性選擇器

15. div的重疊

多用於兩張的疊加,用乙個小例子來說明

"position: relative;"

>

//這個層為外面的父層,只需設定相對位置樣式即可

"position: absolute;"

>

//這個為裡面要疊加的層,只需設定絕對樣式

/>

//這個為層裡面的內容

/>

//這個為父層內容

1. 滑鼠離開時的過渡動畫:transition的過渡效果要加在需變換的

div中,這樣才能淡入淡出,如果加在了

hover

中,只會實現滑鼠放上時的過渡,滑鼠移開後就會突變,效果生硬

2.                                 需要類似這種的布局時,

可以將這三塊內容放在

乙個div裡,定好寬度,

這樣就可以實現下方的

居中對齊了。注意不要用

空格排版!

3. 改名大業!

命名時要注意:①做到見名知意,不要隨便起123

這樣的,否則後期修改時很難找到對應位置;②命名不能用空格,可以用下劃線或連字元;③

html

的名字最好和

css名字一樣,這樣便於找到和修改樣式

4. 布局型別

網頁的布局有多種型別,這裡總結了各種布局的技巧和優劣

5. 絕對路徑&相對路徑

絕對路徑:檔案在硬碟上真正存在的路徑

相對路徑:相對於自己的目標檔案位置

./   根目錄

../  上一級目錄

/   當前根目錄

6. 盡量不要用布局

7. 養成加注釋的習慣,注上每一塊大致在哪

8. 選擇器的優先順序

!important>行內樣式(

style

屬性)>id

選擇類選擇器

>標通配

繼瀏覽器預設

9. 脫離文件流

就是將元素從普通的布局排版中拿走,其他盒子在定位的時候,就會當做脫離文件流的元素不存在而定位

使用float脫離文件流時,其他盒子會無視這個元素,但其他盒子內的文字仍然會為這個元素讓出位置,環繞在周圍

而對於使用absolute positioning脫離文件流的元素,其他盒子與其他盒子內的文字都會無視它

10. 多類選擇器

如果有多處用到了同乙個屬性,就可以使用多類選擇器,這樣能夠大大減少**量(下次我一定要記得用)

11. input去掉藍色框

input框會自動生成藍色的邊,可能會與主題顏色衝撞,去掉這個邊有以下三種方法:①

input

中style=

「outline

:none

」 ②控制

css樣式,

input  

③input

:focus

12. margin和

padding

都各自合併在一排來寫,不要分開

13. 跳轉到當前頁面時,鏈結可以直接用「#

」代替

14. 和

結合使用

HTML編碼和CSS編碼會遇到的問

參考鏈結 html 屬性應當按照以下給出的順序依次排列,確保 的易讀性。class 用於標識高度可復用元件,因此應該排在首位。id 用於標識具體元件,應當謹慎使用 例如,頁面內的書籤 因此排在第二位。positioning box model typographic visual 由於定位 posi...

css3和html5的基礎

流式布局 應對視窗大小做等比例縮放布局 簡單來說利用百分數來進行布局 css3的box sizing與calc 通常設定邊框會被設定在元素的外圍 box sizing屬性值設為border box時邊框就加在元素內部 css3中在進行響應式布局時需要對不不同的螢幕大小設定不同的div排序方式。這時候...

CSS 3學習 box sizing和背景

在css 2中設定元素的width和height僅僅是設定了元素內容區的寬和高,元素實際的尺寸是 margin border padding 內容區。css 3 截止到2016年12月6日該屬性還是草案 中新加了box sizing屬性,用來重新規定設定元素的width和height時,到底包含哪些...