css小技巧 (持續更新)

2021-10-04 10:48:37 字數 1578 閱讀 9702

這兩天做專案 遇到的一些css問題記錄一下

以前的解決辦法都是用calc(100% - padding或者margin 的數值),但是css3出了個新屬性

box-sizing

: border-box;

margin不在屬性範圍內

意思為 元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

把opacity替換成下面**

background-color

:rgba

(250, 250, 250, 0.8)

;

flex-direction

: row /*主軸方向從左到右*/

flex-direction

: column /*主軸方向從上到下*/

flex-wrap

: wrap /* wrap換行 nowrap 不換行*/

justify-content

: flex-start /*flex-start貼在左邊對齊

center居中對齊

space-around平均分

space-between */

align-item

: flex /*設定側軸的對齊方式(單行) center */

align-content

:flex-start /*設定側軸的對齊方式(多行)

center

space-around

space-between*/

div[arr]

// 選擇具有arr屬性的div

div[arr='hi']

// 選擇具有arr屬性且屬性值=hi的div

div[arr~='hi']

// 選擇具有arr屬性且屬性值包含單詞hi的div

div[arr*='hi']

// 選擇具有arr屬性且屬性值包含hi字母的div

position:sticky是css定位新增屬性;可以說是相對定位relative和固定定位fixed的結合;它主要用在對scroll事件的監聽上;簡單來說,在滑動過程中,某個元素距離其父元素的距離達到sticky粘性定位的要求時(比如top:100px);position:sticky這時的效果相當於fixed定位,固定到適當位置

使用條件:

父元素不能overflow:hidden或者overflow:auto屬性。

必須指定top、bottom、left、right4個值之一,否則只會處於相對定位

父元素的高度不能低於sticky元素的高度

sticky元素僅在其父元素內生效

Linux小技巧(持續更新)

1.最近在遠端伺服器的時候,輸入命令一些報錯資訊老是亂碼。解決辦法 因為服務的命令列預設是不支援英文的,我們需要修改語言才能正確選擇。輸入 echo lang 結果 zh cn.utf 8 修改語言為英語 lang en us 這樣這次登入資訊就是英文了,如果下次在登入,語言還是會顯示中文的。2.有...

css常用技巧 持續更新

6 div應用float溢位fatherdiv demo fdiv不設定高度,div應用float,內容溢位 解決方法 增加bdiv並應用clear both清浮動或者給fdiv設定高度。7 css的縮寫規則 color的縮寫 demo ff00ee f0e 簡單縮寫 注 f0f0fe f0f0fe...

div css小技巧 持續更新中

最近的學習中積累了一些關 於div css的小技巧,感覺雖然不是很難,但是如果不知道的話,確實需要很長時間去查。1div中文字垂直居中 網上有很多種,剛哥提醒我使用label,最後使用的是div巢狀table。感覺還是在table中容易實現對字型的操控 開課學院 2首行縮排2個字的距離 課程 效果圖...