HTML中盒子模型六大属性

最新推荐文章于 2024-08-06 14:46:11 发布

加一块钱珍珠

最新推荐文章于 2024-08-06 14:46:11 发布

阅读量5.6k

点赞数 6

分类专栏：总结文章标签： html

本文链接：https://blog.csdn.net/qq_39162309/article/details/104439098

版权

本文详细介绍了HTML中的盒子模型，包括盒子的六个关键属性：width和height用于设置内容区域大小，border定义边框，padding表示内填充，margin设定外边距，background设置背景。文章分别从简单了解和深入理解两个层面探讨了这些属性，并阐述了它们在实际应用中的各种技巧和注意事项。

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

一个网站就是靠盒子一个一个堆起来，HTML中所有的盒子都是矩形

（一）盒子组成结构简单了解

一个盒子是由如下几个区域组成：
1）盒子的内容区域：可以通过width和height来设置内容区域的宽高
2）盒子的内填充区域（补白） padding ：通过padding来设置，这个padding是分上下左右四个方向。
3）盒子的边框区域 border：通过border来设置，分上下左右四个方向。
4）盒子的外填充区域（外边距） margin：通过margin来设置，也是分四个方向。
5）盒子的背景区域 background

在这里插入图片描述
从外往里说：
margin、border、padding、width、height、background来设置

1.1 width 和 height

表示盒子内容的宽度和高度，不是指盒子的宽度和高度
一个盒子在网页上占据的宽度：
width+左右padding+左右border+左右margin
一个盒子在网页上占据的高度：
height+上下padding+上下border+上下的margin
【在PC端一般都设置单位为px】

1.2 border

盒子的边框，通常在CSS中，设置盒子的边框需要设置边框粗细，边框样式，边框颜色。
一个盒子的边框由border-width，border-style，border-color组成
边框有四个方向：
top、right、bottom、left
在CSS中我们通常通过 border：1px solid red；