全栈之前端 | 4.CSS3基础知识之盒子模型学习

0x00 前言简述

描述：在 HTML 中首先会使用 CSS 来对元素进行定位，我们将学习如何使用 CSS 来控制和定位网页元素的位置、大小和布局。

以下是一些与 CSS 元素定位相关的学习资源和主题, 我们将一一的进行学习实际：

• 盒子模型：了解 CSS 中的盒子模型（前面简单的提及了），包括内容区域、边框、内边距和外边距，以及如何使用这些属性来控制元素的大小和间距。
• 定位属性：学习 CSS 中的定位属性，如position、top、right、bottom和left，这些属性可以让你精确地控制元素在页面中的位置。
• 浮动和清除浮动：了解浮动属性和清除浮动的方法，以实现元素的自适应布局和多列布局。

0x01 CSS 盒子模型

描述：在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。

其中 CSS 框模型 (Box Model) 规定了元素框处理元素内容大小、内边距、边框 和 外边距 等方式，其相关属性如下图所示:

• Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
• Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
• Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
• Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

偷偷的告诉你哟？【极客全栈修炼】微信小程序已开放

【极客全栈修炼小程序】

可直接在微信里面直接浏览博主文章哟，后续将上线更多有趣的小工具。

下图中, 元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距呈现了元素的背景, 内边距的边缘是边框，边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素；而元素背景通常应用于由内容和内边距、边框组成的区域。

weiyigeek.top-CSS 框模型图

上图中，在 CSS 中，width 和 height 指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

例如，假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距以及 5px 的边框，如果希望这个元素框达到 110 个像素，就需要将内容的宽度设置为 70 像素，请看下图中width: 70px 2 * pading: 5px(上下左右) 2 *margin: 10px (上下左右) 2 * border: 5px = 100px;

代码语言：javascript复制

/* 标准盒模型 */
.box {
  width: 70px;
  height: 70px;
  margin: 10px;
  padding: 5px;
  border: 5px solid black;
}

/* 替代（IE）盒模型 */
/* 通过为其设置 box-sizing: border-box 来实现, 使用这个模型, 所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分 */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

温馨提示: 内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边，例如margin-top、或者padding-down，并且内边距、边框和外边距都是可选的，默认值是零，但是，许多元素将由用户代理样式表设置外边距和内边距, 我们可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式, 通常是使用通用选择器对所有元素进行设置，例如：

代码语言：javascript复制

* {
  margin: 0;
  padding: 0;
}

块、内联盒子

描述: 在 CSS 中我们广泛地使用两种“盒子, box”,即块级盒子 (block box) 和 内联盒子 (inline box),这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为；而在 CSS 中，HTML 元素可以被分为三种类型：块级元素（block-level elements）、内联元素（inline elements）和内联块状元素（inline-block elements）。

1. 块级元素（block-level elements）：块级元素以块的形式显示在页面上，它们会独占一行，宽度默认是 100%。常见的块级元素有div、p、h1-h6、ol、ul、li、table、form、address、blockquote等。 块级元素可以设置宽度、高度、内外边距等属性，可以包含其他块级元素和内联元素。
2. 内联元素（inline elements）：内联元素以行的形式显示在页面上，它们不会独占一行，宽度由内容决定。常见的内联元素有span、a、img、em、strong、label、var、cite、code等。 内联元素不能设置宽度、高度，只能设置水平方向的内外边距和行高等属性。内联元素只能包含文本或其他内联元素，不能包含块级元素。
3. 内联块状元素（inline-block elements）：内联块状元素结合了块级元素和内联元素的特性，可以设置宽度、高度、内外边距等属性，同时以行的形式显示在页面上。常见的内联块状元素有input、button等。 内联块状元素可以包含其他内联元素和文本，也可以和其他内联元素在同一行显示。

知识扩展:

• 1.定宽块元素与不定宽块元素的居中对齐方法:

代码语言：javascript复制

