<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[扁蛋蛋蛋的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/bddan</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; bddan]]></copyright><item><title><![CDATA[01 vue3.0注册全局组件]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/114711538</link><guid>https://blog.youkuaiyun.com/bddan/article/details/114711538</guid><author>bddan</author><pubDate>Fri, 12 Mar 2021 22:53:13 +0800</pubDate><description><![CDATA[vue3.0注册全局组件
import { createApp } from 'vue'
import App from './App.vue'
import HelloWorld from './components/HelloWorld.vue'
const app = creatApp(App)
// 第一个参数自定义即可
app.component('helloworld', HelloWorld)

vue3.0以下版本注册全局组件
import Vue from 'vue'
import Hel]]></description><category></category></item><item><title><![CDATA[06 浏览器私有前缀]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113989973</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113989973</guid><author>bddan</author><pubDate>Tue, 23 Feb 2021 15:05:40 +0800</pubDate><description><![CDATA[浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法, 比较新版本的浏览器无须添加

私有前缀


-moz-: 代表firefox浏览器私有属性
-ms-: 代表ie浏览器私有属性
-webkit-: 代表safari, chrome私有属性
-o-: 代表Opera私有属性


提倡的写法

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;


...]]></description><category></category></item><item><title><![CDATA[05 CSS3 3D转换]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113989776</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113989776</guid><author>bddan</author><pubDate>Tue, 23 Feb 2021 15:04:59 +0800</pubDate><description><![CDATA[3D转换
有什么特点?

近大远小
物体后面遮挡不可见

三维坐标系
三维坐标系其实就是指立体空间, 立体空间是由3个轴共同组成的

x轴: 水平向右 注意: x右边是正值, 左边是负值
y轴: 垂直向下 注意: y下面是正值, 上面是负值
z轴: 垂直屏幕 注意: 往外面是正值, 往里面是负值


主要知识点

3D位移: translate3d(x, y, z);
3D旋转: rotate3d(x, y, z);
透视: perspective
3D呈现: transfrom-style

3D移动tr]]></description><category></category></item><item><title><![CDATA[04 动画]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113989693</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113989693</guid><author>bddan</author><pubDate>Tue, 23 Feb 2021 15:02:23 +0800</pubDate><description><![CDATA[动画
动画(animation)是CSS3种具有颠覆性的特征之一, 可通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果
相比较过渡, 动画可以实现更多变化, 更多控制, 连续自动播放等效果
动画的基本使用
制作动画分为两步

先定义动画
再使用(调用)动画

用keyframes定义动画(类似定义器选择器)
语法:
@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;]]></description><category></category></item><item><title><![CDATA[03 CSS3 2D]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113989596</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113989596</guid><author>bddan</author><pubDate>Tue, 23 Feb 2021 15:01:06 +0800</pubDate><description><![CDATA[CSS3 2D转换
**转换(transform)**是CSS3中具有颠覆性的特征之一, 可以实现元素的唯一, 旋转, 缩放等特效效果
转换(transform)可以简单理解为变形

移动: translate
旋转: rotate
缩放: scale

1) 2D转换之移动translate
2D移动是2D转换里面的一种功能, 可以改变元素在页面中的位置, 类似定位
语法:
transform: translate(x, y); 或者分开写 -&gt; transform: translateX(n) t]]></description><category></category></item><item><title><![CDATA[02 CSS3新特性]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113989365</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113989365</guid><author>bddan</author><pubDate>Tue, 23 Feb 2021 14:59:01 +0800</pubDate><description><![CDATA[CSS3的现状

新增的CSS3特性有兼容性问题， ie9+才支持
移动端支持优于PC端
不断改进中
应用相对广泛
现阶段主要学习：新增选择器和盒子模型以及其他特性

CSS3新增选择器

属性选择器
结构伪类选择器
伪元素选择器

注意：类选择器， 属性选择器， 伪类选择器， 权重为10
1. 属性选择器
属性选择器可以根据元素特定的属性来选择元素。 这样就可以不用借助类或者id选择器
用中括号[]

权重为10

下面权重为11  标签选择器+属性选择器
input[value] {
    color]]></description><category></category></item><item><title><![CDATA[01 CSS高级]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113988835</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113988835</guid><author>bddan</author><pubDate>Tue, 23 Feb 2021 14:52:47 +0800</pubDate><description><![CDATA[精灵图

为什么需要精灵图?


一个网页中往往会应用很多小的背景图像作为修饰, 当网页中的图像过多时, 服务器就会频繁地接收和发送请求图片, 造成服务器请求压力过大, 这将大大降低页面的加载速度
因此, 为了有效地减少服务器接收和发送请求次数, 提高页面的加载速度, 出现了CSS精灵技术(也称为CSS Sprites, CSS雪碧)


精灵图(spriyes)的使用(重要)
使用精灵图核心:


精灵技术主要针对于背景图片使用. 就是把多个小背景图片整合到一张大图片中
这个大图片也称为sprites精灵]]></description><category></category></item><item><title><![CDATA[12 css元素显示与隐藏]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113121362</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113121362</guid><author>bddan</author><pubDate>Tue, 26 Jan 2021 08:32:25 +0800</pubDate><description><![CDATA[元素的显示与隐藏
类似网站广告, 当我们点击关闭就不见了, 但是我们重新刷新页面, 会重新出现
本质: 让一个元素在页面中隐藏或者显示出来
1. display显示隐藏

display属性用于设置一个元素应如何显示

display: none; 隐藏对象
display: block; 除了转换为块级元素之外, 同时还有显示元素的意思
display隐藏元素后, 不再占有原来的位置
应用极为广泛, 搭配js可以做很多网页特效



2. visibility显示隐藏
visibility属性用于指定一个]]></description><category></category></item><item><title><![CDATA[11 网页布局-定位]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113120525</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113120525</guid><author>bddan</author><pubDate>Tue, 26 Jan 2021 08:32:14 +0800</pubDate><description><![CDATA[定位
为什么需要定位?
提问: 以下情况使用标准流或者浮动能实现吗?

某个元素可以自由的在一个盒子内移动位置, 并且压住其他盒子
当我们滚动窗口时, 盒子是固定在屏幕某个位置的
以上效果, 标准流或浮动都无法快速实现, 此时需要定位来实现
所以:


浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子
定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置, 并且可以压住其他盒子

定位组成
定位: 将盒子定在某一个位置. 所以定位也是在摆盒子, 按照定位的方式移动盒子

定]]></description><category></category></item><item><title><![CDATA[10 网页布局-浮动]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113120350</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113120350</guid><author>bddan</author><pubDate>Mon, 25 Jan 2021 16:26:09 +0800</pubDate><description><![CDATA[浮动
传统网页布局的三种方式
CSS提供了三种传统布局方式(简单说, 就是盒子如何进行排列顺序)

普通流(标准流/文档流)
所谓的标准流: 就是标签按照规定好默认方式排列


块级元素会独占一行, 从上往下顺序排列
常用元素: div hr p h1~h6 ul ol dl form table
行内元素会按照顺序, 从左到右排列, 碰到父元素边界会自动换行
常用元素: span a i em

一. 标准流
标准流是最基本的布局方式
注意: 实际开发中, 一个页面基本都包含了这三种布局方式(后面移动端学]]></description><category></category></item><item><title><![CDATA[09 css盒子模型]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113119377</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113119377</guid><author>bddan</author><pubDate>Mon, 25 Jan 2021 16:13:02 +0800</pubDate><description><![CDATA[页面布局要学习三大核心:
盒子模型, 浮动 和 定位

学好盒子模型能非常好的帮助我们布局页面

网页布局过程

先准备好相关网页元素, 网页元素基本都是盒子Box
利用CSS设置好盒子样式, 然后摆放到相应位置
往盒子里面装内容

网页布局的核心: 就是利用CSS摆盒子



盒子模型

border边框

边框粗细border-width: 5px;
边框样式border-style: solid/dashed/dotted;
边框颜色border-color: red;



简写:
- `borde]]></description><category></category></item><item><title><![CDATA[08 css特性]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113119296</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113119296</guid><author>bddan</author><pubDate>Mon, 25 Jan 2021 16:10:31 +0800</pubDate><description><![CDATA[三大特性
层叠性
相同标签名, 标签内部标签

样式冲突, 遵循就近原则
样式不冲突, 不会层叠

继承性
子标签会继承父标签的某些样式

恰当使用继承可以简化代码, 降低CSS样式的复杂性
子元素可以继承父元素的样式(text-, font-, line-这些元素开头的 可以继承, 以及color属性

行高可以跟单位也可以不跟单位
优先级
党同一个元素指定多个选择器, 就会有优先级的产生

选择器相同, 则执行层叠性
选择器不同, 则根据选择器权重执行
[外链图片转存失败,源站可能有防盗链机制,建议将图]]></description><category></category></item><item><title><![CDATA[07 css背景]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113119241</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113119241</guid><author>bddan</author><pubDate>Mon, 25 Jan 2021 16:09:40 +0800</pubDate><description><![CDATA[背景
背景颜色
一般情况下元素背景颜色默认值是transparent(透明的)

background-color: red;

背景图片
实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片

background-image: url();
优点是非常便于控制位置(精灵图也是一种运用场景)
背景平铺
如果需要在HTML页面上对背景图像进行平铺, 可以是使用background-repeat属性
background-repeat: repeat|no-repeat|repeat-x|repe]]></description><category></category></item><item><title><![CDATA[06 css元素的显示模式]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113119160</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113119160</guid><author>bddan</author><pubDate>Mon, 25 Jan 2021 16:08:54 +0800</pubDate><description><![CDATA[什么是元素的显示模式
元素显示模式的分类
元素显示模式转换


元素显示模式就是元素(标签)以什么方式进行显示
HTML元素一般分为块元素和行内元素两种类型

块元素
常见块元素&lt;h1&gt;~&lt;h6&gt; &lt;p&gt; &lt;div&gt; &lt;ul&gt; &lt;ol&gt; &lt;li&gt;等
块元素特点:

比较霸道, 自己独占一行
高度, 宽度, 外边距以及内边距都可以控制
宽度默认是容器(父级宽度)的100%
是一个容器及盒子, 里面可以放行内或者块级元素

注.]]></description><category></category></item><item><title><![CDATA[05 css的复合选择器]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113119038</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113119038</guid><author>bddan</author><pubDate>Mon, 25 Jan 2021 16:07:29 +0800</pubDate><description><![CDATA[后代选择器（常用重要）

后代选择器又称为包含选择器， 可以选择父元素里面的子元素，中间用逗号分隔
当标签发生嵌套时，内部标签就成为外部标签的后代

元素1 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有元素2

元素2可以是儿子， 也可以是孙子登， 只要是元素1的后代即可
元素1和元素2可以是任意基础选择器

子选择器（重要）
子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素， 和孙子无关
元素1&gt;元素2 { 样式声明 }

上述语法表示选择元素1里面左右直接后代（]]></description><category></category></item><item><title><![CDATA[04 css Emmet语法]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113118962</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113118962</guid><author>bddan</author><pubDate>Mon, 25 Jan 2021 16:06:27 +0800</pubDate><description><![CDATA[Emmet语法
Emmet语法前身是Zen coding, 它使用缩写, 来提高html/css的编写速度, VsCode内部已经集成该语法


快速生成HTML结构语法
快速生成CSS样式语法

快速生成HTML结构语法

生成标签,直接输入标签名 按tab键即可, 比如div 然后tab键,就可以生成&lt;div&gt;&lt;/div&gt;
生成多个相同标签, 加上*数字即可
生成有父子级关系的标签, 用&gt;  比如 ul&gt;li
生成有兄弟关系的标签, 用+  比如div+p
生成带有.]]></description><category></category></item><item><title><![CDATA[03 css引入方式]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113118872</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113118872</guid><author>bddan</author><pubDate>Mon, 25 Jan 2021 16:05:36 +0800</pubDate><description><![CDATA[CSS样式表
CSS的三种样式表
按照CSS样式书写的位置(或者音符的方式), CSS样式表可以分为三大类
1. 行内样式表(行内式)
在元素标签内部的style属性中设定CSS样式

适合于修改简单样式

    &lt;div style="color: red; font-size: 12px;"&gt;小屁熊&lt;/div&gt;

2. 内部样式表(嵌入式)
单独把所有CSS样式抽取出来, 单独放在一个&lt;style&gt;标签中
&lt;style&gt;
    div {
      ]]></description><category></category></item><item><title><![CDATA[02 css属性]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113118711</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113118711</guid><author>bddan</author><pubDate>Mon, 25 Jan 2021 16:04:30 +0800</pubDate><description><![CDATA[1. 字体属性Fonts
用于定义字体系列、大小、粗细、和文字样式（如斜体）
字体系列
font-family
各字体之间用,隔开
写多个字体,兼容性会好一些
 body {
  /* font-family: '微软雅黑'; 中文名, 下面的是英文名,一样的效果,常用英文名*/
  /* font-family: 'Microsoft YaHei'; */
  font-family: 'Microsoft YaHei' Arial, Helvetica, sans-serif;
}

字体大小
font]]></description><category></category></item><item><title><![CDATA[01 css语法]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/113118421</link><guid>https://blog.youkuaiyun.com/bddan/article/details/113118421</guid><author>bddan</author><pubDate>Mon, 25 Jan 2021 16:03:00 +0800</pubDate><description><![CDATA[style通常写在head中

样式格式书写


紧凑模式
展开模式（常用）


样式大小写风格


样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外


样式空格风格

h3 {
    color: pink;
}


属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格

选择器
1. 基础选择器：
单个选择器，包括标签选择器、类选择器、id选择器和通配符选择器（*）

标签选择器

优点：能快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部的]]></description><category></category></item><item><title><![CDATA[引用传递]]></title><link>https://blog.youkuaiyun.com/bddan/article/details/104657172</link><guid>https://blog.youkuaiyun.com/bddan/article/details/104657172</guid><author>bddan</author><pubDate>Wed, 04 Mar 2020 16:58:50 +0800</pubDate><description><![CDATA[引用传递
在js中，只有基本类型是值传递（undefined null boolean number string），其他类型赋值时均为引用传递。
今天写程序由于失误把ArrayBuffer类型数据赋值给一个变量，改变了变量内容，导致页面显示出问题，很基础的问题，挺深刻的教训，不过还好对引用传递有了更深的认识

...]]></description><category></category></item></channel></rss>