CSS中的一些細節
一、塌陷
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適配方案
使用 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);
廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
七、元素居中
- 文字(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%);
- 彈性盒子(有相容問題