成人区人妻精品一区二区不卡网站,久艾草久久综合精品无码国

居中

最常用的height?+ line-height，以及margin：0 auto的居中方式就不再闡述，以下介紹兩種容錯(cuò)性高的實(shí)現(xiàn)方案。

flex布局實(shí)現(xiàn)

? 豬齒魚前端日常開發(fā)中，我們多以flex布局進(jìn)行居中，父元素display:flex并且設(shè)置align-items:center或者?justify-content: center;實(shí)現(xiàn)水平或者垂直的居中方式，取決于 flex-direction也就是flex布局的布局方向。類似如下布局的居中形式。

實(shí)現(xiàn)代碼如下（舉例）

<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. 絕對(duì)定位相對(duì)定位居中

在需要實(shí)現(xiàn)居中的元素確定寬高的情況下。平臺(tái)內(nèi)實(shí)現(xiàn)垂直水平居中效果的如下

外層容器高度繼承，內(nèi)部的loading圓圈定高寬，之后通過絕對(duì)定位 + margin的方式實(shí)現(xiàn)居中；

基礎(chǔ)實(shí)現(xiàn)代碼如下：

<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>

常用布局實(shí)現(xiàn)

常用的布局實(shí)現(xiàn)就屬flex以及grid布局，平臺(tái)中也多處使用到了，主要是分情況進(jìn)行取舍。

情況1

卡片元素寬度fit-content，寬度隨外層容器平分（此處5等分），每個(gè)卡片直接需要有margin進(jìn)行隔離，這里毋庸置疑使用grid布局；倘若使用flex布局，還需手動(dòng)設(shè)置各個(gè)卡片margin屬性，以及卡片的百分比寬度，grid布局直接通過設(shè)置grid-template-columns以及gridGap實(shí)現(xiàn)等分和間隙效果。

如下：

情況2

左邊有菜單欄為定寬，右邊的內(nèi)容自適應(yīng)，這樣的情況采用flex布局。右邊的主要內(nèi)容設(shè)?flex：1（1 1 0）就能夠?qū)崿F(xiàn)自適應(yīng)，flex:1的分解就相當(dāng)于 flex-grow:1, flex-shrink:1, flex-basic:0。

當(dāng)然如果只是單純?yōu)榱说贸鲇覀?cè)的寬度從而占滿全屏可以使用calc(100% - 菜單寬度)；但是如果涉及到那種菜單能夠進(jìn)行折疊和伸縮的，使用flex布局是最好的。

文本溢出處理方案

平臺(tái)多處地方需要進(jìn)行文本的溢出省略處理

前者是單行溢出，后者是多行溢出省略

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擴(kuò)展屬性，該方法適用于WebKit瀏覽器及移動(dòng)端； 1. -webkit-line-clamp用來限制在一個(gè)塊元素顯示的文本的行數(shù)。為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性。 2. display: -webkit-box; 必須結(jié)合的屬性，將對(duì)象作為彈性伸縮盒子模型顯示。 3. -webkit-box-orient 必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式。

其他樣式實(shí)現(xiàn)

1. 流程引線

如圖，倘若需要實(shí)現(xiàn)類型如下的流程線，平臺(tái)多處使用到了css類選擇器中::before以及::after的偽類元素或者重新定義新標(biāo)簽，使其相對(duì)于卡片絕對(duì)定位，通過對(duì)特定的卡片進(jìn)行偽類的追加或者標(biāo)簽的渲染，實(shí)現(xiàn)流程引線的顯示??具體如下圖：?

2. 三角行箭頭實(shí)現(xiàn)

使用border的均分原理去實(shí)現(xiàn)三角形

<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. 下拉展示框的動(dòng)畫效果

如圖所示，實(shí)現(xiàn)效果。

鼠標(biāo)hover上去會(huì)展示一個(gè)下拉面板，按照簡單的邏輯實(shí)現(xiàn)，只需要控制它的display就能控制顯隱，但是這樣就很突兀，做不出如圖的緩慢展示帶有一點(diǎn)動(dòng)畫的效果。?

具體的實(shí)現(xiàn)就需要涉及到css3的動(dòng)畫。

元素的顯隱可以通過狀態(tài)管理來控制；

這里通過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事件(當(dāng)然這一步怎么綁定都行，不是重點(diǎn))； ```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;
      }
    }
  }

總結(jié)

有一種緩慢的位移效果，以及有一個(gè)漸變的顯示過程，都是需要在動(dòng)畫幀中加入css的控制，重點(diǎn)就是動(dòng)畫的控制，位移使用transform，透明度就用opacity控制就OK。

本文由豬齒魚技術(shù)團(tuán)隊(duì)原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處

本文摘自：https://www.cnblogs.com/

全場景效能平臺(tái)豬齒魚常用的前端css實(shí)現(xiàn)方案2021-10-22 09:56:19

居中