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 ...