<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[caroyal的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/caroyal</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; caroyal]]></copyright><item><title><![CDATA[这样写，才可以让JS对象中的key包含短横杠-]]></title><link>https://blog.youkuaiyun.com/caroyal/article/details/124086879</link><guid>https://blog.youkuaiyun.com/caroyal/article/details/124086879</guid><author>caroyal</author><pubDate>Sun, 10 Apr 2022 22:05:27 +0800</pubDate><description><![CDATA[这样写，才可以让JS对象中的key包含短横杠-
在定义对象时，如果直接将包含短横杠-的字符串作为对象的key，JS会报错：
const o = {
  v-red: 1  // 报错 SyntaxError: Unexpected token
}

正确的写法是：将包含短横杠的字符串包裹在字符串字面量单引号‘’、双引号“”中：
const o = {
  'v-red': 1,
  "v-blue": 2
}
console.log(o['v-red'])  // 返回 1
console.log(o['v]]></description><category></category></item><item><title><![CDATA[【JavaScript】简单数据类型与复杂数据类型]]></title><link>https://blog.youkuaiyun.com/caroyal/article/details/121963846</link><guid>https://blog.youkuaiyun.com/caroyal/article/details/121963846</guid><author>caroyal</author><pubDate>Wed, 15 Dec 2021 23:03:55 +0800</pubDate><description><![CDATA[简单数据类型与复杂数据类型的定义、分类和传参方式]]></description><category></category></item><item><title><![CDATA[弹性布局（flex）自学笔记——关于弹性布局，你所需要了解的知识]]></title><link>https://blog.youkuaiyun.com/caroyal/article/details/121683352</link><guid>https://blog.youkuaiyun.com/caroyal/article/details/121683352</guid><author>caroyal</author><pubDate>Thu, 02 Dec 2021 18:20:18 +0800</pubDate><description><![CDATA[弹性布局（Flex）
1. 优点&amp;缺点
1.1 传统布局与Flex布局




传统布局
Flex弹性布局




兼容性好
操作方便。布局极为简单，在移动端应用广泛


布局繁琐（浮动、清除浮动……）
PC端浏览器支持情况较差


有局限性，不能在移动端很好的布局
IE 11 或更低版本，不支持或部分支持


1.2 使用场景

1、如果是PC端布局，仍使用传统布局；
2、如果是移动端，或不考虑兼容性问题的PC端页面布局，则使用flex弹性布局

2. Flex布局原理
2.1 布局原理解释
采用]]></description><category></category></item><item><title><![CDATA[盒子模型自学笔记——或许能帮你快速了解盒子模型]]></title><link>https://blog.youkuaiyun.com/caroyal/article/details/121680307</link><guid>https://blog.youkuaiyun.com/caroyal/article/details/121680307</guid><author>caroyal</author><pubDate>Thu, 02 Dec 2021 16:26:20 +0800</pubDate><description><![CDATA[盒子模型
元素分类
内联（行内）元素 inline

和其它元素在一行上；
元素的高度、宽度以及顶部、底部外边距（margin-top，margin-bottom）不可设置，顶、底部内边距（padding-top，padding-bottom）对周围元素无影响（padding只对本行元素有效）；
元素的宽高就是其包含的文字和图片的宽度，不可改变；
常用的内联元素：a, span, br, strong, em；
设置display: inline; 可以将元素转换为内联元素。

块级元素 block

一个]]></description><category></category></item><item><title><![CDATA[【HTML+CSS】制作文字依次闪烁的霓虹灯特效]]></title><link>https://blog.youkuaiyun.com/caroyal/article/details/121593145</link><guid>https://blog.youkuaiyun.com/caroyal/article/details/121593145</guid><author>caroyal</author><pubDate>Sun, 28 Nov 2021 17:17:31 +0800</pubDate><description><![CDATA[利用text-shadow, animation和var实现文字依次闪烁的霓虹灯效果]]></description><category></category></item></channel></rss>