一、塌陷

1.當position設定為：absolute或者fixed時，元素的display會轉換為block。（設定float也會產生這樣的效應）
2.正常情況下，div會被內容撐開，但是如果設定了1.的情況下，父元素就會產生塌陷，失去高度。

解決辦法：

給父元素設定高度。
給父元素設定overflow: hidden;

二、文字的自動換行

對於那種長單詞，會超出元素的實際寬度。

解決辦法

word-break:break-all;

三、文字溢位部分隱藏

解決辦法

overflow: hidden;

四、溢位打點

4.1 單行文字打點

p{
    width: 200px;
    overflow: hidden;
    white-space: nowrap; /*不換行*/
    text-overflow: ellipsis; /*溢位部分點樣式*/
}
 

4.2 多行文字溢位打點

p{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /*行數*/
    -webkit-box-orient: vertical;
}

五、flex佈局

當設定了display: flex;後，那麼子元素的float、clear和vertical-align屬性失效。
flex佈局，分為容器和專案兩個部分。一般而言，容器就是父元素，專案就是該父元素下的子元素。
（1）flex-direction: row（預設）| row-reverse | column | column-reverse

（2）flex-wrap: nowrap（預設） | wrap | wrap-reverse
決定是否都拍在一行（列）裡，也就是是否換行。
以行為例有三種情況，不換行、換行（第一行在上方），換行（第一行在下方）

（3）flex-flow: row nowrap（預設）
這是flex-direction屬性和flex-wrap屬性的簡寫形式，
第一個引數定義排列方式，第二個引數定義是否換行。

（4）justify-content: flex-start | flex-end | center | space-between | space-around

（5）align-items: flex-start | flex-end | center | initial（從父元素繼承）
調整交叉軸方向上的專案對齊方式。
如果行方向是主軸方向，那麼列方向就是交叉軸方向。
以行方向為例，可以設定垂直在上，垂直在下，垂直居中。
兩個特殊的：
baseline（專案元素第一行文字的基線對齊）；
stretch是預設的（如果專案元素沒有設定高度，那麼它就會自動拉伸高度至整個容器高度）

https://www.houdianzi.com/ vi設計公司

六、rem適配方案

使用 rem 單位來定義文字的大小最大的問題在於這些值有點難以使用。讓我們來看一個例子，假設根元素的文字大小是 16px，我們常用的文字大小轉換為 rem 值如下：

• 10px = 0.625rem

• 12px = 0.75rem

• 14px = 0.875rem

• 16px = 1rem (base)

• 18px = 1.125rem

• 20px = 1.25rem

• 24px = 1.5rem

• 30px = 1.875rem

• 32px = 2rem

動態修改font-size:

媒體查詢方式

@media screen and (max-width: 360px) and (min-width: 321) {
    html : {font-size: 24px}
}

@media screen and (max-width: 320px) {
    html : {font-size: 20px}
}

js程式碼控制

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

let htmlDom=document.getElementByTagName('html')[0];

htmlDom.style.fontSize = htmlWidth/10 +'px';

sass計算

@function px2rem($px) {
    $rem: 37.5px;//基準值，iPhone為參考375/10
    @return ($px / $rem) _rem;
}

width: px2rem(50px);

七、元素居中

1. 文字（img也是）元素水平居中 text-align: center;
2. 塊級元素水平居中 margin: 0 auto;
3. 單行文字垂直居中 設定line-height和div的height
4. 不確定高度的文字垂直居中 使用padding-top和padding-bottom
5. 確定高度的塊級元素垂直居中 position: absolute; top:50%; margin-top: -高度的一半;
6. 絕對定位實現垂直居中 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
7. 給父元素設定 display: table-cell; vertical-align: middle;
8. css3 設定完定位和top,left後設置 transform: translate(-50%,-50%);
9. 彈性盒子（有相容問題）