CSS个人学习笔记（day 6）

loney_k

已于 2022-05-20 10:13:17 修改

阅读量1.1k

点赞数 15

文章标签： css

于 2022-05-01 11:35:31 首次发布

本文链接：https://blog.csdn.net/loney_k/article/details/124476925

版权

这篇博客详细介绍了CSS中的盒子模型，包括内容区域、内边距、边框和外边距等概念，以及它们在浏览器中的表现。讲解了如何计算盒子的实际大小、如何设置边框和内边距，以及内减模式、外边距合并和塌陷问题的解决方法。

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

十、盒子模型

10.1.1 盒子模型的介绍

盒子的概念

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

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

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

<style>
       /* 纸箱子,填充泡沫 */
       div {
           width: 300px;
           height: 300px;
           background-color: pink;
           /* 边框线 == 纸箱子 */
           border: 1px solid #000;
           /* 内边距 == 填充泡沫: 出现在内容和盒子直接边缘 */
           padding: 20px;

           /* 外边距：出现在两个盒子之间,出现在盒子的外面 */
           margin: 50px;
        }
</style>