盒子模型-学习前端基础并且重要的一个知识点

最新推荐文章于 2023-08-28 23:44:49 发布

阿奇__

最新推荐文章于 2023-08-28 23:44:49 发布

阅读量706

点赞数 1

文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/a666666000/article/details/122624229

版权

目录

前言

一、盒子模型及图解

二、盒子模型的四个重要属性（由内到外进行介绍）

1.content（内容层）

2.padding（内边距）

3.border（边框）

4.margin（外边距）

总结

前言

随着互联网时代的到来，前端的学习也变得炙手可热，我结合自己之前的学习经历发现初学者很容易不重视对盒子模型这个概念的理解，导致最后做出来的页面整体布局不清晰，今天咱们就针对盒子模型这个知识点进行简单介绍，如有遗漏，还望指正，谢谢！

提示：以下是本篇文章正文内容，下面案例可供参考。

概念：在CSS中，假定每一个标签都是一个矩形，将元素设定为矩形的盒子之后，页面的布局就变成了将不同的盒子摆放到不同的位置，而每个从内到外都具有content、padding、border、margin这四个属性的矩形被称为盒子模型。

下图是我从菜鸟教程上扣下来的一张盒子模型的示意图，以便更好辅助大家理解

本文的例子中用我们画页面的时候比较常用并且很典型的div标签来对盒子模型进行说明

咱们以两幅相框为例帮助大家理解,首先我们需要知道一个div的可视区域大小是由content+padding+border三个属性构成的,看下面这张图很容易发现相框的可视区域是一直到border为止的,margin这个属性则是一个透明层,表示了两个相框之间的距离。

只设置一个值,如padding:10px; 表示上下左右内边距均为10px ; 简言之(padding:上下左右)
设置两个值,如padding:10px 20px; 表示上下内边距为10px,左右内边距为20px; 简言之(padding:上下左右)
设置三个值,如padding:10px 20px 30px; 表示上内边距为10px,右内边距和左内边距为20px,下内边距为30px;简言之(padding:上左右下)
设置四个值,如padding:10px 20px 30px 40px; 表示上内边距为10px,右内边距20px,下内边距为30px,左内边距为40px;简言之(padding:上右下左)

可视区域的最外层
有四个方向:border-right、border-left、border-top、border-bottom,与padding同理,这里就不再进行赘述
由"border-style"、"border-width"、"border-color"三个属性控制,也可以把三个属性整合到border属性中统一写如border:solid 1px red 表示设置边框为实线宽度为1像素的红色边框
border-radius : 边框弧度

表示两个盒子之间的距离,上图相框的例子中也就是两个相框之间的距离
也有四个方向,用法和padding一样,这里也不再进行赘述
需要注意的是margin虽然是透明层,对于页面的布局来说,一个完整的div是包括margin的,要分清div的可视区域(content+padding+border)和一个完整的div所占用的区域(content+padding+border+margin)