/* # 1.定宽的块元素可以通过margin设左右auto模式来进行设置居中 */
div {
  width: 100%;
  margin: 0px auto;
}

/* 2.不定宽块元素由于网页分页我们不能预判，所以我们不能提前设置它的宽度，但我们可以使用以下三种方式让其居中 */
/* A: 加入Table标签 */
table {
  border: 1px solid;
  margin: 0 auto;
}

/* B: 将类型设置为行内元素，即 display:inline */
inline {
  display: inline;
  text-align: center;
}

/* C：利用 `position:relative` 和 `left 50%` 相对定位将元素向右偏移。 */
wrap {
  position: relative;
  left: 50%;
}

• 2.内联元素的居中方法: 使用此text-align: center;属性与值。
• 3.在现代浏览器中实现水平居中，可以使用display: flex; justify-content: center;属性与值。

box-sizing-盒模型替代

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到此元素的内容区，于此同时如果你设置了 margin 或者 padding，CSS 渲染绘制时屏幕上盒子实际宽度和高度会加上设置的边框和内边距值，所以在实现响应式布局事会非常烦人，需要时刻注意到这个元素的边框和内边距。

此时我们可以使用 box-sizing 属性来调整显示。

语法参数:

代码语言：javascript复制

/* 语法 */
box-sizing =
  content-box  |
  border-box

/* 参数 */
content-box ：默认值，标准盒子模型，只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。
  例如，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。
border-box：替代（IE）盒模型，包括内容，内边距和边框宽和高 ，但不包括外边距的。
  例如， .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为 350px 的盒子。

示例演示:

代码语言：javascript复制

