css盒子模型

SakitamaX

于 2024-07-10 16:57:49 发布

阅读量272

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/SakitamaX/article/details/140301509

版权

一.概念

1.页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局

2.浏览器在染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子

二.组成部分

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

盒子模型
CSS 中规定每个盒子分别由: 内容区域 (content) 、内边距区域 (padding) 、边框区域(border) 、外边距区域(margin)构成，这就是盒子模型

三.元素的宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div{
        width: 200px;
        border: 10px solid red;
        padding: 10px;
        margin: 10px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行出的盒子为：