前端入门篇之div

Posted 2020-11-28 webshare2020

由于之前没有做过前端的开发工作，在现在的前端开发工作中遇到许多坑，有关于javascript的，有关于css样式的，所以想在这里总结一下。文章的结构的可能会比较混乱，同一篇文章可能会有多次的修改。

div显示在同一行中

div是块级元素，默认是不会显示在同一行的，但是可以通过如下方式，让div元素显示在同一行中。

使用float样式

    .left{
        float: left;
    }
    .right{
        float: right;
    }

    <div>
        <div class="left">child1</div>
        <div class="left">child2</div>
        <div class="right">child3</div>
        <div class="right">child4</div>
    </div>

使用inline

    .inline{
      display:inline-block;
    }
    
    <div>
      <div class=‘inline‘>inline1</div>
      <div class=‘inline‘>inline2</div>
    </div>

使用inline方式存在一个问题，在预览的时候会发现两个元素(例如上面的inline1和inline2)之间会存有留白，这个留白是由于两个<div>之间的空白字符造成的(包括空格、Tab和换行)。网上有很多方式可以消除这个留白，在这里就不详细表述了。

使用flex

本人使用flex方式还没有成功，待测试成功之后再来补充...

reactjs行内样式

这个很简单，但是很多初学者会在这里踩坑。我根据baidu搜索出来的方法在react中使用行内样式，实际并不成功。我不清楚是什么原因，或许是版本不同？？？不过，我下面的内容都是亲测可用的。

• 普通html

<div style="background-color:red;width:100%;height:400px"></div>

• reactjs

      <div
        id="explore-container"
        className="container-fluid"
        style={{
          height: this.state.height,
          overflow: ‘hidden‘,
        }}
      >
      </div>

注意哦，‘hidden‘使用的是单引号

div的flex样式