<style>
  div {
    width: 160px;
    height: 80px;
    padding: 20px;
    border: 8px solid red;
    background: yellow;
  }

  /* 标准盒模型 */
  .content-box {
    box-sizing: content-box;
    /* Total width: 160px   (2 * 20px)   (2 * 8px) = 216px
     Total height: 80px   (2 * 20px)   (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
  }

  /* 替代IT盒模型, 始终在一个区域范围内，在响应式设计时非常有用 */
  .border-box {
    box-sizing: border-box;
    /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
  }
</style>
<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>

执行结果:

display-块或者内联元素设置

描述: CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式Flow布局、网格Grids布局或弹性Flexible布局。

语法参数:

代码语言：javascript复制

/* 外部表现 <display-outside> */
display: block; /* 生成块元素*/
display: inline; /* 生成内联元素*/

/* 内部表现 <display-inside> */
display: flow; /* 使用流式布局（块和内联布局）来排布它的内容。*/
display: flex; /* 使用弹性布局来排布它的内容。*/
display: grid; /* 使用网格模型来排布它的内容。*/
display: flow-root; /* 生成块级元素盒，其会建立一个新的块级格式化上下文，定义格式化上下文的根元素*/
display: table; /* 元素的行为类似于一个表格元素，生成块级别的盒子 */

/* 列表元素 <display-listitem> */
display: list-item; /* 元素的行为类似于一个列表元素, 可与以 list-style-type 和 list-style-position 一起使用 */

/* 内部 <display-internal> */
display: table-row; /* 该元素的行为类似于 HTML 的 <tr> 元素。 */
display: table-cell; /* 该元素的行为类似于 HTML 的 <td> (en-US) 元素。*/
display: table-row-group; /* 该元素的行为类似于 HTML 的 <tbody> 元素。*/

/* 盒 <display-box> */
display: none; /* 使元素不再显示，其对布局不会有影响，不会占用位置，若想不显示又占用位置请使用 visibility 属性。*/
display: contents; /* 自身不会产生特定的盒子, 它们被伪盒子（pseudo-box）和子盒子取代 */

/* 预组合 precomposed  */
display: inline-block; /* 该元素生成块级元素盒，如果它是一个单独的内联盒，它将和周围的内容一起流动（行为类似于替换元素）。等同于 inline flow-root*/
display: inline-flex; /* 类似于内联元素并且它的内容根据弹性盒模型布局。等同于 inline flex*/
display: inline-grid; /* 类似于内联元素并且它的内容根据网格盒模型布局。等同于 inline grid */
display: inline-table; /* 类似于 HTML 的 <table> 元素，但实际是一个内联盒，而不是一个块级盒子。等同于 inline table */

/* two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

温馨提示: display 关键值可以被分组为六个种类, 即外部表现,内部表现,列表元素,内部,盒以及预组合。

温馨提示：在 CSS3 中描述了 display 的双值属性规范，但浏览器尚未很好地支持这一点，预组合 <display-legacy> 方法允许单关键字产生相同的结果。

代码语言：javascript复制

/* 例如，你可以按以下方式使用双值语法指定一个内联的弹性容器：(浏览器支持性可能不是很好) */
.container {
  display: inline flex;
}

/* 例如，使用预组合属性来定义显示 */
.container {
  display: inline-flex;
}

示例演示:示例 1, 将类选择器选中的元素，进行修改 display: inline 为 display: block 或者 display: inline-flex 改为 display: flex 来观察显示模式切换

代码语言：javascript复制

<style>
  p,
  ul {
    border: 2px solid rebeccapurple;
    padding: 0.5em;
  }

  span,
  li {
    border: 2px solid blue;
  }

  ul {
    display: flex; /* 弹性布局 */
    list-style: none;
    padding: 0;
  }

  .demo {
    display: inline; /* 改变为内联元素 (此处可验证display属性值效果) */
  }
</style>
<p>
  I am a paragraph. Some of the (块元素)
  <span>words（内联元素）</span> have been wrapped in a
  <span>span element（内联元素）</span>.
</p>
<ul>
  <li>Item One(内联元素弹性盒子)</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<p class="demo">I am a paragraph. A short one.（使用display可变化块、内联）</p>
<p class="demo">I am another paragraph. Also a short one.</p>

总结: display 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式。

margin-外边距

描述: 外边距是盒子周围一圈看不到的空间,它会把其他元素从盒子旁边推开, 其值可正可负，但是在设置负值会导致和其他内容重叠，并且无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。

语法参数:

代码语言：javascript复制

/* # 一次控制一个元素的所有边距 */
margin: <'margin-top'>{1,4}
> 当只指定一个值时，该值会统一应用到全部四个边的外边距上。
> 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
> 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
> 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

/* 应用于所有边，使用 相对单位 或者 绝对单位 */
margin: 1em;
margin: -3px;
/* 上边下边 | 左边右边 */
margin: 5% auto;
/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;
/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;

/* # 或者每边单独使用等价的普通属性控制, 相信大家都明白下述属性含义吧，字面意思*/
margin-top
margin-right
margin-bottom
margin-left

示例演示:

示例 1，尝试更改外边距的值，来查看当前元素和其包含元素，在外边距设置为正时是如何推开周边元素，以及设置为负时，是如何收缩空间的。

代码语言：javascript复制

<style>
  .box {
    margin-top: -40px;
    margin-right: 30px;
    margin-bottom: 40px;
    margin-left: 4em;
    background-color: #fff0f1;
  }
</style>
<div class="container" style="border: 2px solid black;">
  <div class="box">margin-外边距效果测试</div>
</div>

执行结果:

示例 2，段落上下左右边距属性实践。

代码语言：javascript复制

<style type="text/css" media="screen">
  p.top {margin-top: 0.25in;border: 1px solid red;background-color: rgba(95,45,212,0.5)}
  p.right {margin-right: 10%;border: 1px solid red;background-color: rgba(85,245,212,0.5)}
  p.bottommargin {margin-bottom: 25px;border: 1px solid red;background-color: rgba(45,245,12,0.5)}
  p.leftmargin {margin-left: 2.5cm;border: 1px solid red;background-color: rgba(145,45,12,0.5)}
</style>

<p>这个段落没有指定外边距。</p>
<p class="top"> Margin top</p>
<p>这个段落没有指定外边距。</p>

<p>这个段落没有指定外边距。</p>
<p class="right">margin right</p>
<p>这个段落没有指定外边距。</p>

<p>这个段落没有指定外边距。</p>
<p class="bottommargin">margin-bottom</p>
<p>这个段落没有指定外边距。</p>

<p>这个段落没有指定外边距。</p>
<p class="leftmargin">margin left</p>
<p>这个段落没有指定外边距。</p>

执行结果:

知识点补充

• 1.CSS 外边距合并说明 CSS外边距合并（叠加）是指当两个相邻的元素之间存在外边距时，它们的外边距会合并为一个外边距的现象。

例如，当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

示例，在下面的code中，两个相邻的<div>元素之间存在20px的外边距。由于CSS外边距合并的规则，这两个外边距会合并为一个外边距，所以实际上这两个<div>元素之间的垂直距离是20px，而不是40px。

代码语言：javascript复制

  <style>
    .box {
      border: 2px solid black;
      background-color: yellowgreen;
      margin-bottom: 20px;
    }
  
    .child1 {
      margin-top: 30px;
      margin-bottom: 10px;  /*关键点，请注释查看改变 */
    }
    </style>
    <!-- 1.相邻元素的外边距合并 -->
    <div class="box">我是div标签1</div>
    <div class="box">我是div标签2</div>
    <!-- 2.父子元素的外边距合并： -->
    <div class="box">
      <p class="child1">子元素</p>
    </div>

温馨提示: 需要注意的是，CSS外边距合并只会发生在垂直方向上，并且只会在普通文档流中的块级元素之间发生。对于浮动元素、绝对定位元素、内联块元素或者有边框、内边距或清除浮动的元素，外边距合并的规则会有所不同。

padding-内边距

描述: 内边距位于边框和内容区域之间, 与外边距不同其值必须是 0 或正的值，不能有负数的内边距；应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。

语法参数:

代码语言：javascript复制

/* 使用padding简写属性控制元素所有边, 参数个数对应的边同margin */
padding = <'padding-top'>{1,4}
/* 应用于所有边 */
padding: 1em;
/* 上边下边 | 左边右边 */
padding: 5% 10%;
/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;
/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;

/* 或者每边单独使用等价的普通属性 */
padding-top
padding-right
padding-bottom
padding-left

示例演示:示例 1.以像素为单位设置内边距。

代码语言：javascript复制

<style>
/**页面完整无缝隙,边框等于浏览器的可视页面的 空白区域*/
* {padding:0;margin:0;}  
h4 {
  background-color: lime;
  padding: 20px 50px;
}
h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}
</style>

