CSS盒子模型

FJ70940927

已于 2024-07-24 08:05:42 修改

阅读量333

点赞数 5

分类专栏： Web前端文章标签： css 前端

于 2024-07-12 01:31:59 首次发布

本文链接：https://blog.csdn.net/FJ70940927/article/details/140365575

版权

Web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

什么是盒子模型？

html各个元素类似一个个盒子里面的物品，像盒子一样，把各种html元素抱起来，将hrml元素进行封装以便网页布局与排版。下图就是一个盒子模型的示意图：

组成部分

context

为上图蓝色部分为内容区域，可以为图片、标题、表单等等。大小可以用属性width和height改变。

padding

绿色部分，也就内边距，是内容区域与边框之间的距离与边框保持距离。

border

浅橘色部分，也就是边框

margin

深橘色部分，也是外边框

基本属性

1.宽高

每个盒子都需要一个宽高数值，如果不给的话你会发现这个盒子并不会显示出来。添加宽高的属性名称是width height。以下为常用的单位

像素（px）：像素是最常用的单位，表示屏幕上的一个像素点。它是固定的，具有确定的大小。例如，width: 200px;将元素的宽度设置为200个像素。

百分比（%）：百分比单位相对于父元素的尺寸进行计算。例如，width: 50%;将元素的宽度设置为父元素宽度的50%。

2.背景颜色

相当于给盒子添加颜色。对应的属性是：background-color ，可根据代码提示进行使用。

3.边框

画一个正方形，这个黑色的线条就是边框，那么这个边框由什么组成呢？首先必不可少的就是大小，没有大小的物品那还存在吗？第二个就是要他的样式，这条黑色的线可以是实线，也可以是虚线，也可以是一些小点点组成的，还能是两条线组成。最后这个边框还需要一个颜色，不然默认为主题颜色。

大小：通常为1px

样式：

none: 无边框样式，不显示边框。
solid: 实线边框样式，使用实线绘制边框。
dashed: 虚线边框样式，使用间隔的短横线绘制边框。
dotted: 点线边框样式，使用小圆点绘制边框。
double: 双线边框样式，使用两条实线绘制边框

颜色可根据代码提示去输入

边框一般可以使用复合形式去描绘

4.内边距

内边距就是边框与区域内容的距离

5.外边距

内外边距的书写方法：

内外边距有上下左右

通常使用方法为自适应居中

简单演示

<!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>
        .box1{
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 1px solid red;

        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid pink;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
</body>
</html>