为什么要在样式初始化的时候设置{margin，padding}为0
在样式初始化时设置
{margin, padding}为0，是为了确保网页在不同浏览器和设备上的显示效果更加统一，并且减少浏览器默认样式对页面布局的影响。这样做的主要原因包括：
消除浏览器默认样式的影响：不同的浏览器对于 HTML 元素的默认样式可能存在差异，如
<body>、<ul>、<li>等元素在不同浏览器上的默认margin和padding可能不同。为了确保页面在不同浏览器上的显示效果一致，通常会将这些默认样式重置为0。更精准的布局控制：通过将
margin和padding设置为0，可以更精确地控制页面元素的布局，避免因为浏览器默认样式的影响导致布局偏差。这对于实现复杂的页面布局和样式设计至关重要。避免外边距合并：外边距合并是指相邻元素的外边距会合并为一个外边距的现象。通过将
margin设置为0，可以避免外边距合并带来的意外效果。当然，在实际项目中，并不是一定要将所有的
margin和padding设置为0，有时候会根据设计需求留出一定的间距。但是初始化时将它们设置为0是一个良好的习惯，可以提高开发效率和页面一致性。
1px如何设成0.5px(通过缩放)
在 Web 开发中，无法直接将元素的边框或宽度设置为 0.5px，因为大多数浏览器无法渲染这样的像素级别。然而，你可以通过 CSS 的缩放（scale）属性来实现类似的效果，但这并不是一个通用的解决方案，因为缩放会导致元素及其内容整体缩小。
以下是一个使用缩放来实现边框宽度为 0.5px 的示例：
.element { width: 100px; height: 100px; border: 1px solid black; transform: scaleY(0.5); }在这个示例中，我们定义了一个
.element类，设置了宽度和高度为 100px，边框为 1px 实线黑色。然后，通过transform: scaleY(0.5)将元素在垂直方向上缩放为原来的一半，从而使边框看起来像是 0.5px。需要注意的是，这种方法并不是真正的将边框宽度设置为 0.5px，而是通过缩放元素来模拟这种效果。此外，这种方法可能会影响到元素内部内容的布局和渲染，因此需要谨慎使用。
margin合并如何解决
在 CSS 中，相邻的两个块级元素的上下外边距可能会发生合并（margin collapse）的现象。合并的规则如下：
- 当相邻的上下外边距都是正数时，取两者中较大的值作为最终的外边距。
- 当相邻的上下外边距都是负数时，取两者绝对值中较大的值作为最终的外边距。
- 当相邻的上下外边距一个是正数一个是负数时，取两者相加的值作为最终的外边距。
- 当外边距发生合并时，会将合并后的外边距应用于两个相邻的块级元素之间。
在实际开发中，可以采用以下方法来解决 margin 合并的问题：
使用边界值：当相邻元素的上下外边距之间有固定的间隙时，可以通过在其中一个元素上应用
border、padding、或height来阻止外边距合并。.element { border-top: 1px solid transparent; /* 添加一个透明的边框 */ }使用内联块级元素：将相邻的块级元素改为内联块级元素，因为内联块级元素之间不会发生外边距合并的情况。
<div class="element"></div><div class="element"></div>.element { display: inline-block; /* 将块级元素改为内联块级元素 */ }使用
overflow: hidden：将父元素设置为overflow: hidden可以阻止其子元素的外边距合并。.parent { overflow: hidden; }使用
padding：为父元素添加 padding 可以防止子元素的外边距合并。.parent { padding: 1px 0; /* 添加上下 padding */ }
vue的指令
v-bind：用于动态地绑定 HTML 属性。
<a v-bind:href="url">Link</a>v-model：用于在表单元素上创建双向数据绑定。
<input v-model="message">v-if：根据表达式的值来条件性地渲染元素。
<h1 v-if="seen">Now you see me</h1>v-for：基于源数据多次渲染元素或模板块。
<ul> <li v-for="item in items" :key="item.id">{{ item.text }}</li> </ul>v-on：用于绑定事件监听器。
<button v-on:click="doSomething">Click me</button>v-show：根据表达式的值来条件性地显示元素。
<h1 v-show="seen">Now you see me</h1>v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。
<span v-pre>{{ this will not be compiled }}</span>v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。<div v-cloak> {{ message }} </div>v-text：更新元素的 textContent。如果要更新部分的 textContent，请使用 {{ Mustache }} 插值。
<span v-text="message"></span>v-html：更新元素的 innerHTML。注意，内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
<div v-html="htmlContent"></div>
vue的修饰符
.prevent：阻止默认行为。通常用于事件处理程序，阻止默认的事件行为。
<form v-on:submit.prevent="onSubmit">...</form>.stop：阻止事件冒泡。
<div v-on:click.stop="onClick">...</div>.capture：添加事件侦听器时使用事件捕获模式。即在捕获阶段触发事件而不是冒泡阶段。
<div v-on:click.capture="onClick">...</div>.self：只当事件是从事件源（即元素自身）触发时才触发回调。
<div v-on:click.self="onClick">...</div>.once：事件只触发一次，然后移除监听器。
<button v-on:click.once="onClick">Click me</button>.passive：滚动事件的默认行为会立即触发，不会等待执行
preventDefault()。<div v-on:scroll.passive="onScroll">...</div>.native：监听组件根元素的原生事件。
<my-component v-on:click.native="onClick">...</my-component>.sync：语法糖，实现父子组件之间双向绑定。
<child-component :foo.sync="parentFoo"></child-component>
冒泡和默认事件
冒泡（Bubbling）：
事件冒泡是指事件在触发后，从目标元素逐级向上传播至 DOM 树根节点的过程。也就是说，如果一个元素的某个事件被触发了，它的父元素也会接收到该事件。这种从内向外传播的过程就是事件冒泡。
例如，当用户在一个按钮上点击时，该点击事件会首先触发在按钮上绑定的事件处理程序，然后冒泡至按钮的父元素、父元素的父元素，一直传播至文档根节点。
默认事件（Default Event）：
默认事件是指在特定情况下，浏览器自动触发的事件。例如，当用户在表单的
<input>元素中按下回车键时，浏览器会自动提交表单。这个自动提交的行为就是默认事件。有时候，我们需要阻止事件的默认行为，例如在表单提交时使用 JavaScript 阻止页面刷新。这就是通过调用
event.preventDefault()方法来阻止默认事件。冒泡和默认事件常常会一起使用。例如，当用户在一个链接上点击时，浏览器会触发链接的点击事件，并且默认情况下会跳转到链接的目标地址。在这种情况下，我们可以通过阻止事件冒泡和阻止默认事件来定制链接的点击行为，例如在点击链接时弹出一个提示框而不是跳转到目标地址。
如何内存清理
在 JavaScript 中，内存清理是通过垃圾回收器（Garbage Collector）来完成的，它负责自动监视和清除不再使用的内存。对于闭包产生的内存问题，通常可以采取以下几种方法来解决：
避免循环引用：当闭包中引用了外部作用域中的变量时，如果外部变量引用了闭包内的变量，就会形成循环引用，导致内存泄漏。为了避免这种情况，可以尽量减少闭包的使用，或者确保闭包内的变量不会被外部变量长期引用。
手动解除引用：在不需要使用闭包时，手动解除对闭包的引用可以帮助垃圾回收器更快地释放内存。例如，将闭包赋值为 null，或者将包含闭包的变量赋值为 null。
let closure = function() { // 闭包代码 }; // 手动解除引用 closure = null;
使用事件委托：在事件处理程序中使用闭包时，可能会导致事件处理程序长期保存对 DOM 元素的引用，从而导致内存泄漏。为了避免这种情况，可以使用事件委托，将事件处理程序绑定到父元素上，从而减少闭包的使用。
使用 WeakMap 或 WeakSet：如果闭包中的变量是对象或 DOM 元素，可以考虑使用 WeakMap 或 WeakSet 来存储这些对象，以避免循环引用导致的内存泄漏。WeakMap 和 WeakSet 不会阻止对象被垃圾回收器回收，只要对象没有其他的引用。
let weakMap = new WeakMap(); let obj = {}; weakMap.set(obj, 'value'); // 不再需要 obj 时，WeakMap 会自动释放对 obj 的引用 obj = null;
- 性能优化：尽量避免创建过多的闭包，因为闭包的创建和销毁会消耗内存和 CPU 资源。可以考虑使用其他方式来实现相同的功能，例如使用局部变量代替闭包。
综上所述，通过合理的设计和编码习惯，可以有效地避免闭包产生的内存问题，并确保 JavaScript 应用程序的内存清理工作正常进行。
路由的两种模式
Hash 模式：
特点：
- 兼容性好：支持所有现代浏览器，包括老版本的 Internet Explorer。
- 部署简单：不需要特殊的服务器配置，可以在任何服务器环境下使用。
- 无刷新加载：路由跳转时不会触发页面的重新加载，提供了较好的用户体验。
优点：
- 兼容性强：适用于各种浏览器环境，包括老旧浏览器。
- 部署简单：不需要特殊的服务器配置，可在静态服务器环境下使用。
缺点：
- URL 不友好：URL 中带有
#符号，看起来不够美观，不利于 SEO。- Hash 模式的路由不会被搜索引擎索引：搜索引擎对于带有
#符号的 URL 不会进行索引，影响网站的 SEO。- 存在历史记录混乱问题：因为所有路由都是在同一个 URL 下进行的，所以浏览器的历史记录可能会变得混乱。
History 模式：
特点：
- URL 友好：URL 中不带
#符号，看起来更加美观，有利于 SEO。- 无刷新加载：与 Hash 模式相同，路由跳转时不会触发页面的重新加载。
- 可与服务器配合：通过服务器端配置，可以实现更灵活的路由配置。
优点：
- URL 友好：URL 更加美观，有利于 SEO，提高网站的搜索可见性。
- 可与服务器配合：可以在服务器端进行路由配置，更加灵活。
缺点：
- 兼容性稍差：不支持老版本的 Internet Explorer，需要在较新的浏览器中使用。
- 需要服务器配置：需要在服务器端进行特殊的配置，以处理直接访问或刷新路由时的情况。
综合考虑两种模式的特点、优缺点，开发者可以根据项目需求和实际情况选择适合的路由模式。如果对 SEO 和 URL 美观度要求较高，并且能够配置服务器环境，可以考虑使用 History 模式；如果需要兼容老旧浏览器或者部署简单，可以选择 Hash 模式。
279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
