强化（一）解决body和div全屏填充的问题

强化（一）解决body和div全屏填充的问题

目录

问题

  • 在设置body全屏填充的时候（直接设置div为100%）：body未填满或body填满过头

  • 在设置body里的div全屏填充的时候（直接设置div为100%）：div未填满或div填满过头（出现滚动条）或div偏离方向

解决方式

下面两步都要做，不能只做一步

  1. 将全局的margin和padding都设置为0，防止不同浏览器默认值不同而造成显示效果出现误差

    • “*”代表全局
    *{
    margin: 0;
    padding: 0;
}

  2. 将html和body的高和宽都设置为100%（必须都设置）

    html,body{
    width: 100%;
    height: 100%;
}

举例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="./css/主页.css" type="text/css">
</head>
<body>
    <div class="div1"></div>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
body{
    background-image: url(../picture/背景图1.jpg);
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no;
}
.div1{
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.169);
}
posted @ 2022-06-27 15:59  史小鹏  阅读(729)  评论(0)  编辑  收藏  举报