css盒子模型

最新推荐文章于 2024-09-14 17:54:00 发布

qq_37694877

最新推荐文章于 2024-09-14 17:54:00 发布

阅读量123

点赞数 1

分类专栏： css html 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_37694877/article/details/124254305

版权

html 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

本文通过一个具体的HTML代码示例，展示了盒子模型在网页布局中的应用。内容包括：盒子模型的四部分（边框、内容、外边距、内边距）的设置，以及如何使用CSS调整元素的大小和位置。示例中，我们创建了一个包含图片、评价和产品信息的盒子结构，通过调整不同部分的属性，实现了内容展示的美观和清晰。

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

盒子模型有四个部分

边框
内容
外边框
内边框

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            background-color: darkgray;
        }
        * {
            margin:0;
            padding:0;
        }
        .box{
            width:234px;
            height:400px;
            background-color:white;
            margin:100px auto;
        }
        .box img{
            width:100%;
        }
        .review {
            height:40px;
            font-size:14px;
            padding:0 28px;
            margin-top:20px;
        }
        .appraise {
            font-size: 12px;
            color: #dfdcda;
            margin-top:20px;
            padding:0 28px;
        }
        .info {
            font-size: 14px;
            margin-top: 10px;
            padding: 0 28px;
        }
        .info h4 {
            display: inline-block;
            font-weight:400;
        }
        .info span{
            color:darkgoldenrod;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="xiaomi2.png" alt="Alternate Text"/>
        <p class="review">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
        <div class="appraise">评价都不错</div>
        <div class="info">
            <h4>平衡车啦啦</h4>
            |<span>喜欢</span>
        </div>
    </div>
</body>
</html>