CSS你學會了嗎

2021-10-07 03:14:14 字數 2550 閱讀 1966

css樣式

1、文字域內容解析換行,解析換行符

white-space: pre-wrap;

2、**全域性黑白色

/* 須在html上設定 */

html

3、水平垂直居中

="center"

>

水平垂直居中<

/span>

<

/div>

/* 預設初始化樣式 */

body

.center

/* 1、line-height水平垂直居中 */

/* 父節點固定px高度

*/.center

/* 2、絕對定位水平垂直居中 */

/* 子節點固定px高度

.center

.center span

*//*

衍生寫法,?推薦使用

top、left偏移父容器的50%,通過transform: translate偏移自身-50%實現居中

可不設定子節點寬高

*/.center span

/* 3、偽類水平垂直居中 */

/* 容器before偽類生成乙個行內節點,高100%,寬1px,margin-right: -1px,消除1px的占用

容器所有子節點都需要設定vertical-align: middle

容器通常情況下字型大小不為0,**的換行符會占用乙個字元的位置,此處應將容器字型大小設為0,內容節點中重新設定字型大小

*/.center

.center:

:before

.center span

/* 4、flex水平垂直居中,?推薦使用 */

/* 設為 flex 布局以後,子元素的float、clear和vertical-align屬性將失效 */

.center

/* 5、grid水平垂直居中 */

/* 注意相容性要求瀏覽器版本較高 */

.center

/* 6、table-cell水平垂直居中 */

/* 父容器寬度預設內容寬度

當display: table時,padding失效

當display: table-row時,margin、padding失效

當display: table-cell時,margin失效

*/.center

.center span

4、文字超出省略號

/** * 單行文字

* 注意:固定寬度

*/.text

/** * 多行文字

* 注意:固定寬度,容器padding屬性會導致文字無法隱藏

*/.text

5、漸變色

線性漸變

徑向漸變

圓錐漸變

/** * 線性就變

* background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

* * direction(可不寫,預設:to bottom(從上到下)):漸變方向、角度

* 漸變方向:to right(從左到右),to bottom right(從左上角到右下角)

* 角度:0deg 將建立乙個從下到上的漸變,90deg 將建立乙個從左到右的漸變

* * repeating-linear-gradient:重複漸變

*/.box

.box

/** * 徑向漸變

* background-image: radial-gradient(shape size at position, start-color, ..., last-color);

* * shape size at position:(可不寫,預設:漸變的中心是 center(表示在中心點),漸變的形狀是 ellipse(表示橢圓形),漸變的大小是 farthest-corner(表示到最遠的角落))

* shape:circle 表示圓形,ellipse 表示橢圓形(預設)

* size:

* closest-side:指定徑向漸變的半徑長度為從圓心到離圓心最近的邊

* closest-corner:指定徑向漸變的半徑長度為從圓心到離圓心最近的角

* farthest-side:指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

* farthest-corner:指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

* * repeating-radial-gradient:重複漸變

*/.box

.box

/** * 圓錐漸變

* background-image: conic-gradient(from at , color-stop1, color-stop2, ...);

* from at :(可不寫,預設:from 0deg at center)

* * repeating-conic-gradient:重複漸變

*/.box

.box

Say「No」,你學會了嗎?

say no 你學會了嗎?2004 年,當蕭聖璇剛回國加入微軟亞洲工程院時,有乙個現象讓他難以適應 開會討論時,大家要麼三緘其口,要麼發表的意見不溫不火,會議結束後,大家卻接二連三地來到他的辦公室,開始對會議上的問題發表看法。在蕭聖璇看來,這些原本要在開會時解決的問題,為什麼非要留到會後才提出來?蕭...

Say「No」,你學會了嗎?

say no 你學會了嗎?2004 年,當蕭聖璇剛回國加入微軟亞洲工程院時,有乙個現象讓他難以適應 開會討論時,大家要麼三緘其口,要麼發表的意見不溫不火,會議結束後,大家卻接二連三地來到他的辦公室,開始對會議上的問題發表看法。在蕭聖璇看來,這些原本要在開會時解決的問題,為什麼非要留到會後才提出來?蕭...

靜態鍊錶你學會了嗎

最近在複習大學學習的靜態鍊錶資料結構,從 分析結構,卡在了備用鍊錶那裡,通過畫圖分析才掌握了它的結構。首先我們先來看看靜態鍊錶的結構定義 typedef struct component,staticlinklist maxsize status initlist staticlinklist l ...