css 知識梳理

感興趣的朋友可以關注我的前端倉庫

css 基礎

關於 line-height

行高由 line-box 決定，當是line-box高度是line-height最高者

    <style>
    .text{
        background:blue;
    }
    .text span + span{
        line-height: 30px;
    }
    .text span:last-child{
        line-height: 40px;
        font-size:20px;
    }
    </style>

    <div class="text">
        <span>h1 box</span>
        <span>h2 box</span>
        <span>h3 box</span>
    </div>

.text 高度爲 40px;
當line-height爲字體高時，此時字體居中顯示
當字體大小不一致時,此時是按baseline對齊(即字體底部),若要此時字體對齊需要都設置 vertical-align:middle
圖片和文字顯示時，圖片距離底部由縫隙？

<style>
 .image{
        background: orange;
    }
</style>
 <div class="image">
        <span>text image..</span>
        <img src="https://tse2-mm.cn.bing.net/th?id=OIP.AuVMA21FXKpPXBnHYLTsIgHaFj&w=174&h=130&c=7&o=5&pid=1.7"/>
    </div>

圖片基於 baseline 對齊,因此和文字顯示距離底部會有縫隙
圖片採用 vertical-align或者設置display:block可以去除間隙

border

border 添加圖片

.border{
    border:30px solid transparent; //邊框透明
    border-image:url(xxx) 30 round; // 30 表示位移距離  round：讓中間距離被圖片均分
}

border 圖像變化
2.1 css 邊框交接處是斜切,因此我們可以通過讓左邊邊透明來實現梯形

.border{
     width: 100px;
     height: 100px;
    border-bottom:30px solid blue;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
}

2.2 此時我們將 with不斷減少梯形上邊也會不斷減少直到爲 0時就成了三角形

.border{
    width: 0;
    height: 100px;
    border-bottom:30px solid blue;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
}

2.3 此時我們加入圓角後，會成爲扇形

.border{
/* 此處爲2.2內容 */
border-radius: 50%;
}

文字折行

overflow-wrap(word-wrap) 通用換行控制,是否保留單詞
word-break 針對多字節文字
white-space 空白處是否斷行

.txt{
    /* 單詞超出文本換行 */
    overflow-wrap:break-word;
}
.txt{
    /* 所有超出範圍的換行 */
    word-break:break-all;
}
.txt{
    /* 表示文字不換行 */
    white-space:nowrap;  
}

僞元素和僞類區別

僞類表示狀態比如： link,hover;使用單冒號
僞元素表示真的元素比如： after,before;使用雙冒號

佈局

float

採用浮動佈局後,會使父元素內容塌陷,此時一定記住要清除浮動

<style>
/* 父元素清除浮動 */
.row::after{
    content:''; 
    display:table;
    clear:both;
}
.col-2{
    float:left;
    width:44%;
    margin-left:4%;
    margin-right:0;
}
</style>
<div class="row">
    <div class="col-2"></div>
    <div class="col-2"></div>
</div>

** 這裏除了使用table元素外還可以使用flow-root效果相同，或者採用其它形成BFC方案overflow,inline-bolck,block等，當由於這些在生產中會產生副作用，建議採用前面方案。

flex

屬性

Parent (Flex Container)

display：flex | inline-flex
flex-direction: row | row-reverse | column | column-reverse
flex-wrap:wrap | nowrap | wrap-reverse
flex-flow: (是 flex-direction和flex-wrap 簡寫)
justify-content(主軸): flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items(交叉軸每個flex元素對齊方式):flex-start | flex-end | center | baseline | stretch
align-content(交叉軸多行時每行對齊方式):flex-start | flex-end | center | stretch | space-between | space-around;

Children (Flex Items)

order:
flex-grow:
flex-shrink: ;
flex-basis: | auto;
flex:是（grow, shrink, and basis）簡寫默認（0 1 auto）
align-self: 覆蓋在父級上面的對齊方式

grid

屬性

Parent (Grid Container)

display: grid | inline-grid;
grid-template-columns、grid-template-rows:基於網格列的緯度去定義定義網格線名稱和尺寸 |

.myClass {
    grid-template-columns: [col1] 40px [col2] 3fr;
    grid-template-rows: 50% 25vh auto;
}

