Html布局代碼集合

值得參考的網站

http://doc.bufanui.com/docs/beAdvance/offset

布局初始化

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
  }
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body{
    background:linear-gradient(135deg,#eebd89,#d13abd);
    font-size: 12px;
}

 

網格布局

  main{
    width: 100vw;/*vw，vh：視口單位*/
    min-height: 100vh; /*滾動條，背景容器高度固定*/
    display: grid;/*flex布局也行*/
    align-items: center; /*垂直對齊*/
    justify-items: center;/*水平對齊*/
    background: rgb(203,210,240);
  }

彈性Flex布局

  .filters{
    display: flex;
    margin: 24px 2px;
    color: #c0c2ce;
    font-size: 14px;
  }
  .filters .filter{
    margin-right: 14px;
    transition: 0.8s;/*過渡時間*/
  }
  .filters .filter.active{
    color: #6b729c;
    transform: scale(1.2);/*放大1.2倍*/
  }

彈性Flex布局：均勻排列每個元素，首個元素放置於起點，末尾元素放置於終點 

display: -webkit-flex; /* Safari */
-webkit-justify-content: space-between; /* Safari 6.1+ */
display: flex;
justify-content: space-between;
align-items: center;

 

div居中布局

position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

 兩個div水平布局最左最右且水平

display: flex;
    justify-content: space-between;

align-items: center;

div使用display=flex布局后，子元素占滿剩余空間

https://blog.csdn.net/lxn111111/article/details/117840042

https://segmentfault.com/q/1010000024574336?utm_source=tag-newest

-webkit-box-flex: 1;
-webkit-flex: 1; 
flex: 1; 

flex：1即為flex-grow：1，經常用作自適應布局，將父容器的display：flex，側邊欄大小固定后，將內容區flex：1，內容區則會自動放大占滿剩余空間。

列表布局

  .todo-list{
    display: grid;
    row-gap: 14px;
  }
  .todo-list .todo-item{
    background: white;
    padding: 16px;
    border-radius: 8px;
    color: #626262;
  }
  .todo-item label{
    position: relative;
    display: flex;
    align-items: center;
  }
/*左邊按鈕實現效果：點擊再點擊（input組件）不同背景效果*/

 .todo-item label span.check-button{ position: absolute; top: 0;
  } .todo-item label span.check-button::before, .todo-item label span.check-button::after{ content: ""; display: block; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  } .todo-item label span.check-button::before{ border: 1px solid #b382f9;
  } .todo-item label span.check-button::after{ transition: 0.4s; background: #b382f9; transform: translate(1px,1px) scale(0.8); opacity: 0;
  } .todo-item input{ margin-right: 16px; opacity: 0; /*將input的方框隱藏*/
  } .todo-item input:checked + span.check-button::after{ /*如果checked，后面的span.check-button：相鄰選擇器*/ opacity: 1;/*完全不透明*/
  }

 

input設置

flex: 1;
          margin: 0 10px;
          outline: none;
          background: transparent;
          border: none;
          border-bottom: 1px solid #66858c;
          padding: 5px 10px;
          color: #cccccc;

一個input和一個按鈕的設置

  .input-add{
    position: relative; /*按鈕需要絕對定位*/
    display: flex;
    align-items: center;
  }
  .input-add input{
    padding: 16px 52px 16px 18px;
    border-radius: 48px;
    border: none;
    outline: none;
    box-shadow: 0px 0px 24px rgba(0,0,0,0.08);
    width: 100%;
    font-size: 16px;
    color: #626262;
  }
  .input-add button{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(#c0a5f3,#7f95f7);
    border: none;
    outline: none;

    color: white;
    position: absolute;
    right: 0px;

    cursor: pointer;
  }
/*+號實現*/
  .input-add .plus{
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(#fff,#fff), linear-gradient(#fff,#fff);
    background-size: 50% 2px, 2px 50%;
    background-position: center;
    background-repeat: no-repeat;
  }

溢出滾動

height: 450px;
      overflow: scroll;

 字體放大實現

transform: scale(1.2);/*放大1.2倍*/

 input組件設置刪除線和斜體

.todo-item.done label{
  text-decoration: line-through;
  font-style: italic;
}