初學CSS時整理的一些問題

垂直居中

1. 對于單行文本，通過設置line-height:height;實現(xiàn)文本的垂直居中
2. 對于多行文本，父級元素高度不固定時，通過內(nèi)部文本撐開，設置padding-top和padding-bottom值相等即可
3. display:table-cell; vertical-align:middle;
4. 或者在同一區(qū)域內(nèi)添加一個輔助空白div，與目標div一樣設置vertical-align:middle;，這是因為該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線垂直對齊。

水平居中

1. 給div設置寬度，然后添加margin:0 auto;（表示上下邊界為0，左右根據(jù)寬度自適應相同值）
2. 行內(nèi)內(nèi)容用text-align:center;來實現(xiàn)水平居中，此屬性具有向下傳遞性

水平垂直居中

1. 讓絕對定位的div居中：top:0;bottom:0;left:0;right:0;margin:auto;
2. 確定容器寬高，絕對定位div居中：
   top:50%; left:50%; margin:height/2 0 0 width/2;
3. 利用transform屬性進行平移轉(zhuǎn)化，translate相對于自身：
   top:50%; left:50%; transform:translate(-50%, -50%);
4. 對于行內(nèi)內(nèi)容可以用text-align:center;和vertical-align:middle;
5. 利用FLEX布局，實際使用時要考慮兼容性：

.container{
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

PX EM REM %

• PX：像素，相對顯示器屏幕分辨率而言（IE無法調(diào)整以PX為單位的字體大?。?/li>
• EM：相對父元素的font-size，具有繼承特點，未被設置則是瀏覽器默認字體尺寸，未經(jīng)設置所有瀏覽器都符合1em = 16px;
• REM：CSS3新特性，相對HTML根元素
• %：相對父元素的百分比值

CSS優(yōu)化性能方法

加載性能：

1. 壓縮CSS：將寫好的CSS打包壓縮，可以減少體積
2. CSS單一樣式：比起margin可以單獨使用margin-bottom，執(zhí)行效率更高
3. 減少對@import的使用，建議使用link，因為link會和頁面加載一起加載，而前者需要等待頁面加載完成

選擇器性能：

1. 減少選擇器的不必要疊加，如有了ID就不用元素了
2. 了解那些屬性是可以繼承的，避免對他們進行重復選擇

渲染性能：

1. 慎用高性能屬性：浮動、定位
2. 盡量減少頁面的重排和重繪
3. 減少使用@import前綴，它會影響css加載速度
4. 使用雪碧圖，方便同一頁面中的小圖標使用，減少頁面請求
5. 減少使用web字體，瀏覽器下載webfonts時會阻塞頁面渲染損傷性

可維護性性能：

1. 將樣式和內(nèi)容分離：將CSS代碼定義在外部CSS中
2. 將具有相同屬性的樣式抽離出來，整合并通過class使用

CSS預處理器 SASS/SCSS/LESS

CSS預處理器：一種進行網(wǎng)頁樣式設計的專門語言，之后再被編譯成為正常的CSS文件，優(yōu)點時方便修改、可讀性強、方便進行代碼的維護。

SASS：
一種動態(tài)樣式語言，縮排語法，比CSS多了好多功能，比如嵌套、運算、繼承、顏色處理、函數(shù)、變量等。

SCSS：
SASS的改良，用{}取代了縮進

LESS：
動態(tài)樣式語言，對CSS賦予了動態(tài)語言的特性，可以在客戶端上運行（支持IE6+、WebKit、Firefox），也可以在服務端運行（借助NODEJS）

CSS渲染

1. 瀏覽器接收到服務器返回的HTML文件
2. 瀏覽器開始構(gòu)建DOM TREE，遇到CSS樣式會構(gòu)建CSS RULE TREE
3. 瀏覽器遇到JS會通過DOM API和CSS DOM API來操作DOM TREE和CSS RULE TREE
4. 瀏覽器會通過DOM TREE和CSS RULE TREE來構(gòu)造Rendering Tree也就是渲染樹
5. 渲染樹構(gòu)建完成后進行布局處理，確定Model中每個結(jié)點在屏幕上的確切顯示位置
6. 進行繪制，遍歷渲染樹，通過UI后端層將每一個結(jié)點繪制出來
   [image:C8EA853C-382D-41C1-81E0-D8C81867C6D9-26064-000084764CF61A19/截屏2021-03-21 上午1.12.49.png]

Flex布局

Flexible Layout/彈性布局，采用Flex布局的元素稱為Flex容器，它的所有子元素稱為Flex項目。

水平的主軸：main axis
垂直的交叉軸：cross axis
主軸開始：main start/主軸結(jié)束：main end
交叉軸開始：cross start/交叉軸結(jié)束：cross end
項目默認按照主軸排列。
[image:7F75BD0B-D3EA-4C82-8E01-501344512FCA-26064-000084EEE9C3FB1D/截屏2021-03-21 上午1.21.27.png]

Flex容器的屬性：

• flex-direction：row | row-reverse | column | column-reverse，決定主軸的方向
• flex-wrap：nowrap | wrap | wrao-reverse，一條軸線上項目排不下，默認是不換行的，但可以設置是否換行
• flex-flow：<flex-direction> || <flex-wrap>
• justify-content：定義了主軸上的對齊方式，flex-start左對齊，flex-end右對齊，center水平居中，space-between兩端對齊中間項目間隔相等，space-around每個項目兩側(cè)間隔相等
• align-items：定義交叉軸上如何對齊，flex-start起點對齊，flex-end重點對齊，center垂直居中，baseline第一行文字基線對齊，stretch占滿整個容器
• align-content：多根軸線

flex屬性是flex-grow/flex-shrink/flex-basis的縮寫。

• flex-grow定義項目的放大比例，默認為0，即如果存在剩余空間也不放大
• flex-shrink定義項目的縮小比例，默認為1，即如果空間不足，該項目將縮小
• flex-basis定義分配多余空間之前，項目占據(jù)的主軸空間，默認為auto即項目本來的大小
• flex的默認值為flex:0 1 auto;

怎么實現(xiàn)自動換行

兩欄布局

1. 浮動布局

<div id = "aside"></div>
<div id = "main"></div>

#aside{
    width:300px;
    background-color:yellow;
    float:left;
}

#main{
    background-color:aqua;
    margin-left:300px;
}

2. 絕對定位

<div id = "aside"></div>
<div id = "main"></div>

#aside{
    position:absolute;
    left:0;
    width:200px;
}

#main{
    margin-left:200px;
}

3. FLEX布局

<div id = "container">
    <div id = "aside"></div>
    <div id = "main></div>
</div>

#container{
    display:flex;
}
#aside{
    flex:0 0 200px;
}
#main{
    flex:1 1;
}

前端/CSS