CSS各種問題積累

2022-02-09 06:43:58 字數 2070 閱讀 4326

1.background與background-color

這兩者都可以這麼用:background:red; background-color:red; 其實background-color只是background的乙個子項而已。完整的background包括

background-color

background-image

background-repeat

background-attachment

background-position

完整的寫法是這樣的background: #00ff00 url(bgimage.gif) no-repeat fixed top;

2.

第一條中的background屬性值的第乙個在css3中可以是各種過渡效果的,比如線性過渡、徑向過渡。例如**:

background: -moz-radial-gradient(#ace 5%, #f96 25%, #1e90ff 50%);

詳細的請看:

3.

上面的background-image屬性還真是不好搞了,一定了解之後發現在過渡效果時-webkit-的寫法很麻煩,-webkit-的過渡效果有兩種實現,較傳統的是-webkit-gradient(),較新的是-webkit-linear-gradient().由於-webkit-gradient()是所有寫法中最複雜的,所以詳細講解,其它的應該就能輕鬆掌握了。

先看background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(.5,rgba(0,255,0,1)),to(rgba(255,255,255,1)));

1.linear指出是線性漸變,當然還可以寫radial,表示徑向漸變。

2.

0 0,0 100% 這兩組引數成對出現,表示開始的位置和結束的位置。0代表畫素值,100%是相對位置表示法,指的是直到結束的位置。

3.from()與後面的to()是一對,但都是可寫可不寫的貨,表示顏色值,關於它的引數可以直接填如#fff,或者transparent(透明)、rgba顏色值。

4.rgba色值的格式rgba(255,255,255,1),前三個引數不多說了,後面的1代表的是透明度,可以取0-1之間的數,但不能寫成0%-100%

5.

color-stop()意思是在指定的位置,放置乙個指定的色值。.5在中段位置,也可以寫成50%同樣是指中段位置。當你用一系列的color-stop去描述色值分布時便可不用from,to方法了。

color-stop(0,transparent)=from(transparent),color-stop(1,transparent)=to(transparent)。但是當不是從0開始的,且沒有from時前面的色值預設為第乙個color-stop指定的色值。

4.

background-size:20px 40px;其中第乙個引數指的是width,第二個是height

5.

word-spacing 與 letter-spacing

word-spacing指的是左右兩個單詞之間的距離;letter-spacing指的是左右兩個字母之間的距離。

6.

在css的position中常見的屬性有這幾個:absolute relative fixed static。 

static : 預設,沒有任何效果,top button等也不起作用

absolute:相對於它的非static父類的定位 (讓出之前的位置)

fixed:相對於瀏覽器視窗的定位(以前一直覺得這時absolute實現的效果,其實absolute也是一種相對的定位方式)。

relative:相對與其父類的定位 (之前的位置還會保留)

詳細的解釋見:

前端各種mate積累

1 doctype html h5標準宣告,使用 html5 doctype,不區分大小寫 2 head lang en 標準的 lang 屬性寫法 3 meta charset utf 8 宣告文件使用的字元編碼 優先使用 ie 最新版本和 chrome 5 meta name descripti...

css基礎積累

1 以統一的方式實現樣式的定義 2 提高頁面樣式的可重用性和可維護性 3 實現了內容 html 和表 css 的分離 html和css之間有什麼關係 html 構建網頁的結構 css 構建html元素的樣式 1.內聯樣式 將樣式宣告在元素的style屬性中 1 color 樣式宣告 表示乙個具體的顯...

CSS 知識積累

一 關於定位 1.相對定位下,不需要設定塊級元素的寬度,只需要設定高度,即可以使該塊級元素自適應,如果內有固定高度子元素,可以不設高度。而且可以進行top left定位。2.相對定位下,如果兩個兄弟塊級元素,其中一者設定了left,而另乙個只要設定的left數值和兄弟不同,left小的那個就不會佔滿...