<h4>此元素有合适的内边距。</h4>
<h3>此元素的内边距很大！</h3>

border-边框

描述: 边框是在边距和填充框之间绘制的，如果你正在使用标准的盒模型，边框的大小将添加到框的宽度和高度，如果你使用的是替代盒模型，那么边框的大小会使内容框更小，因为它会占用一些可用的宽度和高度，

CSS 的 border 属性是一个用于设置各种单独的边界属性的简写属性。

语法参数:

代码语言：javascript复制

/* 语法格式 */
border =
  <line-width>  ||
  <line-style>  ||
  <color>

line-width ：预定义线段宽度 `thin | medium | thick `参数
line-style ：预定义线段样式 `none | hidden | dotted | dashed | solid | double | groove | ridge  | inset | outset` 参数

/* 设置所有边的颜色、样式或宽度，请使用以下属性*/
border-width
border-style
border-color

/* 分别设置每边的宽度、颜色和样式，可以使用：例如  border-top-style、border-top-width*/
border-top
border-right
border-bottom
border-left

/* 设置单边的颜色、样式或宽度，可以使用最细粒度的普通属性之一：*/
border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color

/* 其他边框属性 */
border-block : 用于在样式表中的某处同时设置逻辑块向边框的各属性值
border-block-width
border-block-style
border-block-color
border-block-start : 用于在样式表中的某处同时设置逻辑块首边框的各属性值（顶部）。
border-block-end : 用于在样式表中的某处同时设置逻辑块末边框的各属性值（尾部）。

