Html & CSS - 小技巧 - 《前端知识小记》

1px
三角形
三列布局

1px

.setBorderAll{
     position: relative;
       &:after{
           content:" ";
           position:absolute;
           top: 0;
           left: 0;
           width: 200%;
           height: 200%;
           transform: scale(0.5);
           transform-origin: left top;
           box-sizing: border-box;
           border: 1px solid #E5E5E5;
           border-radius: 4px;
      }
    }

三角形

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>三角形</title>
    <style>
      .box {
        width: 0px;
        height: 0px;
        border: 50px solid;
        border-color: #1b93fb #1bfb24 #efad48 #ef4848;
      }
      .triangle {
        height: 0;
        width: 0;
        color: #fff;
      }
      .bottom {
        border-top: 100px solid #000;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
      }
      .left {
        border-right: 100px #000 solid;
        border-top: 50px transparent solid;
        border-bottom: 50px transparent solid;
      }
      .right {
        border-left: 100px solid #000;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
      }
      .top {
        border-bottom: 100px solid #000;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
      }
    </style>
  </head>
  <body>
    <h3>原理</h3>
    <h5>
      如图有四个三角形，将其他三个设为不可见即可实现三角形
    </h5>
    <div class="box">
    </div>
    <hr />
    <h3>下</h3>
    <div class="triangle bottom"></div>
    <hr />
    <h3>左</h3>
    <div class="triangle left"></div>
    <hr />
    <h3>右</h3>
    <div class="triangle right"></div>
    <hr />
    <h3>上</h3>
    <div class="triangle top"></div>
    <hr />
  </body>
</html>

三列布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>三列水平居中</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        border: 0;
      }
      .layout{
        height: 100px;
      }
      .layout .main {
        height: 100px;
        background: #eee;
      }
      .layout .left {
        width: 300px;
        height: 100px;
        background: #00B7FF;
      }
      .layout .right {
        width: 100px;
        height: 100px;
        background: #666;
      }
      hr {
        padding: 12px;
        margin-bottom: 12px;
        border-bottom: 3px solid #eee;
      }
    </style>
  </head>
  <body>
    <h2>常见布局</h2>
    <h3>左右固定，中间自适应</h3>
    <!-- flexbox布局 -->
    <h4>1.flexbox布局</h4>
    <div class="layout flex">
      <style>
        .layout.flex {
          display: flex;
          flex-wrap: nowrap;
        }
        .flex .main {
          flex: 1;
        }
      </style>
      <div class="left">left</div>
      <div class="main">
        <h2>flex解决方案</h2>
        1.这是三栏布局的浮动解决方案；
        2.这是三栏布局的浮动解决方案；
        3.这是三栏布局的浮动解决方案；
        4.这是三栏布局的浮动解决方案；
        5.这是三栏布局的浮动解决方案；
        6.这是三栏布局的浮动解决方案；
      </div>
      <div class="right">right</div>
    </div>
    <hr>
    <!-- 绝对定位 -->
    <h4>2.绝对定位</h4>
    <div class="layout position">
      <style>
        .layout.position {
          position: relative;
        }
        .position .left {
          position: absolute;
          top: 0;
          left: 0;
        }
        .position .main {
          padding-left: 300px;
          padding-right: 100px;
          /**
          position: absolute;
          top: 0;
          left: 300px;
          right: 100px;
          */
        }
        .position .right {
          position: absolute;
          top: 0;
          right: 0;
        }
      </style>
      <div class="left">left</div>
      <div class="main">
        <h2>position解决方案</h2>
        1.这是三栏布局的浮动解决方案；
        2.这是三栏布局的浮动解决方案；
        3.这是三栏布局的浮动解决方案；
        4.这是三栏布局的浮动解决方案；
        5.这是三栏布局的浮动解决方案；
        6.这是三栏布局的浮动解决方案；
      </div>
      <div class="right">right</div>
    </div>
    <hr>
    <!--浮动布局  -->
    <h4>3.浮动布局</h4>
    <div class="layout float">
      <style>
        .layout.float {
          overflow: hidden;
          clear: both;
        }
        .float .left {
          float: left;
        }
        .float .main {
        }
        .float .right {
          float: right;
        }
      </style>
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="main">
        <h2>float解决方案</h2>
        1.这是三栏布局的浮动解决方案；
        2.这是三栏布局的浮动解决方案；
        3.这是三栏布局的浮动解决方案；
        4.这是三栏布局的浮动解决方案；
        5.这是三栏布局的浮动解决方案；
        6.这是三栏布局的浮动解决方案；
      </div>
    </div>
    <hr>
    <!-- 网格布局 -->
    <h4>4.网格布局</h4>
    <div class="layout grid">
      <style>
        .layout.grid {
          display: grid;
          grid-template-rows: 100px;
          grid-template-columns: 300px auto 100px;
        }
        .grid .left {
        }
        .grid .main {
        }
        .grid .right {
        }
      </style>
      <div class="left">left</div>
      <div class="main">
        <h2>grid解决方案</h2>
        <code>grid-template-rows: 100px; // 1行，每行高度100px</code>
        <br />
        <code>grid-template-columns: 300px auto 100px; // 3列，每列宽度300px 自动 100px</code>
        <br>
        <code>auto</code> 关键字表示由浏览器自己决定长度。
      </div>
      <div class="right">right</div>
    </div>
    <hr>
    高度未知的时候，只有flex和table可以使用
    <br>
    position会脱离文档流,
    高度变化了，为0了
    <br>
    float会脱离文档流
    内容往左排了
    <br>
    grid高度需要重新设置
    <br>
    </body>
</html>