CSS让一个盒子div永远在视图界面的最底部

让一个盒子div存在于body大盒子的最底部,直接用**绝对定位position: absolute;**就行

htlm部分

<body>
     
    <footer>
        <a href=""><img src="./imgaes/index.png" alt="">a>
        <a href=""><img src="./imgaes/sorts.png" alt="">a>
        <a href=""><img src="./imgaes/cart.png" alt="">a>
        <a href=""><img src="./imgaes/login.png" alt="">a>
    footer>
body>

css样式部分

<style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 底部样式 */
        footer {
            display: flex;
            position: absolute;
            /* 和body这个盒子的底部距离为0px */
            bottom: 0px;
            width: 100%;
        }

        footer a{
            width: 25%;
        }
        footer img {
          width: 100%;
        }
    style>

这样就完成了
效果样式
CSS让一个盒子div永远在视图界面的最底部_第1张图片

你可能感兴趣的:(css,前端,css3)