html+css常见布局实现方法

最新推荐文章于 2024-06-25 10:52:00 发布

本心_

最新推荐文章于 2024-06-25 10:52:00 发布

阅读量685

点赞数 1

分类专栏： Web 文章标签： html css3

本文链接：https://blog.csdn.net/weixin_40571331/article/details/107714677

版权

Web 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

前言

这是一篇关于html+css布局的总结博文，这些布局在日常开发中非常常见。本文提供的方法只是其中一种，现实中解决问题的办法往往不止一种，且需要具体问题具体分析。

本文主要讲述的布局

1.字体居中:水平居中、垂直居中；

2.多个div元素水平分布；

3.单个div元素居中：水平居中、垂直居中；

背景是以上所有情况外面都套着一层div，如下：

1.情况一:    
    <div>
        一段文字
    </div>

2.情况二：
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>

3.情况三：
    <div>
        <div></div>
    </div>

字体居中

1.水平居中

重要css代码（代码放的位置请看实例，不一定全部放一起，这里不再详细区分）:

text-align: center;

实例：

<!DOCTYPE html>
<html>

<head>
    <title>布局总结</title>
</head>
<style>
    body {
        background-color: rgb(30, 30, 30);
        color: white;
    }

    .title {
        text-align: center;
    }

</style>

<body>
    <h1 class="title">布局总结</h1>
</body>
</html>

效果：

2.垂直居中

重要css代码:

line-height: 400px；
justify-content: center;

要注意的是，line-height的高度要跟元素div的高度保持一致。

实例：

<!DOCTYPE html>
<html>

<head>
    <title>布局总结</title>
</head>
<style>
    body {
        background-color: rgb(30, 30, 30);
        color: white;
    }

    div {
        width: 400px;
        height: 400px;
        background-color: white;
        border-radius: 5px;
        margin: 0 auto;
        line-height: 400px;
        justify-content: center;
        color: rgb(30, 30, 30);
        font-size: 24px;
    }

</style>

<body>
    <div>
        布局总结
    </div>
</body>
</html>

效果：

如果想让字体垂直、水平居中，当然把以上两部分的代码结合起来就行

实例：

<!DOCTYPE html>
<html>

<head>
    <title>布局总结</title>
</head>
<style>
    body {
        background-color: rgb(30, 30, 30);
        color: white;
    }

    div {
        width: 400px;
        height: 400px;
        background-color: white;
        border-radius: 5px;
        margin: 0 auto;
        line-height: 400px;
        justify-content: center;
        color: rgb(30, 30, 30);
        font-size: 24px;
        text-align: center;
    }

</style>

<body>
    <div>
        布局总结
    </div>
</body>
</html>

效果：

多个div水平分布

重要css代码：

display: flex; 
justify-content: space-around;

flex是一个异常强大的布局，这个工具能使同级的元素按照特定样式实现快速布局，如以上的第二行代码，使得3个元素等分剩余空间，使得他们能够分布在屏幕中间并且间隔相等。

推荐学习链接：Flex 布局教程:语法篇 - 阮一峰

实例：

<!DOCTYPE html>
<html>

<head>
    <title>布局总结</title>
</head>
<style>
    body {
        background-color: rgb(30, 30, 30);
        color: white;
    }

    .layout {
        display: flex; 
        justify-content: space-around;
    }

    .layout-item {
        width: 200px;
        height: 200px;
        color: rgb(30, 30, 30);
        border-radius: 10px;
        text-align: center;
        line-height: 200px;
        justify-content: middle;
        background-color: white;
    }
    

</style>

<body>
    <div class="layout">
        <div class="layout-item">
            布局1
        </div>
        <div class="layout-item">
            布局2
        </div>
        <div class="layout-item">
            布局3
        </div>
    </div>
</body>
</html>

效果：

单个div居中

1.水平居中

重要css代码：

 margin: 0 auto;

margin: 0 auto; 第一个参数设置元素到父级元素上下外边距的距离，其中0代表上下外边距都为0，第二个参数设置元素到父元素左右外边距的距离，其中auto代表左右自动等分剩余空间，既然是等分剩余空间，当然是会使得元素基于父元素水平居中了。可能有人会想把0设置成auto，就能使得元素基于父元素垂直居中，事实上，这个方法行不通，在此背景下，无论把第一个参数设置成什么值，样式都不会有任何变化。

实例：

<!DOCTYPE html>
<html>

<head>
    <title>布局总结</title>
</head>
<style>
    body {
        background-color: rgb(30, 30, 30);
        color: white;
    }

    .layout {
        width: 800px;
        height: 800px;
        background-color: white;
        border-radius: 10px;
        margin: 50px auto;
    }

    .layout-item {
        width: 200px;
        height: 200px;
        background-color: rgb(30, 30, 30);
        border-radius: 10px;
        text-align: center;
        line-height: 200px;
        justify-content: middle;
        color: white;
        margin: 0 auto;
    }
    

</style>

<body>
    <div class="layout">
        <div class="layout-item">
            布局
        </div>
    </div>
</body>
</html>

效果：

2.垂直居中

重要css代码：

display: flex;
align-items: center;

align-items: center;意思是将flex布局下的所有元素垂直居中。网上会提供更多的方法，其中比较多人提到的是利用绝对定位和相对定位来使得元素居中，那种方法会更加灵活，但如果只是简单想要使得元素居中，本文提供的方法更为简洁一些。

实例：

<!DOCTYPE html>
<html>

<head>
    <title>布局总结</title>
</head>
<style>
    body {
        background-color: rgb(30, 30, 30);
        color: white;
    }

    .layout {
        width: 800px;
        height: 800px;
        background-color: white;
        border-radius: 10px;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }

    .layout-item {
        width: 200px;
        height: 200px;
        background-color: rgb(30, 30, 30);
        border-radius: 10px;
        text-align: center;
        line-height: 200px;
        justify-content: middle;
        color: white;
        margin: 0 auto;
    }
    

</style>

<body>
    <div class="layout">
        <div class="layout-item">
            布局
        </div>
    </div>
</body>
</html>

效果：

本心_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html+css常见布局实现方法

前言这是一篇关于html+css布局的总结博文，这些布局在日常开发中非常常见。本文提供的方法只是其中一种，现实中解决问题的办法往往不止一种,需要具体问题具体分析。本文主要讲述的布局1.字体居中:水平居中、垂直居中；2.多个div元素水平分布；3.单个div元素居中：水平居中、垂直居中；背景是以上所有情况外面都套着一层div，如下：1.情况一: <div> 一段文字 </div>2.情况二： &l..
复制链接

扫一扫

专栏目录