一、塌陷 1.當position設置為：absolute或者fixed時，元素的display會轉換為block。（設置float也會產生這樣的效應） 2.正常情況下，div會被內容撐開，但是如果設置了 1. 的情況下，父元素就會產生 塌陷 ，失去高度。 解決辦法： 給父元素設置高度。 給父元素設置 ...
一、塌陷
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
決定主軸方向，也就是定義容器元素是行方向排列還是列方向排列，
並且定義它的起點方向，例如行方向是從左向右還是從右向左。
反之，列方向是從上到下還是相反呢。（row是行，column是列。）
（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
調整主軸方向上項目的對齊方式。
以行向排列為例，可以設置為靠左對齊，靠右對齊，水平居中對齊。
還有兩個特殊的：
space-between（兩端對齊，相當於文本對齊【text-align】里的justify）；
space-around（元素兩側間隔相等，且比它與邊框的間隔大一倍）
（5）align-items: flex-start | flex-end | center | initial（從父元素繼承）
調整交叉軸方向上的項目對齊方式。
如果行方向是主軸方向，那麼列方向就是交叉軸方向。
以行方向為例，可以設置垂直在上，垂直在下，垂直居中。
兩個特殊的：
baseline（項目元素第一行文字的基線對齊）；
stretch是預設的（如果項目元素沒有設置高度，那麼它就會自動拉伸高度至整個容器高度）
六、rem適配方案
https://www.cnblogs.com/Nyan-Workflow-FC/p/10698237.html
七、元素居中
https://www.cnblogs.com/xinjie-just/p/5916001.html
- 文本（img也是）元素水平居中 text-align: center;
- 塊級元素水平居中 margin: 0 auto;
- 單行文本垂直居中 設置line-height和div的height
- 不確定高度的文本垂直居中 使用padding-top和padding-bottom
- 確定高度的塊級元素垂直居中 position: absolute; top:50%; margin-top: -高度的一半;
- 絕對定位實現垂直居中 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
- 給父元素設置 display: table-cell; vertical-align: middle;
- css3 設置完定位和top,left後設置 transform: translate(-50%,-50%);
- 彈性盒子（有相容問題）
