CSS学习——框模型
<p>学习内容来源：CSS 框模型</p><h1 id="css-框模型">CSS 框模型</h1>
<blockquote>
<p>所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。<br>
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。</p>
</blockquote>
<p>如图所示：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220228111927845-444883051.png" alt="" loading="lazy"></p>
<ul>
<li>内容 - 框的内容，其中显示文本和图像。</li>
<li>内边距 - 清除内容周围的区域。内边距是透明的。</li>
<li>边框 - 围绕内边距和内容的边框。</li>
<li>外边距 - 清除边框外的区域。外边距是透明的。</li>
</ul>
<p>框模型允许我们在元素周围添加边框，并定义元素之间的空间。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。</p>
<p>提示：背景应用于由内容和内边距、边框组成的区域。</p>
<h2 id="外边距">外边距</h2>
<blockquote>
<p>margin 属性用于在任何定义的边框之外，为元素周围创建空间。</p>
</blockquote>
<p>CSS 拥有用于为元素的每一侧指定外边距的属性：（margin 属性是以下各外边距属性的简写属性）</p>
<ul>
<li>margin-top</li>
<li>margin-right</li>
<li>margin-bottom</li>
<li>margin-left</li>
</ul>
<p>所有外边距属性都可以设置以下值：（提示：允许负值）</p>
<ul>
<li>auto - 浏览器来计算外边距</li>
<li>length - 以 px、pt、cm 等单位指定外边距</li>
<li>% - 指定以包含元素宽度的百分比计的外边距</li>
<li>inherit - 指定应从父元素继承外边距</li>
</ul>
<p>例子：<br>
1、margin 属性设置四个值：margin: 25px 50px 75px 100px; 那么</p>
<ul>
<li>上外边距是 25px</li>
<li>右外边距是 50px</li>
<li>下外边距是 75px</li>
<li>左外边距是 100px</li>
</ul>
<p>即按照框模型从 top 开始，顺时针一周下来，分别是 top，right，bottom，left。</p>
<p>2、margin 属性设置三个值：margin: 25px 50px 75px; 那么</p>
<ul>
<li>上外边距是 25px</li>
<li>右和左外边距是 50px</li>
<li>下外边距是 75px</li>
</ul>
<p>3、margin 属性设置两个值：margin: 25px 50px; 那么</p>
<ul>
<li>上和下外边距是 25px</li>
<li>右和左外边距是 50px</li>
</ul>
<p>4、margin 属性设置一个值：margin: 25px; 那么</p>
<ul>
<li>所有四个外边距都是 25px</li>
</ul>
<p>5、margin 属性设置：margin: auto; 那么</p>
<ul>
<li>元素在其容器中水平居中，占据指定的宽度，并且剩余空间将在左右边界之间平均分配。</li>
</ul>
<p>如图所示，蓝色区域是 div 的内容，左右两侧的橙色区域是外边距<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220228164239000-1386346209.png" alt="" loading="lazy"></p>
<pre><code>// css 代码
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
</code></pre>
<p>6、margin 属性设置：margin: inherit; 那么</p>
<ul>
<li>元素的外边距继承自父元素</li>
</ul>
<p>如图所示，第一个图中蓝色区域是父元素，设置了 margin-left: 100px; 显示为左边的橙色区域。第二个图整个就是第一个图的蓝色区域（即父元素），蓝色区域是一个 p 标签，它继承了 margin-left: 100px; 显示为左边的橙色区域。（说明：图像大小比例不一致）<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220228164730430-289038690.png" alt="" loading="lazy"><br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220228164737046-1960390122.png" alt="" loading="lazy"></p>
<pre><code>// css 代码
div {
border: 1px solid red;
margin-left: 100px;
}
p {
margin-left: inherit;
}
</code></pre>
<h2 id="内边距">内边距</h2>
<blockquote>
<p>padding 属性用于在任何定义的边界内的元素内容周围生成空间。</p>
</blockquote>
<p>CSS 拥有用于为元素的每一侧指定内边距的属性：（padding 属性是以下各内边距属性的简写属性）</p>
<ul>
<li>padding-top</li>
<li>padding-right</li>
<li>padding-bottom</li>
<li>padding-left</li>
</ul>
<p>所有内边距属性都可以设置以下值：（提示：不允许负值）</p>
<ul>
<li>length - 以 px、pt、cm 等单位指定内边距</li>
<li>% - 指定以包含元素宽度的百分比计的内边距</li>
<li>inherit - 指定应从父元素继承内边距</li>
</ul>
<p>例子：<br>
1、padding 属性设置了四个值：padding: 25px 50px 75px 100px; 那么</p>
<ul>
<li>上内边距是 25px</li>
<li>右内边距是 50px</li>
<li>下内边距是 75px</li>
<li>左内边距是 100px<br>
即按照框模型从 top 开始，顺时针一周下来，分别是 top，right，bottom，left。</li>
</ul>
<p>2、padding 属性设置了三个值：padding: 25px 50px 75px; 那么</p>
<ul>
<li>上内边距是 25px</li>
<li>右和左内边距是 50px</li>
<li>下内边距是 75px</li>
</ul>
<p>3、padding 属性设置了两个值：padding: 25px 50px; 那么</p>
<ul>
<li>上和下内边距是 25px</li>
<li>右和左内边距是 50px</li>
</ul>
<p>4、padding 属性设置了一个值：padding: 25px; 那么</p>
<ul>
<li>所有四个内边距都是 25px</li>
</ul>
<h2 id="元素的宽度和高度">元素的宽度和高度</h2>
<blockquote>
<p>在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。</p>
</blockquote>
<p>重要提示：使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。</p>
<p>例子：<br>
有个 div 的 css 代码如下：</p>
<pre><code>// css 代码
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</code></pre>
<p>那么:<br>
元素总宽度：320px + 10px * 2 + 5px * 2 + 0 * 2 = 350px</p>
<p>计算公式：</p>
<blockquote>
<p>元素的总宽度应该这样计算：<br>
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距</p>
</blockquote>
<blockquote>
<p>元素的总高度应该这样计算：<br>
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/111K/p/15945102.html
頁:
[1]