我的css積累

2021-08-19 17:39:53 字數 3308 閱讀 1767

1.background-origin和background-clip

background-origin(背景可繪製區域,預設padding-box):border-box,padding-box,content-box。

background-clip(背景可顯示區域,預設border-box):border-box(邊框比背景層級高,但實色背景會透過變透明邊框),padding-box,content-box。

菜鳥教程實驗:background-origin對純色背景好像不起作用,background-clip能限制純色背景的顯示區域。

2.background-repeat和border-image-repeat

background-repeat屬性只有重複

border-image-repeat有平鋪,重複,拉伸三個屬性,(預設值拉伸),平鋪和重複的區別是平鋪可能會將變形,重複是複製。

3.border-image-slice:設定邊框背景是一張圖的時候怎麼剪下邊框,原理是剪下九宮格,各邊剪下的比例,上右下左,順序和margin一樣;值為數值時,預設單位為px,所以不用加px,加px樣式會出錯。

4.border-image-width:預設值為1,注意:指相應於border-width 的倍數

菜鳥教程實驗:只要border存在,那麼四個頂角(九宮格的四個頂角)永遠都是顯示的。這個寬度屬性,是先讓九宮格四頂角滿足條件,比如這個寬度屬性,先讓四個頂角有那麼寬,然後是上下邊,然後是左右邊;border-image-width控制邊框的大小,值可以無限大,但是顯示大小受內容本身寬度的限制,這個屬性可以模仿背景的效果。

5.border-image-outset:類似於outline,在邊框外部繪製邊框,值也是border-width的倍數,表示距離邊框多遠繪製。

6.菜鳥教程實驗:transform的skewx表示在水平方向傾斜,預設正值繞y軸逆時針旋轉,水平方向的邊長度不變;

transform的skewy表示在垂直方向傾斜,預設正值繞x軸順時針旋轉,垂直方向的邊長度不變。

都是繞影象的正中心作x軸,y軸旋轉。以90度為乙個反時針迴圈,就是說30度和120度(30+90)是相反的效果,30度和210度(30+180)是一樣的效果。skew有兩個值時,兩值時針方向相反(預設兩正值是相反的),相加為90度的倍數時,那麼不可見。

7.transform的rotatex是繞x軸上邊向內旋轉,相當於座標系右上方往裡,rotatey是繞y軸右邊向內旋轉,相當於座標系右上方往裡,rotatez是繞平面順時針旋轉。

8.css3中只有設定了perspective值的元素才會有z軸,perspective值即觀察點距離影象(z軸)的垂直距離。

9.使用者介面特性:resize(none,both,horizontal,vertical)可以調整元素大小

10.的大小可以用font-size屬性來設定,按鈕,動畫,偽元素。

11.li+li表示給除第乙個li元素的所有同級li新增樣式,第乙個li元素相當於當前的li元素。

12.flex布局,父元素的6屬性(flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content);子元素的6屬性(order,flex-grow,flex-shrink,flex-basis,flex,align-self).

flex子元素寬度溢位父元素時

子元素:去除子元素的固定高度,加word-break: break-all;  目的讓子元素高度自適應,英文單詞放不下時自動換行

父元素加flex-wrap:wrap;  目的讓子元素放不下時換行;

13.box-shadow不能響應滑鼠事件,且模擬的邊框線只能是實線,但是它能有多個邊框屬性,而且它的描邊會跟著border-radius畫。虛線需要outline模擬(乙個屬性邊框,目前不能跟著border-radius畫,只能是直角)。

14.計算calc:width(calc(100%-20px))這麼寫不生效,符號中間要有空格,不然解析不了,width(calc(100% - 20px)),這個適用於元素width:100%;margin-left和margin-right不為0的情況。當元素寬度100%,沒有margin,設定了padding,那麼可以設定box-sizing:border-box;目的,讓元素的寬度包括padding。

15.漸變中如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小,則該色標的位置值會被設定為它前面所有色標位置值的最大值.比如background: linear-gradient(red 30%, green 0);表示,綠色從30%開始,佔70%寬,背景沒有模糊的漸變效果,因為綠色設定的開始色的位置是紅色的結束位置

實驗,斜向的重複漸變色標值最好用畫素,用百分比要數學計算background-size,很麻煩。

16. alex walker的蟬原則:通過相對質數來增加背景等涉及到重複規律的偽隨機性

17.clip-path:剪下元素成任意形狀,功能很強大。

18.hyphens處理字型的兩端對齊(none,normal,auto)

19.有乙個unicode字元是專門代表換行符的:0x000a。在css中,這個字元可以寫作 "\000a", 或簡化為 "\a"。 

20.unicode-range與font-face一起使用,unicode-range不是css屬性。

21.matrix與transform中4個屬性 的關係:參考張鑫旭老師的部落格

總結,方便自己檢視:

transform: matrix(a, b, c, d, e, f);

a   c   e                    x                     ax + cy + e   ====>  水平座標

b   d   f     乘以        y        等於      bx + dy + f    ====>  垂直座標

0   0  1                    1                       0 + 0 + 1

偏移(translate):字母e表示水平偏移距離,字母f表示垂直偏移距離;transform: matrix(1, 0, 0, 1, 30, 30); 向右下偏移30,30。

縮放(scale):字母a表示x軸縮放倍數,字母d表示y軸縮放倍數;transform: matrix(2, 0, 0, 2, 0, 0); 放大兩倍。

旋轉(rotate):與a,b,c,d四個引數都有關係; transform: matrix(cosθ,sinθ,-sinθ,cosθ,0,0); 旋轉θ度。

拉伸(skew):與b,c兩個引數有關,c 表示沿x軸的斜切,b表示沿y軸的斜切; transform: matrix(1,tan(θy),tan(θx),1,0,0);斜切θ度。

我的python積累

工作一年了 2012年入職 對於python的認識從無到有,心中也建立起了乙個python的框架圖。對於日常工作中所遇到的python的問題,目前已經有了近200篇博文,有自己寫的,也有 的。今天,我想把他們歸納一下,讓他們更加條理清楚。方便我也方便需要它的人進行查閱。如果有錯誤等問題,希望大家提醒...

css基礎積累

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

CSS 知識積累

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