内联元素的 padding 会对样式与布局产生影响 可以在不影响当前布局的情况下，增加链接或按钮的点击区域大小。 实现垂直分隔符 对于非替换元素的内联元素，不仅 padding 不会加入行盒高度的计算，margin 和 border 也都是如此，都是不计算高度，但实际上在内联盒周围发生了渲染。 padding 的百分比值应用于块级元素： 和 margin 属性不同，padding 属性是不支持负值的； padding 支持百分比值，但是，和 height 等属性的百分比计算规则有些差异，差异在于：paddi

padding 属性是 CSS 中用于设置元素内边距的重要属性。默认情况下，box-sizing 的值是 content-box，这意味着元素的 padding 会增加其总体尺寸。虽然将 box-sizing 设置为 border-box 可以解决这一问题，使 padding 和 border 不再增加元素尺寸，但最佳实践是遵循无宽度和宽度分离的原则。 值得注意的是，内联元素的垂直 padding 虽然不会影响其周围元素的布局，但会视觉上增大点击区域，这对于提升用户体验尤为有用，比如增大链接或按钮的点击区域。此外，padding 的

padding属性 box-sizing默认是content-box，使用 padding 会增加元素的尺寸，通常会设置border-box解决，但是不推荐，尽量采用无宽度以及宽度分离准则实现才是好的解决之道。 内联元素的 padding 在垂直方向同样会影响布局，只是视觉上并没有改变和上一行下一行内容的间距，因此，给我们的感觉就会是垂直 padding 没有起作用。我们可以利用这种特性在不影响当前布局的情况下，优雅地增加链接或按钮的点击区域大小，或者实现高度可控的分隔线，还可以实现

4.2 paddingpadding 与元素尺寸 块级元素 box-sizing: content-box时，使用 padding 会增加元素的尺寸。例如，.box{width:80px;padding:20px;}此时宽度尺寸是120px 不推荐* { box-sizing: border-box; }，尽量采用无宽度以及宽度分离准则 box-sizing:border-box时，当padding足够大时也会改变元素尺寸。例如，.box{width:80px;padding:20px 60px;box-sizing:border-box}，此时的 width 会无效，最终宽度为 120 像素(60px×2)，而里面的内容则表现为“首选最 小宽度”。 内联元素(不包括图片等替换元素) 内联元素

4.2 padding 属性 2.1 padding 与元素的尺寸：默认的 box-sizing 是 content-box，所以使用 padding 会增加元素的尺寸。内联元素的 padding 在垂直方向同样会影响布局，影响视觉表现。只是因为内联元素没有可视宽度和可视高度的说法（clientHeight 和 clientWidth 永远是0），垂直方向的行为表现完全受 line-height 和 vertical-align 的影响，视觉上并没有改变和上一行下一行内容的间距。 2.2 padding 的百分比值。padding 百分比值无论是水平方向还是垂直方向均是相对于宽度计算的

padding属性 box-sizing默认是content-box，使用 padding 会增加元素的尺寸，通常会设置border-box解决，但是不推荐，尽量采用无宽度以及宽度分离准则实现才是好的解决之道。 内联元素的 padding 在垂直方向同样会影响布局，只是视觉上并没有改变和上一行下一行内容的间距，因此，给我们的感觉就会是垂直 padding 没有起作用。我们可以利用这种特性在不影响当前布局的情况下，优雅地增加链接或按钮的点击区域大小，或者实现高度可控的分隔线，还可以实现

padding 与元素尺寸 CSS 的 padding 属性用于设置元素内容与边框之间的内边距，它直接影响元素的内容区域大小。padding 的值可以为像素、百分比或其他长度单位。元素的总尺寸由内容、padding、border 和 margin 共同决定，但 padding 不会影响 margin 或 border 的大小。使用 box-sizing 属性可以改变计算方式：默认值 content-box 会将 padding 计入内容区域之外，而 border-box 会将 padding 包含在元素的宽度和高度中，从而简化布局计算。 padding 的百分比值 CSS 中 padding 的百分

