CSS保姆级教程（三）(常用的DIV+CSS布局类型）

悟空

已于 2022-03-16 16:20:18 修改

阅读量945

点赞数 9

分类专栏： # 网页基础文章标签： css 前端 html

于 2022-02-24 15:17:58 首次发布

本文链接：https://blog.csdn.net/m0_50991874/article/details/123112396

版权

本文详细介绍了CSS中常见的DIV+CSS布局类型，包括一列固定宽度、两列固定宽度、三列浮动中间宽度自适应以及三行两列居中高度自适应的布局技巧，通过实例代码解析了布局实现方法。

摘要由CSDN通过智能技术生成

📒博客主页：悟空的博客主页
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
🙉作者简介：一只还在学本领的石猴 🐵
👀关注公众号【悟空信条】，简历模板、学习资料、面试题库等通通分享🎁
🙏作者水平很有限，如果发现错误，一定要及时告知作者哦！感谢感谢！🚤

已完结：《CSS看着一篇就够了》

📌导航小助手📌

5.常见的DIV＋CSS布局类型

5.常见的DIV＋CSS布局类型

DIV＋CSS布局是当前网页布局中最流行的类型之一。

5.1 DIV（HTML标签）

DIV是一个放置内容的容器，用于大面积、大区域的块状排版，样式需要编写CSS来实现。听不懂没关系，直接看下面的例子
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局</title>
    <style>
        div{
    
            width: 15em;
            border: 1px solid #333;
            box-shadow: 8px 8px 5px #444;
            padding: 8px 12px;
            background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
        }
    </style>
</head>
<body>
<div >
    <h3>这个在容器里面</h3>
    <h3>这一段也在容器里</h3>
</div>
</body>
</html>

效果图：

这里我们用

标签创了一个容器，并用了一个CSS样式使得容器里面的字体全为红色，是不是还不够明显，现在我们用CSS把容器加上边框
代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>页面布局</title>
        <style>
            div{
    
                width: 15em;
                border: 1px solid #333;
                box-shadow: 8px 8px 5px #444;
                padding: 8px 12px;
                background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
            }
        </style>
    </head>
    <body>
    <div >
        <h3>这个在容器里面</h3>
        <h3>这一段也在容器里</h3>
    </div>
    </body>
</html>