CSS盒子模型元素的宽高怎么算，外边距塌陷如何解决

发布时间：2023-10-09 10:02:15 所属栏目：语言来源：

导读： 在这篇文章中，我们来学习一下“CSS盒子模型元素的宽高怎么算，外边距塌陷怎样解决”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一

在这篇文章中，我们来学习一下“CSS盒子模型元素的宽高怎么算，外边距塌陷怎样解决”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

　我们通常设置的宽度和高度，是指盒子模型中内容（content）的宽度和高度。元素的高度，还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin；宽度类似计算。

　　注意：

父子元素包含情况下的计算，父亲元素会把儿子元素的整个盒子的大小作为内容。
外边距塌陷(margin collapse)，块元素的 top 与 bottom 外边距有时会合并为单个外边距，这样的现象称之为外边距塌陷。
一般我们给元素设置背景色不会包括margin和border。

一、普通盒子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.divcss
{
width:300px;
border:5px solid #F00;
margin:10px;
padding:5px;
}
</style>
</head>
<body>
<div class="divcss">
我是盒子1
</div>
<div class="divcss">
我是盒子2
</div>
</body>
</html>

二、父子盒子

　　父子div盒子，外层div定义padding,内层div定义margin

　　父亲元素会把儿子元素的整个盒子（包括margin）的大小作为内容

　　html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0px;
}
.divcss
{
width:300px;
border:5px solid #eee;
margin:10px;
padding:5px;
}
.divcss1
{
margin:20px;
}
</style>
</head>
<body>
<div class="divcss">
<div class="divcss1">
我是盒子
</div>
</div>

</body>
</html>

三、外边距塌陷盒子

　　块元素的 top 与 bottom 外边距有时会合并为单个外边距

　　两个上下相邻的DIV,margin都设置了，会重叠，且取大的那个，例子中1个10，一个20，取20

　　html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0px;
}
.divcss
{
background-color:red;
margin:10px;
}
.divcss1
{
background-color:green;
margin:20px;
}
</style>
</head>
<body>
<div class="divcss">
我是盒子1
</div>
<div class="divcss1">
我是盒子2
</div>
</body>
</html>
　　

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!