CSS学习11-盒子模型
<br><h2 id="盒子模型">盒子模型</h2>
<p>页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。</p>
<br>
<h3 id="1-看透网页布局的本质">1. 看透网页布局的本质</h3>
<p>网页布局的过程：</p>
<ol>
<li>先准备好相关的网页元素，网页元素基本都是盒子Box</li>
<li>利用CSS设置好盒子样式，然后摆放到相应的位置。</li>
<li>往盒子里面装内容。</li>
</ol>
<p>网页布局的核心本质：就是利用CSS摆盒子。</p>
<br>
<h3 id="2-盒子模型--box-model--组成">2. 盒子模型 ( Box Model ) 组成</h3>
<p>所谓<font color="#dd0000">盒子模型</font>：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。</p>
<p>CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框（border）、内边距（padding）、外边距（margin）和实际内容（content）。</p>
<p>下面的图片说明了盒子模型：</p>
<p><img src="https://i.loli.net/2021/05/14/1G385XsFTtZlkPy.png" alt="image-20210514153442602" loading="lazy"></p>
<p>不同部分的说明：</p>
<ul>
<li>盒子里面的文字和图片等元素是<strong>Content(内容)</strong></li>
<li>盒子的厚度 我们称为为盒子的<strong>Border(边框)</strong></li>
<li>盒子内容与边框的距离是<strong>Padding(内边距)</strong></li>
<li>盒子与盒子之间的距离是<strong>Margin(外边距)</strong></li>
</ul>
<br>
<h3 id="3-边框--border-">3. 边框 ( border )</h3>
<p><img src="https://i.loli.net/2021/05/14/krg4LKse8GTnvXx.png" alt="image-20210514154241249" loading="lazy"></p>
<p>border可以设置元素的边框。边框有三部分组成：边框宽度(粗细)、边框样式和边框颜色</p>
<p>语法：</p>
<pre><code class="language-html">border : border-width || border-style || border-color
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">作用</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">border-width</td>
<td style="text-align: left">定义边框粗细，单位是px</td>
</tr>
<tr>
<td style="text-align: left">border-style</td>
<td style="text-align: left">边框的样式</td>
</tr>
<tr>
<td style="text-align: left">border-color</td>
<td style="text-align: left">边框颜色</td>
</tr>
</tbody>
</table>
<p>示例代码</p>
<pre><code class="language-html"><!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>盒子模型之边框</title>
<style>
div {
width: 300px;
height: 200px;
/* border-width 边框的粗细 一般情况下都用 px */
border-width: 5px;
/* border-style 边框的样式 solid 实线边框dashed 虚线边框 dotted 点线边框 */
border-style: solid;
/* border-style: dashed; */
/* border-style: dotted; */
/* border-color 边框的颜色*/
border-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
</code></pre>
<p>运行效果</p>
<p><img src="https://i.loli.net/2021/05/14/BeTCpocxwOaYR3y.png" alt="image-20210514155637651" loading="lazy"></p>
<br>
<p>CSS边框属性允许你指定一个元素边框的<font color="#dd0000">样式</font>和<font color="#dd0000">颜色</font>。</p>
<p>边框简写：</p>
<pre><code class="language-html">border: 1px solid red;没有顺序要求
</code></pre>
<p>边框分开写法：</p>
<pre><code class="language-html">border-top: 1px solid red;/* 只设定上边框，其余同理 */
</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left">上边框</th>
<th style="text-align: left">下边框</th>
<th style="text-align: left">左边框</th>
<th style="text-align: left">右边框</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">border-top-style:样式;</td>
<td style="text-align: left">border-bottom-style:样式;</td>
<td style="text-align: left">border-left-style:样式;</td>
<td style="text-align: left">border-right-style:样式;</td>
</tr>
<tr>
<td style="text-align: left">border-top-width:宽度;</td>
<td style="text-align: left">border- bottom-width:宽度;</td>
<td style="text-align: left">border-left-width:宽度;</td>
<td style="text-align: left">border-right-width:宽度;</td>
</tr>
<tr>
<td style="text-align: left">border-top-color:颜色;</td>
<td style="text-align: left">border- bottom-color:颜色;</td>
<td style="text-align: left">border-left-color:颜色;</td>
<td style="text-align: left">border-right-color:颜色;</td>
</tr>
<tr>
<td style="text-align: left">border-top:宽度 样式 颜色;</td>
<td style="text-align: left">border-bottom:宽度 样式 颜色;</td>
<td style="text-align: left">border-left:宽度 样式 颜色;</td>
<td style="text-align: left">border-right:宽度 样式 颜色;</td>
</tr>
</tbody>
</table>
<p>示例代码1</p>
<pre><code class="language-html"><!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>边框的复合写法</title>
<style>
div {
width: 300px;
height: 200px;
/* border-width: 5px; */
/* border-style: solid; */
/* border-color: pink; */
/* 边框的复合写法 简写 */
/* border: 5px solid pink; */
/* 上边框 */
border-top: 5px solid pink;
/* 下边框 */
border-bottom: 10px dashed purple;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
</code></pre>
<p>运行效果</p>
<p><img src="https://i.loli.net/2021/05/14/Yl9qij2aohvtXeZ.png" alt="image-20210514155537004" loading="lazy"></p>
<br>
<p>示例代码2</p>
<pre><code class="language-html"><!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>边框的练习</title>
<style>
/* 请给一个 200*200 的盒子,设置上边框为红色,其余边框为蓝色 */
div {
width: 200px;
height: 200px;
/* border包含四条边 */
border: 1px solid blue;
/* 层叠性 只是层叠了 上边框啊 */
border-top: 1px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
</code></pre>
<p>运行效果</p>
<p><img src="https://i.loli.net/2021/05/14/IjdOmxQey8awZCz.png" alt="image-20210514155505913" loading="lazy"></p>
<br>
<h3 id="4-表格的细线边框">4. 表格的细线边框</h3>
<p><font color="#dd0000">border-collapse</font>属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。</p>
<p>语法：</p>
<pre><code class="language-html">border-collapse:collapse;
</code></pre>
<ul>
<li><code>collapse</code> 单词是合并的意思</li>
<li><code>border-collapse: collapse;</code>表示相邻边框合并在一起</li>
</ul>
<p>示例代码</p>
<pre><code class="language-html"><!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>今日小说排行榜</title>
<style>
table {
width: 500px;
height: 249px;
}
th {
height: 35px;
}
table,
td,
th {
border: 1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<table align="center" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="down.jpg"></td>
<td>124</td>
<td>675432</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>212</td>
<td>7654</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td><img src="up.jpg"></td>
<td>23</td>
<td>75645</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="down.jpg"></td>
<td>121</td>
<td>7676</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="up.jpg"></td>
<td>576576</td>
<td>1231421</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="up.jpg"></td>
<td>234</td>
<td>7686</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
</body>
</html>
</code></pre>
<p>运行效果</p>
<p><img src="https://i.loli.net/2021/05/14/gZcdDeyv1KxSAwQ.png" alt="image-20210514155431186" loading="lazy"></p>
<br>
<h3 id="5-边框会影响盒子实际大小">5. 边框会影响盒子实际大小</h3>
<p>边框会额外增加盒子的实际大小。因此我们有两种方案解决：</p>
<ol>
<li>测量盒子大小的时候，不量边框</li>
<li>如果测量的时候包含了边框，则需要 width/height 减去边框宽度</li>
</ol>
<p>示例代码</p>
<pre><code class="language-html"><!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>边框会影响盒子的实际大小</title>
<style>
/* 我们需要一个200*200的盒子，但是这个盒子有10像素的红色边框 */
div {
width: 180px;
height: 180px;
background-color: pink;
border: 10px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
</code></pre>
<p>运行效果</p>
<p><img src="https://i.loli.net/2021/05/14/JA3ZTkbIGogtyzr.png" alt="image-20210514160008998" loading="lazy"></p>
<br>
<h3 id="6-内边距--padding-">6. 内边距 ( padding )</h3>
<p><font color="#dd0000">padding</font>属性用于设置内边距。是指边框与内容之间的距离。</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">作用</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">padding-left</td>
<td style="text-align: left">左内边距</td>
</tr>
<tr>
<td style="text-align: left">padding-right</td>
<td style="text-align: left">右内边距</td>
</tr>
<tr>
<td style="text-align: left">padding-top</td>
<td style="text-align: left">上内边距</td>
</tr>
<tr>
<td style="text-align: left">padding-bottom</td>
<td style="text-align: left">下内边距</td>
</tr>
</tbody>
</table>
<p>示例代码</p>
<pre><code class="language-html"><!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>盒子模型之内边距</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding-left: 20px;
padding-top: 30px;
}
</style>
</head>
<body>
<div>
盒子内容是content盒子内容是content盒子内容是content盒子内容是content
</div>
</body>
</html>
</code></pre>
<p>运行效果</p>
<p><img src="https://i.loli.net/2021/05/15/ENaBR9PZgAYDdqU.png" alt="image-20210515162723236" loading="lazy"></p>
<br>
<p><font color="#dd0000">padding</font>属性 ( 简写属性 ) 可以有 1 到 4 个值。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值的个数</th>
<th style="text-align: left">表达意思</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">padding: 5px;</td>
<td style="text-align: left">padding：上下左右内边距;</td>
</tr>
<tr>
<td style="text-align: left">padding: 5px 10px;</td>
<td style="text-align: left">padding: 上下内边距 左右内边距 ；</td>
</tr>
<tr>
<td style="text-align: left">padding: 5px 10px 20px;</td>
<td style="text-align: left">padding：上内边距左右内边距下内边距；</td>
</tr>
<tr>
<td style="text-align: left">padding: 5px 10px 20px 30px;</td>
<td style="text-align: left">padding: 上内边距 右内边距 下内边距 左内边距 ；(顺时针)</td>
</tr>
</tbody>
</table>
<p>以上4种情况，我们再实际开发中都会遇到。</p>
<p>示例代码</p>
<pre><code class="language-html"><!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>盒子模型之内边距</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px; */
/* 内边距复合写法(简写) */
/* padding: 5px; */
/* padding: 5px 10px; */
/* padding: 5px 10px 20px; */
padding: 5px 10px 20px 30px;
}
</style>
</head>
<body>
<div>
盒子内容是content盒子内容是content盒子内容是content盒子内容是content
</div>
</body>
</html>
</code></pre>
<br>
<p>当我们给盒子指定<font color="#dd0000">padding</font>值之后，发生了2件事情：</p>
<ol>
<li>内容和边框有了距离，添加了内边距。</li>
<li>padding影响了盒子实际大小</li>
</ol>
<p>也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。</p>
<p><strong>解决方案：</strong></p>
<p>如果要保证盒子跟效果图大小一致，则让<font color="#dd0000">width/height减去多出来的内边距大小</font>即可。</p>
<p>示例代码</p>
<pre><code class="language-html"><!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>内边距会影响盒子实际大小</title>
<style>
div {
width: 160px;
height: 160px;
background-color: pink;
padding: 20px;
}
</style>
</head>
<body>
<div>
padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小
</div>
</body>
</html>
</code></pre>
<br>
<p><strong>padding不影响盒子大小情况：</strong>如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。</p>
<p>示例代码</p>
<pre><code class="language-html"><!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>padding不会影响盒子大小的情况</title>
<style>
h1 {
/* width: 100%; */
height: 200px;
background-color: pink;
padding: 30px;
}
div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
/* width: 100%; */
padding: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p>
</p>
</div>
</body>
</html>
</code></pre>
<p>运行结果</p>
<p><img src="https://i.loli.net/2021/05/15/jAHDrCpUcEFYdXN.png" alt="image-20210515164946237" loading="lazy"></p>
<br>
<h3 id="7-外边距--margin-">7. 外边距 ( margin )</h3>
<p><font color="#dd0000">margin</font>属性用于设置外边距，即控制盒子和盒子之间的距离。</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">作用</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">margin-left</td>
<td style="text-align: left">左外边距</td>
</tr>
<tr>
<td style="text-align: left">margin-right</td>
<td style="text-align: left">右外边距</td>
</tr>
<tr>
<td style="text-align: left">margin-top</td>
<td style="text-align: left">上外边距</td>
</tr>
<tr>
<td style="text-align: left">margin-bottom</td>
<td style="text-align: left">下外边距</td>
</tr>
</tbody>
</table>
<p>margin 简写方式 （复合写法）代表的意思跟 padding 完全一致。</p>
<p>示例代码</p>
<pre><code class="language-html"><!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 {
width: 200px;
height: 200px;
background-color: pink;
}
/* .one {
margin-bottom: 20px;
} */
.two {
/* margin-top: 20px; */
margin: 30px 50px;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
</code></pre>
<p>运行结果</p>
<p><img src="https://i.loli.net/2021/05/15/A5dlst3qoyIgNLU.png" alt="image-20210515165417412" loading="lazy"></p>
<br>
<p><strong>外边距典型应用</strong></p>
<p>外边距可以让块级盒子<font color="#dd0000"><strong>水平居中</strong>，</font>但是必须满足两个条件：</p>
<ol>
<li>盒子必须指定了宽度 ( width ) 。</li>
<li>盒子<font color="#dd0000">左右的外边距</font>都设置为auto 。</li>
</ol>
<pre><code class="language-html">.header{ width: 960px; margin: 0 auto;}
</code></pre>
<p>常见的写法，以下三种都可以：</p>
<ul>
<li>margin-left: auto;margin-right: auto;</li>
<li>margin: auto;</li>
<li>margin: 0 auto;</li>
</ul>
<p>示例代码</p>
<pre><code class="language-html"><!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>块级盒子水平居中对齐</title>
<style>
.header {
width: 900px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
</code></pre>
<br>
<p><font color="#dd0000"><strong>注意：</strong></font>以上方法让块级元素水平居中，<font color="#dd0000">行内元素或者行内块元素给其父元素添加 text-align: center即可</font>。</p>
<p>示例代码</p>
<pre><code class="language-html"><!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>行内元素/行内块元素水平居中对齐</title>
<style>
.header {
width: 900px;
height: 200px;
background-color: pink;
margin: 100px auto;
text-align: center;
}
/* 要想行内元素或者行内块元素水平居中只需给其父元素添加 text-align: center 即可 */
</style>
</head>
<body>
<div class="header">
<span>里面的文字</span>
</div>
<div class="header">
<img src="down.jpg" alt="">
</div>
</body>
</html>
</code></pre>
<br>
<h3 id="8-外边距合并">8. 外边距合并</h3>
<p>使用<font color="#dd0000">margin</font>定义块元素的<font color="#dd0000">垂直外边距</font>(指 margin-top 和 margin-bottom )时，可能会出现外边距的合并。</p>
<p>主要有两种情况：</p>
<p><strong>1. 相邻块元素垂直外边距的合并</strong></p>
<p><strong>2. 嵌套块元素垂直外边距的塌陷</strong></p>
<br>
<h4 id="81-相邻块元素垂直外边距的合并">8.1 相邻块元素垂直外边距的合并</h4>
<p>当上下相邻的两个块元素 ( 兄弟关系 ) 相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。<font color="#dd0000">取两个值中的较大者这种现象被称为<strong>相邻块元素垂直外边距的合并</strong></font>。</p>
<p><img src="https://i.loli.net/2021/05/15/lNqMP6fbxGeSUgQ.png" alt="image-20210515173104333" loading="lazy"></p>
<p><strong>解决方案：</strong><font color="#dd0000">尽量只给一个盒子添加 margin 值。</font></p>
<p>示例代码：</p>
<pre><code class="language-html"><!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>外边距合并-相邻块级元素垂直外边距合并</title>
<style>
.damao,
.ermao {
width: 200px;
height: 200px;
background-color: pink;
}
.damao {
margin-bottom: 100px;
}
.ermao {
margin-top: 200px;
}
</style>
</head>
<body>
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</body>
</html>
</code></pre>
<br>
<h4 id="82--嵌套块元素垂直外边距的塌陷">8.2嵌套块元素垂直外边距的塌陷</h4>
<p>对于两个嵌套关系 ( 父子关系 ) 的块元素，父元素有上外内边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。</p>
<p><img src="https://i.loli.net/2021/05/15/LPzfTRhWkd69ZKY.png" alt="image-20210515173025771" loading="lazy"></p>
<p><strong>解决方案：</strong></p>
<ol>
<li>可以为父元素定义上边框。</li>
<li>可以为父元素定义上内边距。</li>
<li>可以为父元素添加overflow: hidden。</li>
</ol>
<p>还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。</p>
<p>示例代码</p>
<pre><code class="language-html"><!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>外边距合并-嵌套块级元素垂直外边距塌陷</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* border: 1px solid red; */
/* border: 1px solid transparent; */
/* padding: 1px; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
</code></pre>
<p>运行结果</p>
<p><img src="https://i.loli.net/2021/05/15/IgT83lYvhF19xtV.png" alt="image-20210515173328879" loading="lazy"></p>
<br>
<h3 id="9-清除内外边距">9. 清除内外边距</h3>
<p>网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们再布局前，首先要清除下网页元素的内外边距。</p>
<pre><code class="language-html">* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
</code></pre>
<p><font color="#dd0000"><strong>注意：</strong></font><font color="#dd0000">行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。</font></p>
<p>示例代码</p>
<pre><code class="language-html"><!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>清除内外边距</title>
<style>
/* 这句话也是我们CSS 的第一行代码 */
* {
margin: 0;
padding: 0;
}
span {
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
123
<ul>
<li>abcd</li>
</ul>
<span>行内元素尽量只设置左右的内外边距</span>
</body>
</html>
</code></pre>
<p>运行结果</p>
<p><img src="https://i.loli.net/2021/05/15/ezCFHtR47SoBQsa.png" alt="image-20210515173919411" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/brianxq/p/14772116.html
頁:
[1]