css盒子模型大详解
程序员文章站
2022-04-01 07:58:38
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
span,a,b,strong
{
display: inline-block;
width: 100px;
height:100px;
border: 6px solid red;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<span>我是span</span>
<a href="#">我是超链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>
</body>
</html>
内容区域:高度和宽度。
内边距：填充物。
边框：装东西的盒子
外边距：盒子与盒子之间的距离。
核心：外边距是标签与标签之间的距离，就算是一个盒子嵌套一个盒子也可以有外边距的。比如body嵌套div也一样。
盒子模型的宽度与高度：
内容与元素与元素空间又有什么区别呢？
内容只是宽度与高度而已。
元素是只包括边框 内边距 内容。margin不算在其中。
元素的空间：是外边距+边框+padding+内容把。
上一篇： FORALL和BULK COLLECT
下一篇： css中精灵图