.anotherClass {
    grid-template-rows: repeat(2, 350px [name]) 10%;
}
/* 等價 */
.anotherClass {
    grid-template-rows: 350px [name] 350px [name] 10%;
}

grid-template-areas:是網格區域 grid areas 在CSS中的特定命名。通過選擇器命名區域。然後通過此屬性指定佈局。必須爲每個列/行指定區域名稱。

.wrapper {
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
    /*1. 定義行和列數 與區域名稱（2*4）*/
    /* [.]表示空出此行 */
    grid-template-areas: 
    "header header header header"
    "aside . article article";
}
/* 2. 指定區域 */
.class1 {
    grid-area: header;
}
.class2 {
    grid-area: article;
}
.class3 {
    grid-area: aside;
}

grid-template:是 grid-template-rows, grid-template-columns, and grid-template-areas 縮寫
grid-column-gap: 列間距
grid-row-gap: 行間距
grid-gap: grid-column-gap and grid-row-gap縮寫
justify-items:align grid items 行軸對齊 start | end | center | stretch(default);
align-items:align grid items 縱軸對齊 start | end | center | stretch(default);
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
grid-auto-columns、grid-auto-rows: ;

Children (Grid Items)

grid-column-start
grid-column-end
grid-row-start
grid-row-end: | | span | span | auto;

.class1 {
    grid-column-start: 1;
    grid-column-end: span 4;
    grid-row-start: 3;
    grid-row-end: span footer-end;
}

grid-column
grid-row: / | / span ;

.class1 {
    grid-column: 1 / span 4;
    grid-row: 3 / span footer-end;
}

grid-area: | / / / ;
有兩種名稱grid-area:1. 使用區域名稱;2. 使用 / / /

.class1 {
    grid-area: 1 / name3 / namedline / 4;
}

justify-self:覆蓋 justify-items. start | end | center | stretch;
align-self:覆蓋 align-items. start | end | center | stretch;

**練習:**通過grid 佈局讓下面html 在不同設備下展示不通的排版

