欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

【html】盒模型div，边框border，内边距padding，外边距margin

发布时间：2024/3/24 编程问答 107 豆豆
生活随笔 收集整理的这篇文章主要介绍了 【html】盒模型div，边框border，内边距padding，外边距margin 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

初识盒模型

要想学习盒模型，首先要知道什么是盒模型。顾名思义，每个div标签都是一个矩形，像一个盒子，所以HTML页面布局可以理解为多个盒子嵌套排列而成。

盒模型的组成

盒模型包括：content（内容）、border（边框）、padding（内边距）以及margin（外边距）。

content（内容）：显现图像和文本内容。

border（边框）：指围绕在盒模型外侧的一条样式自定义的线。

padding（内边距）：指元素内容与边框之间的间距。

margin（外边距）：指围绕在边框之外的空白区域。

div的基础属性

div的基础属性包括width（宽度），height（高度）以及background-color（背景颜色）。如果div中没有具体的内容，可以用这三个属性让div“现身”。

div{width: 100px;height: 100px;background-color: gold;}


关于border（边框）


border是围绕在盒模型外侧的一条样式自定义的线。border是一个复合属性，用法为border：width style color；
例如：

div{width: 100px;height: 100px;background-color: gold;border:10px solid red;}


如果分开写的话，可以写为：

border-width: 10px;border-style: solid;border-color: red;

这与上文提到的border：10px solid red；作用是一样的。
其实border-style不仅有solid一种，以下是常用的一些样式：

border-style边框样式
solid直线
dashed虚线
dotted点线
double双线


给div加上border之后，不难看出长宽都相应的增加了。所以border会增加盒模型的面积。

利用border绘制三角形

div{width: 100px;height: 100px;background-color: gold;margin: 20px;border: 10px solid red;border-left-color: blue;border-right-color:green;border-bottom-color:orange ;}

这段代码的实现效果为


可见每边的边框相当于一个等腰梯形，如果要使梯形变为三角形，只需让梯形的短边长度为零即可。

div{width: 0px;height: 0px;background-color: gold;margin: 20px;border: 50px solid red;border-left-color: blue;border-right-color:green;border-bottom-color:orange ;}

利用border-radius制作圆

border-radius的含义为圆角，可以根据自定义的值改变边框角的弧度。当border-radius：50%；时，div整体会变成一个圆形。

.second{width: 100px;height:100px;background-color: yellow;border: 20px solid skyblue;border-radius: 50%;}


结合三角形和圆形的绘制过程，可以得出扇形的绘制过程

div{width: 0px;height: 0px;background-color:transparent;/* 透明色 */margin: 20px;border: 50px solid red;border-left-color: transparent;border-right-color:transparent;border-bottom-color:orange ;border-radius: 50%;}

关于padding（内边距）


内边距指的是元素与边框之间的空白区域，可以有1~4个值，按照顺时针即上右下左的顺序依次赋值，用代码实现为

padding: 20px 30px 40px 50px;

还可以分为四个方向分别实现：

内边距方向
padding-top上边距
padding-right右边距
padding-bottom下边距
padding-left左边距


在使用padding时，需要注意padding会增加盒模型的面积。用两个长宽相等的盒模型比较，可以更直观的得出结论。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;list-style: none;}div{width: 100px;height: 100px;background-color: gold;margin: 20px;}</style> </head> <body><div></div><div style="padding: 20px 30px 40px 50px;"></div> </body> </html>


所以在运用padding时，要注意各边的长度相应的缩小才能保持原盒模型的面积不变。

关于margin（外边距）


外边距是指围绕在边框之外的空白区域。同样可以有1~4个值，以顺时针即上右下左的顺序依次赋值，用代码实现为：

margin：20px；/* 代表上右下左四个方向各有20px的外边距 */

还可以分为四个方向分别实现：

外边距方向
margin-top上边距
margin-right右边距
margin-bottom下边距
margin-left左边距

在使用margin时，需要注意叠压问题和塌陷问题。那么这两个问题指的是什么呢？

叠压问题

首先我们假设有两个div上下排列，div1的下边距为100px，div2的上边距为150px，那么两个div之间的间距是多少呢？100px？250px？还是150px？
答案是150px。
这种现象就很好地体现了叠压问题。叠压问题指的是：常态下，兄弟标签间的上下间距以大值为准。我们来想这样的一个例子，古代的剑客在功力高深的时候会给人一种有剑气的感觉，假设A剑客的剑气半径是100米，B剑客的剑气是150米，那么二者之间的安全距离是多少呢？很显然是150米。

了解了叠压问题，我们再来学习一下塌陷问题。

塌陷问题

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin</title><style>div{color: blue;width: 100px;height: 100px;font-size: 30px;}.fa{width: 300px;height: 300px;background-color: chocolate；}.son{width: 100px;height: 100px;background-color: darkgreen;margin-top: 30px;}</style> </head> <body><div class="fa"><div class="son"></div></div> </body> </html>


我们的本意原是让div.son与div.fa产生30px的上边距，却不曾想div.fa连同div.son一起向下移动了30px的距离，与我们的意愿背道而驰，这样的现象就称为塌陷问题。
遇到这样的问题不要着急，首先要知道问题形成的原因。
塌陷问题出现的原因：常态下，父级的第一个子级标签是一个块标签，并且使用了margin或者margin-top。
针对这个问题，有以下的解决方案：
1.在父级使用border。
2.在父级使用padding-top，注意高度要相对应减少。
3.在父级使用overflow：hidden（溢出隐藏）。
但是要注意的是方案1和方案2相对应的边长要缩小，才能保证原div的面积不变化。

总结

以上是生活随笔为你收集整理的【html】盒模型div，边框border，内边距padding，外边距margin的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。