如何用CSS写一个全屏的“品”字

最新推荐文章于 2024-03-21 21:10:58 发布

sleepwalker_1992

最新推荐文章于 2024-03-21 21:10:58 发布

阅读量412

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80880746

版权

CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .box1{
            width: 50%;
            height: 50%;
            background-color: #000;
            margin: 0 auto;
        }
        .box2{
            width: 50%;
            height: 50%;
            background-color: #ccc;
            float: left;
        }
        .box3{
            width: 50%;
            height: 50%;
            background-color: #bbb;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

注意：设置高度、宽度百分比时,百分比是相对于父元素来确定，承接父元素的百分比是相对于浏览器屏幕大小来确定,必须给html,body设置显性百分比100%。

可以不设置html,body的宽度显性百分比100%，就可以用百分比设置body里的元素，默认body占满浏览器的宽；

但是必须设置html,body的高度显性百分比100%，才能用百分比设置body里的元素，否则元素百分比设置高度是0，因为默认的body的高为零。