css3學習筆記

2021-07-29 22:48:04 字數 3152 閱讀 1523

1.為什麼分許多模組進行管理?

為了避免產生瀏覽器對於某個模組支援不完全的情況。

2.使用元素的class屬性的缺點:

第一,class屬性本身沒有語義,褚翠是用來為css樣式服務的,屬於多餘屬性。

第二,使用屬性的話,並沒有把樣式與元素繫結起來,針對同乙個class屬性文字框,下拉框,按鈕都可使用。這樣很混亂,修改樣式也不很方便。

3.h2:nth-child(odd) 意思是當div元素中的第奇數個子元素如果是h2子元素的時候使用。

4.使用before after選擇器來插入文字內容,   內容用content  none是不插入。

在css3中normal與none作用一樣。但是normal不只可以用在before和after中。

使用before after選擇器還可用來插入:content:url(img.jpg);

或者採用追加背景影象的方法追加。

background-image:url(new.gif);

background-repeat:no-repeat;

padding-left:28px;

5.使用content屬性插入專案編號

6.指定文字陰影:text-shadow:橫方向位移距離 縱方向位移距離 模糊範圍 顏色;

7、讓文字自動換行word-break

9、font-size-adjust修改字型,文字大小不變

aspect值

10、盒的基本型別,block和inline

inline-block型別,屬於block模型,但是有inline特性。此型別元素可以在一行中顯示。

預設情況下,此型別元素並列顯示的垂直對其方式是底部對齊。

頂部對齊要加入vertical-align屬性

inline-table型別 使得table標籤可以有inline特性。ie、ff、opera瀏覽器預設為頂部對齊。

safari、chrome預設底部對齊。

vertical-align屬性:bottom  強制對齊。

list-item型別,像列表一樣顯示list-style-type屬性,表示列表的標記

11、盒中容納不下的內容的顯示

5大瀏覽器都支援

overflow:hidden 超出容納範圍的文字被隱藏起來。

overflow:scroll div元素出現固定的垂直滾動條和水平滾動條。

overflow:auto會根據需要出現垂直滾動條或水平滾動條

overflow:visible和沒使用overflow一樣的效果

overflow-x,overflow-y chrome不支援

text-overflow;ellipsis 盒的末尾顯示乙個省略的符號「...」,ff和chrome不支援

在當盒的內容在水平方向上超出盒的容納範圍時有效。

12、box-sizing:content-box或者border-box

13、background-clip用來修改背景的顯示範圍

border,意思是將內容和padding都在此範圍。

padding:只是內容。

background-origin屬性:指定繪製時從邊框的左上角開始還是從內容的左上角開始。

(border,padding,content)

background-size屬性:設定背景的寬和高

14、transform功能實現文字或影象的旋轉、縮放、傾斜、移動。

transform:rotate(角度值deg)旋轉

transform:scale(0.5)縮放  數值(水平方向的,垂直方向的)

transform:skew(水平方向,垂直方向(角度值))傾斜

transform:translate(水平方向,垂直方向)

transform-origin:改變變形的基準點

15、transition:property duration timing-function

property表示對哪個屬性進行平滑過渡,duration表示多長時間內完成屬性值的平滑過渡,timing-function表示通過什麼方法來進行平滑過渡。

animation動畫

@-webkit-keyframes 關鍵幀集合名

40%{}

70%{}

100%{}

}關鍵幀集合建立好後,在元素的樣式中使用該關鍵幀的集合。

-webkit-animation-name:關鍵幀名字

-webkit-animation-duration:動畫時間

-webkit-animation-timing-function:平滑過渡

16、多欄布局

column-count:幾欄

column-width:每欄的寬度

column-gap:每欄之間的間隔距離

彈性盒布局

最外層的div容器

display:-moz-box;

display:-webkit-box;

box-flex:1   彈性布局 使布局自適應瀏覽器

box-ordinal-group:改變各元素的顯示順序  數字從小到大以此顯示

box-orient:改變元素的排列方式。vertical垂直方向 horizontal水平幹方向

17、文字水平居中:text-align

文字垂直居中很難做到。可以用css3中的box-align或box-pack屬性。

18、瀏覽器大小不同時,頁面布局也不同。用media queries模組實現。

@media screen and(max-width:600px)

19、一切指定顏色值得屬性中指定transparent值,相當於使用了0的alpha通道。

20、outline屬性 在元素周圍繪製輪廓線

outline-offset:偏離邊框的數值

21、resize允許使用者通過拖動的方式來修改元素的尺寸。

none:使用者不能修改元素尺寸。

both 使用者可以修改元素的寬度和高度。

horizontal 使用者只可以修改元素的寬度

vertical 使用者只可以修改元素的高度

inherit 繼承父元素的resize屬性值

initial屬效能取消你之前設定的樣式,但是取消不了瀏覽器特定的樣式,如h1.

22、h5結構元素,header元素、aside元素、section元素及footer元素

CSS3學習筆記

一.選擇符 二.屬性 溢位隱藏 div4 p文字陰影 text shadow 2px 1px rgba 255,255,255,1 圓角效果 border radius邊框陰影 box shadow 2px 2px 5px 5px inset 內陰影透明度 div for ie8 and earli...

css3學習筆記

1,transition是過度效果,一般是和hover一起用,transition的屬性有height,width常用屬性,在hover裡面就是會覆蓋原來的屬性,屬性由逗號間隔,各個屬性之間沒有先後關係,webkit transition width 2s ease in,height 2s,web...

CSS3學習筆記

1 css是什麼?cascading style sheet 層疊樣式表,目的是對html中元素的字型 顏色 邊距 高度 寬度 背景 網頁定位等設定,以達到美化網頁的目的 2 css3是是前一直仍然在完善的css最新標準和規範。新加入了很多css樣式屬性,但是因為規範讓然未最終形成。所以瀏覽器支援力...