居中
最常用的height + line-height，以及margin：0 auto的居中方式就不再闡述，以下介紹兩種容錯性高的實現方案。
- flex布局實現
豬齒魚前端日常開發中，我們多以flex布局進行居中，父元素display:flex並且設置align-items:center或者 justify-content: center;實現水平或者垂直的居中方式，取決於 flex-direction也就是flex布局的布局方向。類似如下布局的居中形式。
實現代碼如下（舉例）
<body> <style> .container { height: 300px; background: aqua; display: flex; align-items: center; } img { max-width: 300px; } </style> <div class="container"> <span>12111111111111111111111111111111111111111111111111eeeeeeeeeeee1111111dwaedwqqqqqqqqqqqqqqqqq</span> <img src="https://www.baidu.com/img/bd_logo1.png" /> </div> </body> 
2. 絕對定位相對定位居中
在需要實現居中的元素確定寬高的情況下。平台內實現垂直水平居中效果的如下
外層容器高度繼承，內部的loading圓圈定高寬，之后通過絕對定位 + margin的方式實現居中；
基礎實現代碼如下：
<body> <style> .father { width: 400px; height: 200px; position: relative; border: 1px solid #000; } .son { width: 200px; height: 100px; background: red; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; } </style> <div class="father"> <div class="son"> position:absolute;</br> left:0; top:0;</br> right:0; bottom:0; </br>margin:auto </div> </div> </body> 常用布局實現
常用的布局實現就屬flex以及grid布局，平台中也多處使用到了，主要是分情況進行取舍。
情況1
卡片元素寬度fit-content，寬度隨外層容器平分（此處5等分），每個卡片直接需要有margin進行隔離，這里毋庸置疑使用grid布局；倘若使用flex布局，還需手動設置各個卡片margin屬性，以及卡片的百分比寬度，grid布局直接通過設置grid-template-columns以及gridGap實現等分和間隙效果。
如下：
情況2
左邊有菜單欄為定寬，右邊的內容自適應，這樣的情況采用flex布局。右邊的主要內容設 flex：1（1 1 0）就能夠實現自適應，flex:1的分解就相當於 flex-grow:1, flex-shrink:1, flex-basic:0。
當然如果只是單純為了得出右側的寬度從而占滿全屏可以使用calc(100% - 菜單寬度)；但是如果涉及到那種菜單能夠進行折疊和伸縮的，使用flex布局是最好的。
文本溢出處理方案
平台多處地方需要進行文本的溢出省略處理
前者是單行溢出，后者是多行溢出省略
1、單行文本溢出
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2、多行文本溢出
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
因使用了WebKit的CSS擴展屬性，該方法適用於WebKit瀏覽器及移動端； 1. -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果，它需要組合其他的WebKit屬性。 2. display: -webkit-box; 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。 3. -webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。
其他樣式實現
1. 流程引線
如圖，倘若需要實現類型如下的流程線，平台多處使用到了css類選擇器中::before以及::after的偽類元素或者重新定義新標簽，使其相對於卡片絕對定位，通過對特定的卡片進行偽類的追加或者標簽的渲染，實現流程引線的顯示 
具體如下圖： 
2. 三角行箭頭實現
使用border的均分原理去實現三角形
<style> div { width: 0; height: 0; border-top: 10px solid green; border-bottom: 10px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; } </style> <div/> 3. 下拉展示框的動畫效果
如圖所示，實現效果。
鼠標hover上去會展示一個下拉面板，按照簡單的邏輯實現，只需要控制它的display就能控制顯隱，但是這樣就很突兀，做不出如圖的緩慢展示帶有一點動畫的效果。 
具體的實現就需要涉及到css3的動畫。
- 元素的顯隱可以通過狀態管理來控制；
這里通過useState去控制className；
const [isHovered, setHovered] = useState(false);
const menuLists = (
<div
className={`${prefixCls}-sliderMune ${isHovered ? `${prefixCls}-sliderMune-hover` : ''}`}
>
{
map(moreAppMenuDs.toData(), ({ id, name }:any) => (
<div key={id}>
<span>
{name}
</span>
</div>
))
}
</div>
);
- 綁定hover事件(當然這一步怎么綁定都行，不是重點)； ```javascript function showDom() { setHovered(true); }
function hideDom() { setHovered(false); }
* css；
```less
@keyframes dropdownMenu {
0% {
transform: translateY(-10%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.@{prefixCls} {
&-sliderMune {
position: absolute;
top: 100%;
left: 0;
z-index: 999;
color: black;
background: #fff;
opacity: 1;
max-width: 480px;
box-shadow: 0 2px 8px 0 rgba(15, 19, 88, 0.12);
padding: 20px;
display: none;
flex-flow: wrap;
> div {
......
}
&-hover {
display: flex;
animation: 0.3s ease-in-out dropdownMenu;
}
}
}
總結
有一種緩慢的位移效果，以及有一個漸變的顯示過程，都是需要在動畫幀中加入css的控制，重點就是動畫的控制，位移使用transform，透明度就用opacity控制就OK。
本文由豬齒魚技術團隊原創，轉載請注明出處