初级前端的自我救赎【HTML+CSS篇】：7.盒子模型

最新推荐文章于 2024-09-10 22:58:41 发布

努力更加努力

最新推荐文章于 2024-09-10 22:58:41 发布

阅读量75

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44088319/article/details/120496223

版权

本文介绍了CSS中的盒子模型，包括边框、内边距、外边距等属性，并通过实例展示了如何设置`box-sizing`来改变元素尺寸计算方式。通过`margin: 0 auto`实现元素水平居中。此外，还提供了盒模型的示意图，帮助读者深入理解这一核心布局概念。

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

将html元素看做是盒子，来实现的网页布局

padding:border距离内容的距离为padding（好好悟一下）

有关盒子模型的css属性
	边框：border-width;border-style;border-color;
	外边距：margin(-top\-right\-bottom\-left)
	内边距：padding(-top\-right\-bottom\-left)

默认情况：元素宽度和高度计算
    元素的实际宽度 = border-left + border-right + width + padding-left + padding-right
    元素的实际高度 = border-top + border-bottom + width + padding-top + padding-bottom

设置box-size:border-box;后
    元素的实际宽度 = width
    元素的实际高度 = height

<!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>Document</title>
    <style>
        /* 元素边距初始化 */
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /* margin-left: 100px;
            margin-top: 50px; */
            /* margin: 50px 0 0 100px; */
            /* 四个值时为上右下左，两个值为 上下 左右 */
            margin: 100px 50px;
            padding-top: 50px;
            padding-left: 50px;
            /* padding:border距离内容的距离为padding（好好悟一下） */
            box-sizing: border-box;
            /* 设置box-sizing:border-box后 实际宽度为width 元素实际高度=height  */
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="">test</a>
    </div>
</body>
</html>