44 编程题

画一条 0.5px 的线

• 采用 meta viewport 的方式 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
• 采用 border-image 的方式
• 采用 transform: scale() 的方式

如何画一个三角形

三角形原理:边框的均分原理

    div {
      width:0px;
      height:0px;
      border-top:10px solid red; 
      border-right:10px solid transparent; 
      border-bottom:10px solid transparent; 
      border-left:10px solid transparent;
    }

圆？半圆？椭圆？

    div {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 20px;
    }
    .box1 { /* 圆 */
      /* border-radius: 50%; */
      border-radius: 50px;
    }
    .box2 { /* 半圆 */
      height: 50px;
      border-radius: 50px 50px 0 0;
    }
    .box3 { /* 椭圆 */
      height: 50px;
      border-radius: 50px/25px; /* x轴/y轴 */
    }

CSS画圆半圆扇形三角梯形

    div{
        margin: 50px;
        width: 100px;
        height: 100px;
        background: red;
    }
    /* 半圆 */
    .half-circle{
        height: 50px;
        border-radius: 50px 50px 0 0;
    }
    /* 扇形 */
    .sector{
        border-radius: 100px 0 0;
    }
    /* 三角 */
    .triangle{
        width: 0px;
        height: 0px;
        background: none;
        border: 50px solid red;
        border-color: red transparent transparent transparent;
    }
    /* 梯形 */
    .ladder{
        width: 50px;
        height: 0px;
        background: none;
        border: 50px solid red;
        border-color: red transparent transparent transparent;
    }

两栏布局：左边定宽，右边自适应方案

    <div class="box">
      <div class="box-left"></div>
      <div class="box-right"></div>
    </div>

利用float + margin实现

    .box {
     height: 200px;
    }
    
    .box > div {
      height: 100%;
    }
    
    .box-left {
      width: 200px;
      float: left;
      background-color: blue;
    }
    
    .box-right {
      margin-left: 200px;
      background-color: red;
    }

利用calc计算宽度

    .box {
     height: 200px;
    }
    
    .box > div {
      height: 100%;
    }
    
    .box-left {
      width: 200px;
      float: left;
      background-color: blue;
    }
    
    .box-right {
      width: calc(100% - 200px);
      float: right;
      background-color: red;
    }

利用float + overflow实现

    .box {
     height: 200px;
    }
    
    .box > div {
      height: 100%;
    }
    
    .box-left {
      width: 200px;
      float: left;
      background-color: blue;
    }
    
    .box-right {
      overflow: hidden;
      background-color: red;
    }

利用flex实现

    .box {
      height: 200px;
      display: flex;
    }
    
    .box > div {
      height: 100%;
    }
    
    .box-left {
      width: 200px;
      background-color: blue;
    }
    
    .box-right {
      flex: 1; // 设置flex-grow属性为1，默认为0
      background-color: red;
    }

三栏布局：左右两边宽度固定中间自适应

float，float + calc, 圣杯布局（设置BFC，margin负值法），flex

    .wrap {
      width: 100%;
      height: 200px;
    }
    .wrap > div {
      height: 100%;
    }
    /* 方案1：两边使用 float，中间使用 margin */
    .left {
      width: 120px;
      float: left;
    }
    .right {
      float: right;
      width: 120px;
    }
    .center {
      margin: 0 120px; 
    }
    /* 方案2：两边使用 float，中间使用 calc */
    .left {
      width: 120px;
      float: left;
    }
    .right {
      float: right;
      width: 120px;
    }
    .center {
      width: calc(100% - 240px);
      margin-left: 120px;
    }
    /* 方案3：flex实现 */
    .wrap {
      display: flex;
    }
    .left {
      width: 120px;
    }
    .right {
      width: 120px;
    }
    .center {
      flex: 1;
    }
    /* 方案4：grid网格布局 */
    .wrap {
      display: grid;
      width: 100%;
      grid-template-columns: 300px auto 300px;
    }
    .left {
      background: coral;
    }
    .right {
      background: lightblue;
    }
    .center {
      background: #555;
    }
    .left,.right,.center {
      height: 100px;
    }

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

圣杯布局

    <style>
    body{
        min-width: 550px;
    }
    #container{
        padding-left: 200px;
        padding-right: 150px;
    }
    #container .column{
        float: left;
    }
    #center{
        width: 100%;
    }
    #left{
        width: 200px;
        margin-left: -100%;
        position: relative;
        right: 200px;
    }
    #right{
        width: 150px;
        margin-right: -150px;
    }
    </style>
    <div id="container">
        <div id="center" class="column">center</div>
        <div id="left" class="column">left</div>
        <div id="right" class="column">right</div>
    </div>

双飞翼布局

    <style>
    body {
        min-width: 500px;
    }
    #container {
        width: 100%;
    }
    .column {
        float: left;
    }
    #center {
        margin-left: 200px;
        margin-right: 150px;
    }
    #left {
        width: 200px;
        margin-left: -100%;
    }
    #right {
        width: 150px;
        margin-left: -150px;
    }
    </style>
    <div id="container" class="column">
        <div id="center">center</div>
    </div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>

阅读全文