作者
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script language),指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序(比如浏览器)的“脚本”。 JavaScript 只合适嵌入更大型的应用程序环境,去调用宿主环境提供的底层 API。 目前,已经嵌入 JavaScript 的宿主环境有多种,最常见的环境就是浏览器,另外还有服务器环境,也就是 Node 项目。
目录
周六亲手写的两列布局
落霞与孤鹜齐飞 7月17日 6 0 0 6 0 0

两列布局

<div className="column2">
    <div className="left">left</div>
    <div className="right">right</div>
</div>
左边定宽,右边自适应

浮动宽度 + 正常流左外边距

.column2 {
  border: 1px solid #00f;
  .left {
    float: left;
    width: 200px;
    background-color: #f00;
  }
  .right {
      margin-left: 200px;
    background-color: #0f0;
  }
}

自适应的绝对定位

.column2 {
  border: 1px solid #00f;
  position: relative;
  .left {
    width: 200px;
    background-color: #f00;
  }
  .right {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    background-color: #0f0;
  }
}

最好用的flex

.column2 {
  display: flex;
  flex-direction: row;
  .left {
    width: 200px;
    background-color: #f00;
  }
  .right {
    flex: 1;
    background-color: #0f0;
  }
}
右边定宽,左边自适应

左右浮动,负数外边距抵宽度

.column2 {
  border: 1px solid #00f;
  overflow: hidden;
  .left {
    float: left;
    width: 100%;
    margin-right: -200px;
    background-color: #f00;
  }
  .right {
    float: right;
    width: 200px;
    background-color: #0f0;
  }
}

定位

.column2 {
  border: 1px solid #00f;
  position: relative;
  .left {
    position: absolute;
    left: 0;
    right: 200px;
    background-color: #f00;
  }
  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    background-color: #0f0;
  }
}

最好用的flex

.column2 {
  display: flex;
  flex-direction: row;
  .left {
    flex: 1;
    background-color: #f00;
  }
  .right {
    width: 200px;
    background-color: #0f0;
  }
}
扫码分享到移动端
0 条评论
快来写一写读后感吧~
参与评论互动
登录即可参与评论互动哦