CSS盒子模型

最新推荐文章于 2024-10-02 14:40:17 发布

只怪星光太耀眼

最新推荐文章于 2024-10-02 14:40:17 发布

阅读量1.5k

点赞数

分类专栏：学习学习再学习

本文链接：https://blog.csdn.net/yjt13/article/details/80644434

版权

学习学习再学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

小编在学习过程中了解到了CSS的盒子模型，于是去网上搜索了一下相关的知识，以下是小编学习过后所总结的内容。

什么是盒子模型？

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型，HTML中的每个元素都被描绘成盒子，这些盒子通过一个模型来描述其所占空间，通常用四个边界元素来描述，分别为margin（外边距），border（边框，围绕在内边距和内容外的边框），padding（内边距），content（内容区域，显示文本和图像）
这里写图片描述

盒子模型能做什么？

盒子模型被用来规划和描述HTML网页中各个元素的相对位置，以此设计出我们想要的界面效果。

如何实现？

通过对各个边界元素设定不同的属性和值来进行盒子的调整，以下是盒子实例。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style>
div {
    background-color: lightgrey;
    width:350px;
    height:60px;
    border: 40px solid lightgreen;
    padding: 30px ;
    margin: 20px;
}
</style>
</head>
<body>
<div>这里是盒子内的实际内容。有40px 绿色边框,30px 内间距，20px 外间距,本文为content块，宽为300px，高为60px。</div>
</body>
</html>

效果
这里写图片描述

属性

margin（外边距）没有背景颜色，是完全透明的，可以单独改变上，下，左，右各个边距，也可以一次性改变所有边距；
border（边框，围绕在内边距和内容外的边框）允许指定样式和颜色，可以单独指定上，下，左，右各个边框的直边或者圆角，也可以指定虚实，颜色
padding（内边距）指定的是边框和内容之间的空间，可以单独指定上，下，左，右各个内边距的大小来调整内容框的位置