CSS布局篇

1.单行时居中，多行时左对齐

原理：父元素设置居中对齐，子元素设置为inline-block元素，当单行时，整个子元素会被居中，子元素内部的文本节点不够一行，不会 显示出左对齐，当超过一行的时候，子元素的左对齐显示出效果

    <div style="text-align: center;width:200px;background-color: burlywood;">
      <div style="text-align: left;display: inline-block;">
        速度速度胜多负少
      </div>
    </div>

360截图20191230224305464.jpg
360截图20191230224357039.jpg

2. 左边固定，右边自适应布局

这个很简单，左边元素向左浮动，设置宽高100px,右边block元素设置margin-left:100px即可

    <div style="background-color: cornflowerblue;">
        <div style="float:left;width:100px;height:100px;background-color: chartreuse;"></div>
        <div style="margin-left:100px;height:100px;"></div>
      </div>

360截图20191230225714160.jpg

3. 2个元素实现十字布局

这里需要用到flex布局,父子元素宽高数值反过来，父元素设置display:flex;然后主轴和纵轴设置居中对齐，item再设置缩小比例 flex-shrink:0

    <div style="width:100px;height:400px;margin-left:200px;
background-color: darkgoldenrod;
display:flex;align-items: center;justify-content: center;">
      <div style="width:400px;height:100px;background-color: cyan;flex-shrink:0;"></div>
    </div>

360截图20191230225536656.jpg