border-style 边框样式值说明:

格式示例:

代码语言：javascript复制

/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;

/* 例1：上边框是点状 右边框是实线 下边框是双线  左边框是虚线 */
border-style: dotted solid double dashed;
/* 例2: 上边框是点状 右边框和左边框是实线 下边框是双线 */
border-style: dotted solid double;

/* 例3：上边框是红色 右边框是绿色 下边框是蓝色 左边框是粉色 */
border-color:red green blue pink;
/* 例4：上边框是红色 右边框和左边框是绿色 下边框是蓝色 */
border-color:red green blue;
/* 例5：创建一个有宽度的不可见边框 */
border-color: transparent;

示例演示:示例 1.border 属性使用以及预定义边框样式展示。

代码语言：javascript复制

<style>
  .demo1 {
    margin: 0.2rem;
    padding: 1em;
    border: 0.5rem outset pink;
    border-radius: 12px;
    font: bold 1rem sans-serif;
  }

  .demo2 {
    margin: 1rem;
    padding: 2px;
    border-radius: 12px;
  }
</style>
<div class="demo1">
  I have a border, 我有一个边框，使用border属性设置outset样式。
</div>
<div class="demo2" style="border: 5px inset pink">
  我也是一个边框，使用border属性设置inset样式。
</div>
<div class="demo2" style="border: 5px dotted pink">
  我也是一个边框，使用border属性设置dotted样式。
</div>
<div class="demo2" style="border: 5px dashed pink">
  我也是一个边框，使用border属性设置dashed样式。
</div>
<div class="demo2" style="border: 5px solid pink">
  我也是一个边框，使用border属性设置solid样式。
</div>
<div class="demo2" style="border: 5px double pink">
  我也是一个边框，使用border属性设置double样式。
</div>
<div class="demo2" style="border: 5px dotted pink">
  我也是一个边框，使用border属性设置groove样式。
</div>
<div class="demo2" style="border: 5px groove pink">
  我也是一个边框，使用border属性设置ridge样式。
</div>

执行结果:

示例 2.为元素的四边设置不同的边框

代码语言：javascript复制

<style>
  div.test {
    border-top: dotted;
    border-right: dashed;
    border-bottom: solid;
    border-left: double;
  }
</style>
<div class="test">设置div元素四边不同的边框, A top right bottom left</div>

示例 3.border-block 元素顶部尾部边框示例演示

代码语言：javascript复制

<style>
  .container {
    background-color: #eee;
    color: #8b008b;
  }
  .demo3 {
    border-block: double green;
    writing-mode: horizontal-tb;
  }
  .demo4 {
    border-block-start: dashed red;
    writing-mode: vertical-rl;
  }
  .demo5 {
    border-block-end: solid rgb(23, 221, 122);
    writing-mode: horizontal-tb;
  }
</style>
<div class="container">
  <div class="demo3">
    我是 border-block 属性测试用例,针对文字方向的顶部以及尾部进行边框绘制
  </div>
  <div class="demo4">我是 border-block-start 属性测试用例</div>
  <div class="demo5">我是 border-block-end 属性测试用例,针对文字方向的尾部</div>
</div>

weiyigeek.top-border-block示例演示结果图

示例 4.创建有宽度的不可见边框，以及所有边框属性在一个声明之中。

代码语言：javascript复制

<style>
  a {text-decoration:none;}   /**去除下划线**/
  a:link, a:visited {   /**伪类**/
    border-style: solid;
    border-width: 2px;
    border-color: transparent;
    }
  a:hover {border-color: rgb(0, 0, 0);}   /**移动到A元素上面的时候进行转换边框颜色**/
  .demo6 > p {
    border:3px dotted rgba(42,128,85,0.5) !important; 
    border-style:dotted solid;
    border-color: transparent; /* 默认情况下，此优先级高，但是border属性后设置了important其优先级更高一些 */
  }
