左邊定寬宪哩，右邊自適應(yīng)

左邊定寬晦鞋，右邊自適應(yīng).png

• 左邊定寬罢防，右邊塊狀加margin-left：定寬艘虎。

<div class="parent">
   <img src="xxx" width=50 height=50 />
   <span>大家好我是自適應(yīng)...</span> // 可以直接用塊狀元素
</div>

.parent {
   overflow: hidden;
}
.parent > img {
   float: left;
}
.parent > span {
   display: block;
   margin-left: xxxpx;
}

三列均等布局

三列均等布局.png

<div style="width: 340px;">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
</div>

ul {
      background-color: red;
      margin-right: -20px;
}
ul > li {
      width: 100px;
      height: 50px;
      float: left;
      margin-right: 20px;
      background-color: yellow;
      display: inline-block;
}

水平垂直居中

水平垂直居中.png

<div class="parent" style="height: 100px; width: 300px">
    <div class="child">我是子元素</div>
</div>

• 定位

.parent {
      position: relative;
      border: 1px solid red;
}
.child{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /*margin-left: - 內(nèi)層寬度 / 2;
      margin-top: - 內(nèi)層高度 / 2;*/
}
或者
.child {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     width: xxxpx;
     height: xxxpx;
     margin: auto;
}

• table-cell

.parent {
      border: 1px solid red;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
}
.child {
      display: inline-block;
}

• flex

.parent {
      display: flex;
      justify-content: center;
      align-items: center;
}

方法很多，根據(jù)不同情況選擇咒吐。

蒙板

蒙板.png

<div class="container">
    <div class="dialog">
      <div class="contain">大家好</div>
    </div>
</div>

.container {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0,0,0,.5);
      overflow: auto;
      white-space: nowrap;
      text-align: center;
      font-size: 0;
}
.container::after {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
}
.dialog {
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      font-size: 14px;
      white-space: normal;
}
.contain {
      width: 520px;
      height: 300px;
      background-color: #fff;
      line-height: 300px;
}

三道杠野建、雙圓點

三道杠、雙圓點.png

// 三道杠
.icon_menu {
      display: inline-block;
      width: 14px;
      height: 1px;
      padding: 4px 0px;
      border-top:1px solid;
      border-bottom: 1px solid;
      background-color: currentColor;
      background-clip: content-box;
}
// 雙圓點
.icon_dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      padding: 1px;
      border: 1px solid;
      border-radius: 50%;
      background-color: currentColor;
      background-clip: content-box;
}

文字少時右對齊展示恬叹，文字多時左對齊展示

解決方法：
外層盒子里面加p標(biāo)簽
（1）外層字體左排布候生，里層右浮動字體左排布

  <div className="content"><p>我是數(shù)據(jù)，很長很長很長很長的數(shù)據(jù)</p></div>

  .content {
    text-align: left;

    > p {
      text-align: left;
      float: right;
    }
  }

textarea 適應(yīng)文本高度的文本域

解決方法：
通過scrollHeight用腳本改變文本域高度

  // rows 是默認(rèn)的textarea的高度
  <textarea rows="1" maxLength="40" placeholder="" style={{ height: '0.58rem' }} ref="textareas" onInput={this.textareaChange} />

  textareaChange = () => {
    this.refs.textareas.style.height = 'auto'
    this.refs.textareas.style.height = `${this.refs.textareas.scrollHeight}px`
  }