典型布局随记

左边定宽，右边自适应

左边定宽，右边自适应.png

• 左边定宽，右边块状加margin-left：定宽。

<div class="parent">
   <img src="xxx" width=50 height=50 />
   <span>大家好我是自适应...</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: - 内层宽度 / 2;
      margin-top: - 内层高度 / 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;
}

方法很多，根据不同情况选择。

蒙板

蒙板.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标签
（1）外层字体左排布，里层右浮动字体左排布

  <div className="content"><p>我是数据，很长很长很长很长的数据</p></div>

  .content {
    text-align: left;

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

textarea 适应文本高度的文本域

解决方法：
通过scrollHeight用脚本改变文本域高度

  // rows 是默认的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`
  }