</style>
<div class="demo6">
  <a href="#">鼠标</a>
  <a href="#">点击移动到这里</a>
  <a href="#">会变变出边框</a>
  <p>所有边框属性在一个声明之中</p>
</div>

outline-轮廓

描述: 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用, 在 CSS 中使用 outline 属性来规定元素轮廓的样式、颜色和宽度。

Q: border 和 outline 有何区别?

outline 不占据空间，绘制于元素内容周围, 根据规范，outline 通常是矩形，但也可以是非矩形的。

语法参数:

代码语言：javascript复制

/* 在一条声明中设置多个轮廓属性的简写属性  */
/* 属性参数可使用以下一个、两个或三个值来声明，且顺序不重要。 */
outline = <'outline-color'>  || <'outline-style'>  || <'outline-width'>

/* 单独设置轮廓宽度、样式以及颜色 */
outline-width
outline-style ：可用样式名称与border一致。
outline-color

/* 其他相关属性 */
outline-offset ：用于设置 outline 与一个元素边缘或边框之间的间隙，即元素和轮廓间的宽度。

格式示例:

代码语言：javascript复制

/* 样式 */
outline: solid;

/* 颜色 | 样式 */
outline: #f66 dashed;

/* 样式 | 宽度 */
outline: inset thick;

/* 颜色 | 样式 | 宽度 */
outline: green solid 3px;

/* 设置设置轮廓与边框之间的距离 */
outline-offset: 3px;
outline-offset: 0.2em;

简单演示:

示例 1.outline 与 outline-offset 和 border 的联合使用。

代码语言：javascript复制

<style>
  div {
    margin: 20px;
    padding: 10px;
    width: 150px;
    height: 70px;
    border: 2px solid black; /*边框*/
    outline: 4px solid red; /*轮廓*/
    outline-offset: 16px; /*轮廓离边框的距离*/
  }
</style>

<p>
  <b>注释：</b>Internet Explorer 和 Opera 不支持 support outline-offset 属性。
</p>
<div>这个 div 在边框边缘之外 15 像素处有一个轮廓。</div>

示例 2.outline 与 outline-offset 属性使用演示。

代码语言：javascript复制

<style>
  a {
    border: 1px solid;
    border-radius: 2px;
    display: inline-block;
    margin: 10px;
    padding: 5px;
  }

  .demo1 {
    outline: 1px dashed rgb(21, 131, 235);
    outline-offset: 10px;
    background: rgb(168, 242, 255);
  }

  .demo2 {
    outline: 4px dotted rgb(0, 0, 0);
    outline-offset: 4px;
    background: #ffa;
  }

  /* 使用 outset 轮廓样式，并使用 invert 来翻转边框颜色，使其在不同的背景颜色中都是可见的  */
  p.invert {
    outline-style: outset;
    outline-color: invert;
  }
</style>
<p class="demo1">
  <a href="#">This link has a special focus style. outline 属性</a>
</p>
<a href="#" class="demo2"
  >This link has a special focus style. outline-offset 属性</a
>
<p class="invert">A invert outline-style</p>

执行结果:

总结，CSS 盒子模型相关属性

代码语言：javascript复制

height : 元素高度，可使用相对单位 % 或者绝对单位 px，下同。
width : 元素宽度
box-sizing: 替代（IE）盒模型
display : 改变盒子的外部显示类型是块级还是内联
padding : 元素内边距
margin : 元素外边距
border ：元素边框
  border-block: 元素头部与尾部边框
outline ：元素轮廓
  outline-offse: 设置轮廓与边框之间的距离

本文至此完毕，更多技术文章，尽情等待下篇好文！

原文地址: https://blog.weiyigeek.top/2023/9-7-775.html

css3 布局 模型 前端 全栈

0 人点赞