.wrapper {
	display: grid;
	grid-gap: 10px;
	font-family: Arial, sans-serif;
}
.wrapper > * {
	padding: 1em;
	border-radius: 1em;
}
header {
	background-color: blue;
	color: white;
}
article {
	background-color: green;
	color: white;
}
aside {
	background-color: yellow;
}
@media (min-width: 650px) { 
	header {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	article {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
	aside {
		grid-column: 2 / 3;
		grid-row: 1 / 3;
	}
}
@media (min-width: 1000px) { 
	header {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	article {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}
	aside {
		grid-column: 1 / 2;
		grid-row: 1 / 3;
	}
}

<div class="wrapper">
		<header>
			<h1>My Fine Header</h1>
		</header>
		<article>
			<h2>Article Title</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt?</p>
		</article>
		<aside>
			<h3>My Aside</h3>
			<blockquote>
				A fine quote!
			</blockquote>
		</aside>
	</div>

css 效果

box-show

該屬性可以讓幾乎所有元素的邊框產生陰影。如果元素同時設置了 border-radius ，陰影也會有圓角效果。

<style>
    .box{
        /* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
        
        /* 插頁(陰影向內) | x偏移量 | y偏移量 | 陰影顏色 */
        box-shadow: inset 5em 1em gold;

        /* 任意數量的陰影，以逗號分隔 */
        box-shadow: 3px 3px red, -1em 0 0.4em orange;
    }
</style>

text-show

<style>
    .box{
         /* x偏移量 | y偏移量 | 陰影模糊半徑| 陰影顏色 */
        text-shadow: 1px 1px 2px black; 

        /* x偏移量 | y偏移量  | 陰影顏色 */
        text-shadow: 5px 5px #558abb;
    }
</style>

border-radius

<style>
.box-radius{
    width: 100px;
    height: 100px;
    background-color: blue;
    /* top-left | top-right| bottom-left| bottom-right  */
    border-radius: 100% 0 0 0; 
}
</style>

clip-path

創建一個只有元素的部分區域可以顯示的剪切區域。區域內的部分顯示，區域外的隱藏。

<style>
.box-border{
    width: 300px;
    height: 300px;
    border:1px solid blue;
    background-color: orange;
    /* 在容器中間裁剪一個 100px * 100px 圖形 */
    clip-path: inset(100px 100px); 

    /* 添加過渡動畫 */
    transition:clip-path .4s;
}
.test{
 /* 在容器 30% * 30% 位置創建一個 10% 圓形  (默認會在 50% * 50%)*/ 
 clip-path:circle(10% at 30% 30%);
 /* 在原圖形上x,y 基礎上 創建 （50%,0）(100%,50%）(50%,50%）三個點然後形成封閉圖形 */
 clip-path:polygon(50% 0,100% 50%,50% 50%)
}
</style>

transform

屬性允許你旋轉，縮放，傾斜或平移給定元素。這是通過修改CSS視覺格式化模型的座標空間來實現的

<style>
.box-tranform{
    /* 水平方向 x移動100px,y移動 40px */
    transform: translate(100px, 40px);
    /* 順時針旋轉 30度 */
    transform: rotate(30deg);
    /* x,y同時縮放50% */
    transform:scale(0.5);
    /* x斜切30度，y斜切50度 */
    transform:skew(30deg,50deg);
}
</style>

構建3D效果

<style>
 .container-cue{
     /* 父容器 設置透視距離 */
    perspective: 500px;
}
.cue{
    /* 子元素設置 transform-style */
    transform-style: preserve-3d;
    /* 元素效果變換 */
    transform: rotateZ(30deg);
}
</style> 
<div class="container-cue">
    <div class="cue">

    </div>
</div>

3D立方體

<style>
.container-cue{
    width: 200px;
    height: 200px;
    border:1px solid red;
    padding: 10px;
    perspective: 500px;
}

.cue{
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: translateZ(-100px); 
    /* background-color: orange; */
    position: relative;
    transition: transform 3s;
}
.cue:hover{
    transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);
}
.cue div{
    width: 200px;
    height: 200px;
    line-height: 200px;
    font-size: 50px;
    position:absolute;
    text-align: center;
}
.front{
    background:rgba(255, 0, 0, .3);
    transform: translateZ(100px)
}
.back{
    background: rgba(0,255,0, .3);
    transform: translateZ(-100px) rotateY(180deg)
}
.left{
    background: rgba(0,255,255, .3);
    transform: translateX(-100px) rotateY(-90deg);
}
.right{
    background: rgba(0,255,255, .3);
    transform: translateX(100px) rotateY(90deg);
}
.top{
    background: rgba(100, 100, 100, .4);
    transform: translateY(-100px) rotateX(-90deg);
}
.bottom{
    background: rgba(100, 70, 0, .4);
    transform: translateY(100px) rotateX(90deg);
}
</style>
 <div class="container-cue">
    <div class="cue">
        <div class="front">1</div>
        <div class="back">2</div>
        <div class="left">3</div>
        <div class="right">4</div>
        <div class="top">5</div>
        <div class="bottom">6</div>
    </div>
</div>

css 工程化

postCSS

它是一款很好的css轉換工具。本身只具有解析的能力,憑藉強大的插件生態可以很好對css進行轉換，例如：autoprefixer,cssnano,cssnext以及CSS Modules。
https://github.com/postcss/postcss#usage

webpack

css-loader css變成js
style-loader 將 css 引入 head
ExtractTextPlugin 將css從js提取出來
css modules 解決css變量名稱衝突
Postcss-loader Postcss 處理
…

css 知識梳理

文章目錄

css 知識梳理

css 基礎

關於 line-height

border

文字折行

僞元素和僞類區別

佈局

float

flex

屬性

Parent (Flex Container)

Children (Flex Items)

grid

屬性

Parent (Grid Container)

Children (Grid Items)

css 效果

box-show

text-show

border-radius

clip-path

transform

構建3D效果

3D立方體

css 工程化

postCSS

webpack

Nginx R31 doc 官方文檔-01-nginx 如何安裝

[20年必須要瞭解的] graphQL

learning react depth

css 知識梳理

node+ts+express 構建 RESTful API 之路由構建

Redux源碼學習篇(二) -- react-redux實現

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結