CSS盒子模型简解

最新推荐文章于 2023-10-10 22:48:02 发布

皮皮伍同学

最新推荐文章于 2023-10-10 22:48:02 发布

阅读量112

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/CYW2014_HUST/article/details/119485571

版权

这篇博客适合Java后端开发人员对CSS盒子模型有个简单的了解，不建议前端开发方向的程序员阅读。

文章目录

1、入门

所有HTML元素都可以看作成一个盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其他元素和周围元素边框之间的空间放置元素。

下面的图片说明类盒子模型（Box Model）：

在这里插入图片描述
说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

入门实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            margin: 25px;
            border: 25px solid green;
            padding: 25px;
            background: #aed598;
        }
    </style>
</head>
<body>
    <div>
        我爱Java
    </div>
</body>
</html>

2、盒子模型-边框

边框的宽度 border-width 可以用来指定四个方向的边框的宽度。值的情况有以下几种：

四个值：上、右、下、左
三个值：上、左右、下
两个值：上下、左右
一个值：上下左右

除了border-width还有一组 border-xxx-width,xxx可以是 top right bottem left，用来单独指定某一个边的宽度。

边框的颜色 border-color 用来指定边框的颜色，同样可以分别指定四个边的边框

边框的样式 border-style 用来指定边框的样式：

solid表示实线
dotted 点状虚线
dashed 虚线
double 双线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: greenyellow;

            border-width: 10px 10px 10px 10px;
            border-color: orange red yellow green;
            border-style: solid;

        }
    </style>
</head>
<body>
    <div class="box1">
        我爱Java
    </div>
</body>
</html>

3、盒子模型-内边距

内边距（padding）：内容区和边框之间的距离。一共有四个方向的内边距：

padding-top
padding-right
padding-bottem
padding-left

内边距的设置会影响到盒子的大小

背景颜色会延伸到内边距上

一个盒子的可见框的大小，由内容区内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: greenyellow;
            border: 10px orange solid;

            padding-top: 100px;
        }

        
    </style>
</head>
<body>
    <div class="box1">
        我爱Java
    </div>
</body>
</html>

4、盒子模型-外边距

外边距不会影响盒子可见框的大小，但是会影响盒子的位置。

盒子一共有四个方向的外边距：

margin-top：上外边距，设置一个正值，元素会向下移动；
margin-right：默认情况下设置margin-right不会产生任何效果；
margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动；
margin-left：左外边距，设置一个正值，元素会向右移动

margin也可以设置负值，如果是负值则元素会向相反的方向移动。

元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距则会移动其他元素。

皮皮伍同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型简解

这篇博客适合Java后端开发人员对CSS盒子模型有个简单的了解，不建议前端开发方向的程序员阅读。文章目录1、入门2、盒子模型-边框3、盒子模型-内边距4、盒子模型-外边距1、入门所有HTML元素都可以看作成一个盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其他元素和周围元素边框之间的空间放置元素。下面的图片说明类盒子模型（Box Model）：说明：Mar
复制链接

扫一扫