4.2主要介绍了盒模型中的padding属性，padding 的性格是最温和的。 所谓“温和”指的是我们在使用 padding进行页面开发的时候很少会出现意想不到的情况，也就是坑比较少。 第一小结介绍了padding与元素的尺寸： 块级元素中，在box-sizing：content-box时，padding会增加元素的尺寸；而在box-sizing: border-box;时，我们认为此时padding不会影响元素的尺寸，实际上并不是这样，当padding足够大的时候，元素的内部的内容表现为：首选最小宽度； 内联元素中，内联元素的

padding 与元素尺寸 1、CSS 的 padding 属性用于设置元素内容与边框之间的内边距，它直接影响元素的内容区域大小。padding 的值可以为像素、百分比或其他长度单位。元素的总尺寸由内容、padding、border 和 margin 共同决定，但 padding 不会影响 margin 或 border 的大小。使用 box-sizing 属性可以改变计算方式：默认值 content-box 会将 padding 计入内容区域之外，而 border-box 会将 padding 包含在元素的宽度和高度中，从而简化布局计算。 ----------------------------------------------

给行内元素设置padding看起来似乎没有生效，并没有影响页面的布局，但其实并不是没有生效，只是没有影响布局而已。这种不影响其他元素布局而是出现层叠效果的现象，分位两类：一类是纯视觉层叠，不影响外部尺寸，另一类会影响外部尺寸（注意只是影响外部元素尺寸，并不是影响布局）。内联元素的padding会改变父元素的高度，超出时会有滚动条效果。 padding的妙用： 1. padding不会影响布局，但是却可以实实在在的影响元素的热区，如果我们想扩

Padding 属性总结特点 性格温和：用于设置元素内容与边框之间的内边距，对外部布局影响小。 尺寸规则： 默认 box-sizing: content-box，padding 会增加元素总尺寸。 设置 box-sizing: border-box 后，padding 包含在宽高内，但大 padding 可能会导致内容尺寸不足。 百分比计算：无论水平方向还是垂直方向，padding 的百分比值均相对于宽度计算。 对内联元素的作用：垂直和水平 padding 均有效，但仅影响视觉表现，不改变布局间距。 实用场景 增加点击区域：优雅地扩大

1. padding 与元素的尺寸 padding 会增加元素的尺寸, 如果 padding 值足够大，设置了 box-sizing:border-box也会无效。relative 元素的定位、盒阴影 box-shadow 以及 outline 不会影响其他元素布局而是出现层叠效果。但这种层叠现象分为两类：一类是纯视觉层叠，不影响外部尺寸；另一类则会影响外部尺寸。区分的方式很简单，如果父容器 overflow:auto，层叠区域超出父容器的时候，没有滚动条出现，则是纯视觉的；如果出现滚动条，则会影响尺寸、影响布局。 内联元素

4.2 温和的 padding 属性 4.2.1 padding 与元素的尺寸 因为默认的box-sizing是content-box，所以使用padding会增加元素的尺寸。 尺寸表现对具有块状特性的元素和内联元素而言有些许不同。 CSS中还有很多其他场景或属性会出现这种不影响其他元素布局而是出现层叠效果的现象。比如：relative元素的定位、盒阴影box-shadow以及outline等。这些层叠现象虽然看似类似，但实际上是有区别的。分为两类：一类是纯视觉层叠，不影响外部尺寸；另一类则会影响外部尺寸。盒阴

padding 与元素尺寸 CSS 的 padding 属性用于设置元素内容与边框之间的内边距，它直接影响元素的内容区域大小。padding 的值可以为像素、百分比或其他长度单位。元素的总尺寸由内容、padding、border 和 margin 共同决定，但 padding 不会影响 margin 或 border 的大小。使用 box-sizing 属性可以改变计算方式：默认值 content-box 会将 padding 计入内容区域之外，而 border-box 会将 padding 包含在元素的宽度和高度中，从而简化布局计算。 padding 的百分比值 CSS 中 padding 的百分

