中间即使不怎么情愿也在努力的每周更新博客，但是自从9月份以来，第一次因为工作需要加班而断更之后，后面好像很容易找到理由断更。...从这件事上我学到了一点：在坚持一件事的时候千万要坚持，只要中间放弃一次，后续就可以心安理得的将其抛之脑后。这次在这里也是希望自己能够再次坚持之前的每周至少一更。即使没有内容。。。。...，但是我在实践中发现它好像并没有，原来当时我忘记了设置元素的宽度，而元素默认的宽度是与父元素相同的，这样就导致margin:auto这个属性认为不需要给外边距，所以也就没有居中，只有给了宽度，它才会将元素相对于父元素居中...这个时候很容易就产生一种想法，随着边框的加粗，最终上下或者左右边框完全占据元素的所有空间，而另一侧为空，那么就可以产生一个类似于箭头的效果，根据这个想法，我们再修改一下上面的CSS代码 .div1{...： 页面中几乎每一个元素写了它的属性，而且有的属性是几乎类似的，代码只是简单的完成了页面没有考虑到重用 页面是静态的，简单的利用HTML+CSS来做展示，没有交互的东西，而原始的模板是有的，交互这个的部分我想学习了
侧边栏是从零开始创建 WordPress 主题系列教程的第六篇，这一篇我们主要讲解 WordPress 主题的侧边栏，让你很快掌握它的结构，并能编码和样式化它。... - 开始无序列表 - 结束无序列表 第3步：给这个无序列表添加原属 增加一个列表元素（LI）到无序列表（UL）的中间并把一个子标题添加到这个列表中。 <?...现在应该可以看到 Categories 子标题结构应该这样： 子标题前面的小圆点指明这个子标题是在一个列表元素中（LI）。如果无序列表（UL）有两个列表元素，那么将有两个小点。...下面是分类链接列表的样子： 默认的分类是 Uncategorized。如果你没有把日志发布到多个分类下面，那么你的列表链接列表应该是只有一个链接 Uncategorized。...查看页面源代码；可以看到每个连接的周围都已经有一组列表元素的标签。 当处理侧边栏，无序列表和列表元素的时候，我们一定记得规则 #1：按顺序关闭所有标签。
网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。 HTML是什么 ---- HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。...初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。 内容（Content）：元素的内容，本例中就是所输入的文本本身。...； 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状； 内联元素也会遵循盒模型基本规则，如可以定义padding...基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，我们没有任何理由再选用其他编码。 — 元素。...| | | 代表章节、文章或其他长内容中段落之间的分隔符。 | | | 定义一个有序列表。 | | | 定义一个无序列表。
即使每次都能实现效果，但是代码不美观，可塑造性很强； 再看这本书的时候，我自个一个劲的在感叹这书写的真好。如果当年我入门 CSS 是看这本书该多好呀！...而且我们都知道 float 会造成高度坍塌，破坏正常的文档流.....文档流被我们破坏之后又要各种打补丁去修改，结果导致代码冗余，可塑性不好等等 我们可以直接用 direction direction:...因为 vertical-rl 此时的文档流为垂直方向，rl 表示水平方向，此时再设置 direction:rtl ，实际上值 rtl 改变的是垂直方向的内联元素的文本方向，一横一纵，没有交集。...推荐理由二：第 10 章 元素的显示与隐藏 《CSS 世界》 的第 10 章 元素的显示与隐藏，看到元素的显示与隐藏，就想到了 display: none 和 visibility: hidden;她们的区别就是一个占据空间...举个例子，10 个列表从 1 开始递增，假设第二个列表设置了 display:none，则原来的第三个列表计数变成 2 ，最后总计数是 9 。
例如，等宽等高的按钮将有一个1的长宽比。这样，我们可以很容易地创建适应其内容和不同图标大小的按钮，同时保持所需的形状。...为嵌套列表添加一个额外的类 .list-highlight，它添加了一个背景颜色，并调整了间距和边距，因此嵌套列表看起来更加突出。.../* 嵌套列表的默认样式 */.list :is(ol,ul) { margin: 0.25em 0 1em;}/* 嵌套列表的实用类 */.list-highlight { background...没有理由给z-index指定一个更高的值。因为工具提示需要刚好在文本的上方。一段时间后，一个边缘案例发生了，标题文本最终出现在工具提示之上。...它创建了一个新的堆叠上下文或一个组。它告诉浏览器不要把这两个堆叠组混在一起，即使我们把标题的z-index值提高到可能的最高值也不行。
在新版本的 React 当中，我们通过类定义组件来声明一个有状态组件，之后在它的构造方法中初始化组件的 state，我们可以先赋予它默认值。...之后就可以在组件中通过 this.state 来访问它，和之前的 props 一样，初始化 state 之后，如果我们想改变它，是不可以直接对其赋值的，直接修改 state 的值没有任何意义，因为这样的操作脱离了...而假如它是 Todo 应用中用来添加新事项的输入框，我们就没有特别的理由需要实时获取其中的数据，只需要在添加事项的事件触发时获取输入框中的值即可，这个地方就可以使用非受控组件。...因此你应当给数组中的每一个元素赋予一个确定的标识。 一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。... ); 当元素没有确定的 id 时，你可以使用他的序列号索引 index 作为 key。
ul 标签代表无序列表（与有序列表或数字序号列表相对应），在本示例中，你可以用它来存放列表信息。 我们无法用只言片语就说清楚 HTML 元素的语义，以及何种情况用何种标签。...article、div、li、ul 以及 p 标签都是块级元素。 注意，在上面的例子中，为什么即使 img 标签是行内元素，头像图片依然独占一行？因为它下方的 div 是块级元素。...此空间的大小也由默认样式控制：p 标签的顶部和底部都有 margin。 你也会注意到按钮列表的圆点，以及列表的缩进行为。这些也都是默认样式。我们马上就要修改这些默认样式了。... 看着好像没有变化。 ? 这是因为 div 作为块级元素（如果没有空行就引入一个）是看不见的。...移除列表的样式 无序列表 ul 和其中的列表项 li 在左侧窝藏了很大空间，还有一些圆点。这都不是我们想要的效果。 我们可以把无序列表左侧的空隙都清除掉。
继承是指包含在内部样式的标签能够拥有外部标签的样式性，即子元素可以继承父元素的属性。这种继承性允许样式不仅应用于某个特定的元素，同时也应用于其后代，而其后代所定义的新样式，却不会影响父代样式。...这没有任何原因，只是因为它就是这么设置的。举个例子来说：border属性，大家都知道，border属性是用来设置元素的边框的，它就没有继承性。...因此，不管一条规则具有多高的权重，如果没有其他规则能应用于这个继承元素，那么它也只是个被继承的规则而已，举例说明。...> 举例列表二 举例列表三 举例列表四 结果： ?...为什么我们在ul里面设置了颜色为白色，但是显示出来的颜色却变成了灰色呢？因为带选择符li的显式声明的权值比从ul white规则那里继承过来的权值要大，所以每个列表项都是灰色的。
image-20181229091520994 假设我们想要将第一个列表项的内容修改为 “List item one”，并添加第二个列表项。...更进一步，由于 API 的设置方式，在更新文档时，比起查找和更新特定元素所带来的昂贵的性能消耗，一次更新较大的范围通常会更简单。 回到我们的列表例子，我们使用新的元素整个替换会更合适。...请注意，这是一个介绍 Virtual DOM 如何工作 的例子，它时极度简化的，在这里有很多我没有涉及到的细节。...通过开发者工具，我们可以看到具体变化的那些元素。...它将 DOM 表示为Javascript 对象，我们可以根据需要随时修改。 然后整理对该对象所做的更改，统一修改 DOM ，以降低修改 DOM 的频率。
它就包含另一个元素的元素，一般我们叫它 wrapper。...这意味着，我们可以查询父元素的宽度并据此修改它。考虑下图 注意，每个卡片都有一个黄色的轮廓线，代表每个组件的父组件。使用CSS容器查询，我们可以根据父组件的宽度修改组件。...作为一名设计师，一开始考虑父级宽度可能有点奇怪，但这是未来的发展方向。我们为前端开发人员提供每个组件的细节和版本，他们可以使用它们。...CSS容器查询用例 我们来探索一些可以使用CSS容器查询实现的用例。 聊天列表 我在Facebook messenger上看到了这种模式。聊天列表根据视口宽度改变。...我们可以使用CSS容器查询来实现它。 当有足够的空间时，清单将展开并显示每个用户的名称。聊天列表的父元素可以是动态调整大小的元素(例如:使用CSS视口单元，或CSS比较函数)。
即使你违反了，代码还是能照常运行，但例外应该尽可能少且有合理的理由。 优先级 C：谨慎使用 有些 Vue 特性的存在是为了照顾极端情况或帮助老代码的平稳迁移。...这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。...当你需要编辑一个组件或查阅一个组件的用法时，可以更快速的找到它。...：谨慎使用 (有潜在危险的模式) 没有在 v-if/ v-else-if/ v-else 中使用 key 谨慎使用 如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个 <...然后修改选择器，使得在匹配选择器的元素中，只有带这个特性才会真正生效 (比如 button[data-v-f3f3eg9])。
item">List item 上面是一个只包含一条数据的无序列表，能够转成下面的 DOM 对象： 假设我们想要将第一个列表项的内容修改为...item">List item one List item two`; 替换整个无序列表会比修改特定元素更好。...因为它是一个简单的 Javascript 对象，我们可以随意并频繁地操作它，而无须触及真实的 DOM 。 不一定要使用整个对象，更常见是使用小部分的虚拟 DOM 。...例如，我们可以处理列表组件，它将对无序列表元素进行相应的处理。...小结 回顾一下，虚拟 DOM 是一种工具，使我们能够以更简单，更高效的方式与 DOM 元素进行交互。它是 DOM 的 Javascript 对象表示，我们可以根据需求随时修改。
通过去除那些表现元素，并改掉那些没有任何好处的坏习惯，我们就可以达到上述的目的。 这些坏习惯折磨着网络中的许多站点，特别是那些将 CSS 代码与主要基于表格的布局混合在一起的站点。...正如上一节中我们讲到的那样，每个元素都可以被结构化，CSS 可使得一个有序或无序的列表显示为彻头彻尾的导航栏，其中还拥有反转按钮效果。...在W3C的描述中我们可以找到理解 div 元素的关键，“一种添加结构的通用机制。” 在本站的首页，我们将教程目录列表封装于一个 div 之中，这是因为教程目录并不是正文的任何元素的一部分。...其中，h2元素标记每个教程的标题，同时 ul 列表元素标记每个教程的详细列表。但是在更大更具体的意义中，这个教程目录扮演了一个结构化的角色，即二级导航组件。...请注意这些标记没有包含img标签，所以不会牵扯到 width、height、background 或者 border 等等属性。同时它没有使用表格单元格，也不会涉及相关的一系列属性。
它为其后代元素触发额外的检查和警告。 可以为应用程序的任何部分启用严格模式。...可以利用babel的 transform-async-to-module-method 插件来转换其成为浏览器支持的语法，虽然没有性能的提升，但对于代码编写体验要更好。 6....React 中 keys 的作用是什么？ Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。...} )}; 复制代码 在集合中添加和删除项目时，不使用键或将索引用作键会导致奇怪的行为。...解答 如果您尝试直接改变组件的状态，React 将无法得知它需要重新渲染组件。通过使用setState()方法，React 可以更新组件的UI。 另外，您还可以谈谈如何不保证状态更新是同步的。
state在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改，可以认为state是一个局部的、只能被组件自身控制的数据源，state中状态可以通过this.setState方法进行更新，setState...>{itemList} ) } } props经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的props是只读的，不可改变的。...在组件中，我们也可以为props中的参数设置一个defaultProps，并且制定它的类型。...，可以是数字、字符串、元素或数组 optionalNode: PropTypes.node, // React元素 optionalElement: PropTypes.element,...state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改
做到学以致用，写出更现代化的选择器。 :is 伪类选择器 :is() CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。...:where 同样是将选择器列表作为其参数，并选择可以由该列表中的选择器之一选择的任何元素。...，唯一的区别在于:where() 的优先级总是为 0，而:is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。...，它的优先级是由它的选择器列表中优先级最高的选择器决定的。...最后到所有逻辑选择器里面最重磅的 :has 出场了。它之所以重要是因为它的诞生，填补了在之前 CSS 选择器中，没有核心意义上真正的父选择器的空缺。
类似于传统 OOP 语言中 class 的设计，在设计组件的时候需要考虑到很多方面，以便它们可以很好的复用，组合，分离和低耦合，但是功能可以比较稳定的实现，即使是在超出实际测试用例范围的情况下。...让我们看一个简单的 React 示例，你想在写出一个带有一个 logo 的链接列表，通过连接可以访问特定的网站。最开始的设计可能是并没有跟内容合理的进行解耦。...如果我们解决上文中用户可以自定义链接的使用场景，可以考虑动态构建链接数组。此外，虽然在这个具体的例子中没有解决，但我们仍然可以注意到这个组件没有与任何特定的父/子组件建立密切关联。...在长时间与代码相处的过程中，即使改变一个很小的习惯也可以产生很大的不同。其中一个有效的原则就是将辅助代码分离出来放在特定的地方，这样你在处理组件时就不必考虑这些。...你是否有一个明确的理由？ 在分割代码时，你应该考虑它究竟实现了什么。这是否允许更松散的耦合？我是否打破了一个逻辑上有意义的独立实体？这个代码是否真的可能在其他地方被重复使用？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
