前端自学笔记（四） CSS

最新推荐文章于 2024-07-17 10:09:06 发布

月泰

最新推荐文章于 2024-07-17 10:09:06 发布

阅读量126

点赞数

文章标签： css

本文链接：https://blog.csdn.net/MVP_yuetai/article/details/116585810

版权

CSS

这几天住院，耽误了几天，没怎么学习，趁现在周一重新开始学习。再过两天就要手术了，术后估计是没啥机会的。

对于CSS的一些属性用法之类的，这里就不过多叙述了，之前也学过该怎么用，忘记了的再去看看就行。现在主要是记一下CSS很重要的一个思维模型：盒子模型

CSS盒子模型

CSS盒子模型就是在CSS技术中所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。它包括：外边距（margin)、边框（border）、内填充（padding）和实际内容（content）。

举个例子：在日常生活中，我们经常能看到一些精美的包装盒

在这里插入图片描述
我们可以把这个小月饼盒看作是页面中的一个元素，比如div元素，里面的月饼就是盒子模型的实际内容（content），这个实际内容可以是文字，也可以是图片，还可以是其他的标签元素。

我们把“月饼盒到月饼之间的距离”叫盒子模型的内填充，在CSS的样式中叫padding。

在这里插入图片描述
而“月饼盒与另一个月饼盒之间的距离”叫盒子模型的外边距，在CSS中的样式中叫margin。

在这里插入图片描述
月饼盒最外层，也就是下图中黄色的部分叫盒子模型的边框，在CSS中的样式中叫border。

在这里插入图片描述
我们之前所学习的HTML的标签元素都是具备实际内容，包含了一些文字、图片以及其他标签元素，并且还有所谓的“border、padding、margin”，而这些就构成了我们现在所说的“盒子模型”。
我们之前所学的很多如下图所示的“块级元素”它们都具备盒子模型的特征。

在这里插入图片描述

盒子模型的属性介绍

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            div {
                width: 300px;
                height: 300px;
                background-color: pink;
                padding: 80px;
                border: 3px solid black;
            }
        </style>
    </head>
    <body>
        <div>盒子模型属性介绍</div>
    </body>
    
</html>

在这里插入图片描述
说明：
首先有一个div标签，里面设置了长度、宽度、内边距、背景颜色以及边框等属性。其实别的一些属性不难理解，后面也会讲到，这里主要强调一个内容：
div设置的宽度是300px，但这个宽度不是盒子的实际宽度，而是盒子内容的宽度。而盒子的实际宽度 = 盒子左右两边边框的宽度（3px * 2) + 左右两边的内边距（80px*2） + 盒子内容的宽度（300px） = 466px。

基本属性介绍：

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

[最终元素的总宽度计算公式]：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

[元素总高度计算公式]：
总元素高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

月泰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端自学笔记（四） CSS

CSS这几天住院，耽误了几天，没怎么学习，趁现在周一重新开始学习。再过两天就要手术了，术后估计是没啥机会的。对于CSS的一些属性用法之类的，这里就不过多叙述了，之前也学过该怎么用，忘记了的再去看看就行。现在主要是记一下CSS很重要的一个思维模型：盒子模型CSS盒子模型CSS盒子模型就是在CSS技术中所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。它包括：外边距（margin)、边框（border）、内填
复制链接

扫一扫