核心思想：表示一个作用于某对象结构中的各元素的操作。它使你可以在不修改各元素的类的前提下定义作用于这些元素的新操作。 结构：Visitor模式包含两个主要角色，即访问者（Visitor）接口和元素（Element）接口（或抽象类）。访问者接口声明了一个或多个访问操作，每个操作接受一个被访问的元素作为参数。元素接口声明了一个接受访问者对象的方法（通常称为accept），该方法接受一个访问者对象作为参数。具体元素类实现了元素接口，并提供

策略模式 通过定义一系列算法，并将每个算法封装在一个单独的策略类中，达到算法可以互相替换，并且算法的变化不会影响到使用算法的客户端。 在策略模式中，客户端将所需策略传递给上下文，上下文通过通用接口与策略交互，从而实现不同的功能。 应用场景： 1.系统需要动态地在几种算法中选择一种 2. 隔离业务逻辑与算法实现

1. 策略是一种行为设计模式，它能让你定义一系列算法，并将每种算法分别放入独立的类中，以使算法的对象能够相互替换。 2.策略模式建议找出负责用许多不同方式完成特定任务的类，然后将其中的算法抽取到一组被称为策略的独立类中。

访问者模式（Visitor Pattern）定义 访问者模式是一种行为设计模式，它允许你在不改变对象结构的前提下，定义作用于这些对象的新操作。通过访问者模式，我们可以将操作与对象分离，从而可以在不修改对象的类的情况下，增加新的操作。 结构 在访问者模式中主要有以下几个角色： Visitor（访问者）：定义访问者接口，为每一个具体元素（ConcreteElement）声明一个访问操作。 ConcreteVisitor（具体访问者）：实现访问者接口，为每个具体元素定义具体的操

5.9 strategy（策略）-对象行为型模式 作用：定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换；使得算法可独立于使用它的客户而变化。 一个类定义了多种行为，并且这些行为在这个类的操作中以多个条件语句的形式出现。将相关的条件分支移入它们各自的Strategy类中以代替这些条件语句。 实际例子：联运dsp中，系统需要根据配置进行多维度用户筛选逻辑，运行时根据配置选取不同的筛选策略进行运作；

策略模式 主要是为了在运行时替换算法，且符合单一职责原则。 模板方法模式 则适用于子类继承或实现算法的部分步骤，以便重用代码。 访问者模式 用于在不修改数据结构的情况下增加新操作。

5.9 STRATEGY(策略)一对象行为型模式 意图:定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换。 优点：使得算法可独立于使用它的客户而变化。 应用场景： 适用于算法在运行时动态选择的情况，以及算法需要封装、切换或维护的场景。例如，在一个电商系统中，可以用来实现不同的支付算法（如支付宝支付、微信支付、信用卡支付等），每种支付方式可以作为一个策略类。 5.10 TEMPLATE METHOD(模板方法)一类行为型模式 意图：定义一个操

以下是对这三个章节内容的详细归纳和总结： 5.9 Strategy（策略）模式 核心思想：定义一系列的算法，把它们一个个封装起来，并且使它们可互相替换。本模式使得算法可独立于使用它的客户而变化。 结构：Strategy模式包含三个主要角色，即策略（Strategy）接口、具体策略（ConcreteStrategy）类和上下文（Context）类。策略接口定义了一个算法家族，所有具体策略类都实现了这个接口。具体策略类实现了具体的算法。上下文类持有一个策略对象的引用，在运

5.9strategy（策略）-对象行为型模式 就是定义一系列算法，讲每个算法都封装一下，运行时动态选择算法，这个在ADX系统里有个实际应用的例子，就是系统需要配置很多用户筛选逻辑，在运行的时候根据不同的配置应用不用的筛选逻辑，这个就是当前ADX内支持的不同策略 5.10TEMPLATE METHOD(模板方法)类行型模式 主要就是有一个固定流程，然后用不同的变化来实现，这个目前在非标系统的投放后台也有实际的应用，每个资源的投放流程都是相同的，不同的资

