javascript dom布局 html div布局代码

值得参考的网站

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布局后，子元素占满剩余空间

-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;
}