前端爱好者的小白学习之路 4-1 CSS学习笔记-盒子模型基础知识_在 css 的默认盒子模型中,当我们指定一个css元素的高度与宽度时,只是指定了内容的-优快云博客

嘿朋友谢谢你复制我的文章喜欢的话给点个赞交个朋友吧~

本文链接：https://blog.youkuaiyun.com/qq_45704942/article/details/113776765

本文介绍了前端布局中的CSS盒子模型，包括margin、border、padding和content的基本概念和用法，帮助初学者理解如何通过盒子模型进行网页布局。同时，文章提及了边框属性、外边距和填充的详细内容，以及CSS中的margin和padding概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经过前面一个阶段对HTML CSS基础语法的学习之后我们已经可以写出来一个简单的网页了
HTML基础知识总结
 CSS基础语法总结
但这些想要做好网页布局只有那些基础知识肯定是不够的诶
（学会了这些基础知识我们只能对网页中单一的一块内容进行设计
或者是凌乱地对一整片网页进行布局太不系统啦！）
所以我们引入了“盒子模型”这个概念，
不理解盒子模型是不能清晰明了地写出来一个网页的~
在这里插入图片描述

我们看到的网页中一个个分块显示的内容，其实就是一个个的盒子
作为一名初入前端领域的小白
肯定是要从盒子模型开始像搭积木一样慢慢把网页搭出来鸭
所以我们一起来巩固一下盒子模型的知识点吧~

进行网页布局的时候我们应该这么想

（其实这里放一个网页模仿案例的整体构思过程感觉是最好的
但是奈何俺懒得一批暂时还没有把完整的流程笔记总结出来
总结出来以后马上会写到博客里再增强一下理解的~）
网页案例构思及实战演练~（待完成）
【1】看看网页中都有什么东西
【2】将这些内容大致做一个分块（一般是竖直地分成几块儿）
【3】依次完成每个分块中的内容
在构思的过程中，我们要：

把所有html标签都看作是一个盒子
之后呢，在通过CSS浮动定位让每个盒子排列成为网页~

这里浮动和定位是基础且无比重要的布局方法我会在接下来的博客中总结出来~
CSS浮动（待完成）
CSS定位（待完成）

CSS盒子模型(Box Model)

了解网页布局前
先来好好康康这几个概念吧~
我们的网页中各个元素不可能贴在一起
那怎么让它们之间有一定距离呢？
答案就是使用这几个概念

margin 外边距

border 边框

增大盒子（与其他盒子）之间的距离

padding 填充

扩大盒子（本身）的范围

content 内容

CSS盒模型本质上是一个盒子，封装周围的HTML元素

盒子模型包括-

外边距Margin–清除边框外的区域，外边距是透明的是本盒子与其他盒子的距离。

边框Border–围绕在内边距和内容外的边框

填充Padding–清除内容周围的区域，内边距是透明的

实际内容-Content–盒子的内容，显示文本和图像

CSS box-model

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

当指定一个 CSS 元素的宽度和高度属性时，实际上是在设置内容区域的宽度和高度。

这个内容区域相当于一个小内容外面罩着的小盒子~

以淘宝网的一个版块为例~
在这里插入图片描述

我们看到的蓝色框框里的内容
就是这个盒子的“内容区域”
而我们看到啊这部分的内容非常的复杂肯定不只有宽度和高度
所以：
为了完成一个完整的盒子模型你还必须添加内边距（padding），边框（border）和边距（margin）。
这里再举一个简单的例子：
这样一段对盒子进行修饰的CSS代码
这里我们可以尝试打开在线编译器看看效果~
菜鸟教程在线编译器~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