5.9 策略模式（Strategy Pattern） 行为设计模式 它定义了一系列算法，并将每一个算法封装起来，使它们可以互换。策略模式使得算法可以独立于使用它的客户端而变化。 应用场景： 电商系统中的支付方式：不同用户可以选择不同的支付方式（如信用卡支付、支付宝支付、微信支付等），每种支付方式可以作为一个策略类。 5.10 模版方法模式（Template Method Pattern）行为型模式 它在一个抽象类中定义了一个算法的骨架，将一些具体的步骤延迟到子类中实现

中介者模式 中介者模式是一种行为设计模式，用来对多个对象和类进行解耦，降低对象和类的通信复杂性。 中介者模式定义了一个中介对象来封装一系列对象之间的交互。中介者使各对象之间不需要显式地相互引用，从而使其耦合松散，且可以独立地改变它们之间的交互。 具体到现实中的例子，可以参考聊天室，不同的会员等级拥有不同的特权，比方说钻石会员与普通会员聊天，如果两个会员类直接交互，那普通会员就需要知道钻石会员的各种细节

content 辅助元素生成 通常，我们会把 content的属性值设置为空字符串： .element:before {content: '';} 清除浮动 辅助实现“两端对齐”以及“垂直居中/上边缘/下边缘对齐”效果。 content 字符内容生成 配合@font-face 实现图标字体 也可在 content 中使用 unicode 字符通过在 content 中写入＼A，通过换行插入 3 行内容，分别是 3 个点、2 个点和 1个点，然后通过 transform 控制垂直位置，依次展示每一行的内容。 content 图片生成 用 url 显示图片，尺寸不好控制，更多用 backg

content通常用于::before、::after这两个伪元素上，通常设置为””,通过css实现图形、布局或者辅助元素，与直接写HTML相比，代码更干净整洁 常见的应用就是用来清除浮动 content 字符内容生成 配合@font-face 规则实现图标字体效果 content还可以插入Unicode编码 content 图片生成 使用url显示图片，不支持css3渐变背景图，无法改变图片的尺寸，通常使用background-imagcontent 开启闭合符号生成 content属性可以设置open-quote、close-quote，然后通过quotes可以指定不同的前后符

4.1.2 Content内容生成技术总结 Content 辅助元素生成：通过将 content 属性的值设置为空字符串，结合其他 CSS 代码生成辅助元素。这些元素可以用于图形效果或特定布局的实现。 Content 字符内容生成：直接在 content 属性中写入字符内容，支持中英文字符。常见应用包括配合 @font-face 规则来实现图标字体效果。 Content 图片生成：通过 url 功能符显示图片。虽然支持多种图片格式，但由于图片尺寸的控制较为困难（设置宽高不能改变图片的固有尺寸），在实际

content可以用于： 1. 伪元素（辅助元素生成）一般有两个作用：清除浮动和 实现两端对齐效果 2. 字符内容生成 3. 图片内容生成 可以通过content计数器实现计数效果： * counter-reset：给计数器起个名字，并且表示从何处开始计数 * counter-increment：值为counter-reset指定的1个或多个关键字，后面可以跟随数字，表示每次计数的变化值 * counter()/counters()是方法而不是属性，这里的作用是显示计数，counter还支持级联，也就是说一个content属性可以有多个conter()方法 *

CSS content 属性及其在实际项目中的应用总结CSS 的 content 属性是与 ::before 和 ::after 伪元素紧密相关的强大工具，广泛应用于内容生成、图形效果实现、布局调整等多个方面。以下是对 content 属性及其在具体项目中应用的详细总结和讲解。1. content 属性的基本用法 生成辅助元素： 用途：创建不影响 HTML 结构的辅助元素，用于实现清除浮动、装饰性图形等。 示例： .clear:after { content: ''; display: table; /* 或者 block */ clear: both; } 优点：保持 HTML 代码简洁

