HTML CSS使用小记

左右居中

display: block;
margin: 0 auto;

垂直居中

height: 200px;
line-height: 200px;

/*flex 布局*/
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;

防止图片加载过慢完成后元素抖动 第一种兼容性更好

width: 100%;
height: 0;
padding-bottom: 25%;

width: 100%;
height: 25vw;

字显示不全，最后跟三个小点

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

若干元素垂直居中

display: flex;
flex-direction: column;
justify-content: center

svg实现波浪效果

<svg class="wave"
         width="1600"
         height="100"
         viewBox="0 0 1600 100"
         fill="none" xmlns="http://www.w3.org/2000/svg"
    >
      <path fill="white"
            d="M 1600 164.648 V 66.4428 C 1600 66.4428 1198.64 30.0805 758.025 33.6272 C 317.412 37.1743 0 43.9593 0 43.9593 V 164.648 H 1600 Z"
      >
        <animate repeatCount="indefinite"
                 fill="freeze"
                 attributeName="d"
                 dur="6s"
                 values="M1600 156V73.5801C1600 73.5801 1279 -53.8561 800 26.7048C321 107.266 0 3.82945 0 3.82945V156H1600Z;M1600 157V80.5802C1600 80.5802 1202 105 800 27.7048C398 -49.5902 0 64.8295 0 64.8295V157H1600Z;M1600 180.106V53.6857C1600 53.6857 1055 180.106 683 46.0001C311 -88.1054 0 115.686 0 115.686V180.106H1600Z;M1600 156V73.5801C1600 73.5801 1279 -53.8561 800 26.7048C321 107.266 0 3.82945 0 3.82945V156H1600Z"
        >
        </animate>
      </path>
    </svg>

padding会把盒子撑大，解决方法

box-sizing: border-box;