CSS样式基础
CSS盒模型
重要程度：7 分
<div>
<h1>CSS盒模型</h1>
<p>在CSS中，每个元素都被视为一个矩形的盒子。这个盒子由四个部分组成：内容区、内边距、边框和外边距。</p>
<h2>1. 内容区 (content)</h2>
<p>内容区是盒子内部实际显示内容的部分，如文本或图像。</p>
<h2>2. 内边距 (padding)</h2>
<p>内边距是在内容区和边框之间的空间。它用于增加内容与边框之间的距离。</p>
<h2>3. 边框 (border)</h2>
<p>边框是围绕内容区和内边距的一条线。可以设置边框的宽度、样式和颜色。</p>
<h2>4. 外边距 (margin)</h2>
<p>外边距是在边框外部的空间，用于控制盒子与其他盒子之间的间距。</p>
<h2>盒模型属性</h2>
<ul>
<li><code>width</code> 和 <code>height</code>: 设置内容区的宽度和高度。</li>
<li><code>padding</code>: 设置内边距。</li>
<li><code>border</code>: 设置边框。</li>
<li><code>margin</code>: 设置外边距。</li>
</ul>
<h2>盒模型示例</h2>
<p>假设有一个div元素，其CSS样式如下：</p>
<pre>
div {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
</pre>
<p>这个div元素的实际占用空间为：</p>
<ul>
<li>总宽度 = 内容区宽度 + 左右内边距 + 左右边框 + 左右边距</li>
<li>总高度 = 内容区高度 + 上下内边距 + 上下边框 + 上下边距</li>
</ul>
<p>根据上述CSS，计算实际宽度和高度：</p>
<ul>
<li>总宽度 = 200px + 10px * 2 + 5px * 2 + 20px * 2 = 270px</li>
<li>总高度 = 100px + 10px * 2 + 5px * 2 + 20px * 2 = 160px</li>
</ul>
</div>