4.2 padding 属性 2.1 padding 与元素的尺寸：默认的 box-sizing 是 content-box，所以使用 padding 会增加元素的尺寸。内联元素的 padding 在垂直方向同样会影响布局，影响视觉表现。只是因为内联元素没有可视宽度和可视高度的说法（clientHeight 和 clientWidth 永远是0），垂直方向的行为表现完全受 line-height 和 vertical-align 的影响，视觉上并没有改变和上一行下一行内容的间距。 2.2 padding 的百分比值。padding 百分比值无论是水平方向还是垂直方向均是相对于宽度计算的

4.1.2 content 内容生成技术 content 属性几乎都是用在::before/::after 这两个伪元素 ::before/::after 伪元素技术 注：匿名替换元素，content生成的文本无法选中、无法复制，且无法被屏幕阅读设备读取或搜索引擎抓取。 空字符串内容：通常将content设置为空字符串（""），然后利用其他CSS代码来生成辅助元素或实现特定效果。 （清除浮动，辅助实现“两端对齐”以及“垂直居中/上边缘/下边缘对齐”效果。） 字符内容生成：直接写入字符内容，如配合@font-

content 内容生成技术 在实际项目中，content 属性几乎都是用在::before/::after 这两个伪元素中，因此，“content 内容生成技术”有时候也称为“::before/::after 伪元素技术”。 1．content 辅助元素生成 通常是会把 content的属性值设置为空字符串，然后，利用其他 CSS 代码来生成辅助元素，实现图形效果，或特定布局。 2．content 字符内容生成 content 字符内容生成就是直接写入字符内容，中英文都可以，比较常见的应用就是配合@font-face 规则实现图标字体效果。 3

4.1.2content内容生成技术 1. content 辅助元素生成 我们会把 content的属性值设置为空字符串，利用其他 CSS 代码来生成辅助元素，或实现图形效果，或实现特定布局。 2. content 字符内容生成 content 字符内容生成就是直接写入字符内容，中英文都可以，比较常见的应用就是配合@font-face 规则实现图标字体效果。 3. content 图片生成 content 图片生成指的是直接用 url 功能符显示图片。虽然支持的图片格式多种多样，但是实际项目中，content 图片生成用得并不多，主

4.1.2content内容生成技术 1. content 辅助元素生成 我们会把 content的属性值设置为空字符串，利用其他 CSS 代码来生成辅助元素，或实现图形效果，或实现特定布局。 2. content 字符内容生成 content 字符内容生成就是直接写入字符内容，中英文都可以，比较常见的应用就是配合@font-face 规则实现图标字体效果。 3. content 图片生成 content 图片生成指的是直接用 url 功能符显示图片。虽然支持的图片格式多种多样，但是实际项目中，content 图片生成用得并不多，主

4.1.2content内容生成技术 1. content 辅助元素生成 我们会把 content的属性值设置为空字符串，利用其他 CSS 代码来生成辅助元素，或实现图形效果，或实现特定布局。与使用显式的 HTML 标签元素相比，这样做的好处是 HTML 代码会显得更加干净和精简。 2. content 字符内容生成 content 字符内容生成就是直接写入字符内容，中英文都可以，比较常见的应用就是配合@font-face 规则实现图标字体效果。 3. content 图片生成 content 图片生成指的是直接用 url 功能符显示图片

content 内容生成技术 在CSS中，content 属性用于生成内容并结合伪元素（如 ::before 和 ::after）来插入额外的元素，这些元素本质上并不在HTML文档中存在，而是通过CSS样式动态生成。这样可以在不修改HTML结构的情况下，增加页面的视觉效果或者功能性元素，简化代码结构，并提升开发效率。 字符内容的生成 使用 content 属性的核心目的是为了实现无侵入式的内容生成，即通过CSS控制页面的表现，而不需要在HTML中增加额外的标签。它使得页面的结构保持简

5.6 备忘录模式（Memento Pattern） 备忘录模式提供了一种在不破坏封装性的前提下捕获一个对象的内部状态，并在该对象之外保存这个状态的方法。这样，以后就可将该对象恢复到原先保存的状态。它通常用于实现对象的“撤销”操作，或者用于在对象的状态发生变化时保存其历史状态。 5.7 观察者模式（Observer Pattern） 观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。当主题对象状态发生变化时，它的所有依赖者（