<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Valentine_T的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Valentine_T</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Valentine_T]]></copyright><item><title><![CDATA[Vue报错解决方案(1)[Vue warn]: Property or method “id“ is not defined on the instance but referenced]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/108477001</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/108477001</guid><author>Valentine_T</author><pubDate>Tue, 08 Sep 2020 21:01:20 +0800</pubDate><description><![CDATA[问题记录：

在修改信息时，将获取的信息重新填充到表单，控制台能输出所获取的信息，但无法将信息添加到表单上

报错：

vue.js:597 [Vue warn]: Property or method “id” is not defined on the instance but referenced during

解决办法：

Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，即需要声明即使是一个空值。


 data: {
                flag: ]]></description><category></category></item><item><title><![CDATA[ES6中的类和对象]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107743190</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107743190</guid><author>Valentine_T</author><pubDate>Mon, 03 Aug 2020 22:05:07 +0800</pubDate><description><![CDATA[1. 对象
再JavaScript中，对象是一组无序相关属性和方法的集合，所有事物都是对象，例如，字符串、数值、数组、函数等。

对象是由属性和方法组成的：

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）


2. 类
在ES6中新增了类的概念，可以使用class关键字声明一个类，之后这个类来实例化对象。

类抽象了对象的公共部分，它泛指某一大类
对象特指某一个，通过类实例化一个具体的对象。

3. 面向对象的思维特点：

抽取（抽象）对象共用的属性]]></description><category></category></item><item><title><![CDATA[面向对象编程、面向过程编程]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107742557</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107742557</guid><author>Valentine_T</author><pubDate>Sun, 02 Aug 2020 12:10:51 +0800</pubDate><description><![CDATA[1. 面向过程编程 POP(Process-oriented programming)
面向过程 就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。

把大象装进冰箱，面向过程的做法：

打开冰箱门
把大象装进去
关上冰箱门


即面向过程就是按照我们分析好的步骤，按步骤解决问题。

优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单机片就采用的面向过程编程。
缺点：没有面向对象易维护、易复用、易扩展。

2. 面向对象编程 OOP(Objec]]></description><category></category></item><item><title><![CDATA[溢出的文字如何省略号显示]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107643334</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107643334</guid><author>Valentine_T</author><pubDate>Tue, 28 Jul 2020 22:05:52 +0800</pubDate><description><![CDATA[溢出的文字用省略号显示：
	&lt;style&gt;
		div {
			width: 150px;
			height: 25px;
			border: 1px solid #ccc;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div&gt;
		前不见古人后不见来者念天地之悠悠独怆然而涕下
.]]></description><category></category></item><item><title><![CDATA[vertical-align(文字与图片、表单垂直对齐，清除图片底侧空白间隙)]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107622235</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107622235</guid><author>Valentine_T</author><pubDate>Mon, 27 Jul 2020 22:12:42 +0800</pubDate><description><![CDATA[1. vertical-align 垂直对齐

vertical-align设置或检索对象内容垂直对齐的方式。

垂直对齐:vertical-align：baseline | middle | top | bottom
	选择器 {
			/* 默认的是基线对齐 */
			vertical-align: baseline;
			/* 图片的中线 与 文字的中线对齐 垂直对齐 */
			vertical-align: middle;
			/* 让图片的顶线 与 文字的顶线对齐 */
			vertic]]></description><category></category></item><item><title><![CDATA[鼠标样式cursor、取消轮廓线、防止拖拽文本域]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107619072</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107619072</guid><author>Valentine_T</author><pubDate>Mon, 27 Jul 2020 20:21:27 +0800</pubDate><description><![CDATA[鼠标样式：设置或检索在对象上移动的鼠标指针采用何种系统定义的光标形状。




属性
含义




default
小白 默认


pointer
小手


move
移动


text
文本


not-allowed
禁止


取消轮廓线：outline: none;
防止拖拽文本域：resize: none;

...]]></description><category></category></item><item><title><![CDATA[CSS电影海报特效（当鼠标移动到海报上时，海报颜色会变暗同时出现点击播放的按钮）]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107618222</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107618222</guid><author>Valentine_T</author><pubDate>Mon, 27 Jul 2020 19:02:10 +0800</pubDate><description><![CDATA[当鼠标移动到海报上时，海报颜色会变暗同时出现点击播放的按钮

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	&lt;title&gt;Document&lt;/title&gt;
	&lt;style&gt;
		.box {
			position: relative;
			width: 212px;
			height: 120px;
			margin: 100px a]]></description><category></category></item><item><title><![CDATA[CSS将元素隐藏/显示]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107597932</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107597932</guid><author>Valentine_T</author><pubDate>Mon, 27 Jul 2020 12:06:15 +0800</pubDate><description><![CDATA[1. display隐藏/显示


display设置或检索对象是否显示及如何显示
 display: none; 隐藏对象

 display: block; 除了转换为块级元素之外，同时还有显示元素的意思



特点：隐藏之后，不再保留原来的位置


2. visibility可见性


visibility设置或检索是否显示对象
 visibility: visible; 对象可视

 visibility： hidden; 对象隐藏



特点：隐藏之后，继续保留原有位置。


3. overflo]]></description><category></category></item><item><title><![CDATA[改变display属性（CSS）]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107589980</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107589980</guid><author>Valentine_T</author><pubDate>Sun, 26 Jul 2020 10:41:50 +0800</pubDate><description><![CDATA[可以改变显示模式有以下方式：

可以用inline-block转换为行内块
可以用浮动float默认转换为行内块（并不完全一样，因为浮动的元素是脱离标准流的）
绝对定位、固定定位也和浮动类似，默认转换为行内块。

注意：所以一个行内盒子，如果加了浮动、绝对定位、固定定位，不用主动添加display属性去转换了，就可以给这个盒子直接设置宽高。并且，浮动、绝对定位、固定定位的元素都不会触发外边距合并的问题。

...]]></description><category></category></item><item><title><![CDATA[堆叠顺序（z-index）]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107587293</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107587293</guid><author>Valentine_T</author><pubDate>Sun, 26 Jul 2020 00:06:25 +0800</pubDate><description><![CDATA[在使用定位布局时，可能出现盒子重叠的情况，如下图所示：



通过定位盒子实现的，默认后来者居上，后面的盒子会压住前面的盒子。应用z-index层叠等级属性可以调整盒子的堆砌顺序。


z-index的语法如下：
 1. 属性值： 正整数、负整数、0，数值越大，盒子越靠上；
 2. 如果属性值相同，则按照书写顺序，后来者居上。
 3. 属性值无单位。



注意：z-index只能应用于相对定位、绝对定位、和固定定位的元素，其他标准流、浮动和静态定位无效。
例如，原来的粉色盒子调到最上边来：

代码如下：
]]></description><category></category></item><item><title><![CDATA[绝对定位的盒子如何水平/垂直居中显示]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107586119</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107586119</guid><author>Valentine_T</author><pubDate>Sat, 25 Jul 2020 22:40:51 +0800</pubDate><description><![CDATA[绝对定位的盒子水平居中
绝对定位/固定定位的盒子，是不能通过设置margin：auto；来实现水平居中的。
在使用绝对定位时实现水平居中，可以使用如下图所示的方法：


left：50%；：先让盒子左侧移动到父级元素的水平中心位置；
margin-left：-100px;:再让盒子向左移动自身宽度的一半。

绝对定位的盒子垂直居中

top: 50%;：先让盒子上侧移动到父级元素的垂直中心位置
margin-top: -50px;：再让盒子向上移动自身高度的一半


...]]></description><category></category></item><item><title><![CDATA[清除浮动]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107571484</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107571484</guid><author>Valentine_T</author><pubDate>Sat, 25 Jul 2020 00:04:53 +0800</pubDate><description><![CDATA[1. 为什么要清除浮动
因为父级盒子很多情况下是不方便给高度的，但是子盒子浮动就不占有位置，浮动的盒子就不会撑开父级盒子，最后父级盒子高度就为0，因此就会影响下面的标准流盒子。
2. 清除浮动的本质
清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面标准流的盒子了。
3. 清除浮动的方法
1） 额外标签法
	是W3C推荐的做法，通过在浮动元素末尾添加一个空的标签。例如：&lt;div style="clear: b]]></description><category></category></item><item><title><![CDATA[CSS 布局的三种机制]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107546010</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107546010</guid><author>Valentine_T</author><pubDate>Thu, 23 Jul 2020 22:31:34 +0800</pubDate><description><![CDATA[一. CSS布局的三种机制
CSS提供了3中机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：


普通流（标准流）
◾  块级元素独占一行，从上向下顺序排列（比如：div、p、h1~h6、ul、ol、from、table）；
◾  行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行（比如：如：span、a、i、em等）。


浮动
◾  概念：
元素的浮动是指设置了浮动属性的元素会浮起来，脱离标准流的控制，移动到指定位置。
◾  作用：
可以让多个盒子水平排列成一行，使得浮动]]></description><category></category></item><item><title><![CDATA[圆角边框、盒子阴影]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107541546</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107541546</guid><author>Valentine_T</author><pubDate>Thu, 23 Jul 2020 19:23:29 +0800</pubDate><description><![CDATA[1. 圆角边框（CSS3）

语法

border-radius:length;/* 其中每一个值可以为数值，也可以是百分比*/


要让一个正方形变成圆：

border-raduis:50%;


矩形圆角边框， 这个就不能用百分比了，因为百分比表示高度和宽度的一半。而矩形圆角边框只需设置高度的一半即可。

上图矩形圆角边框代码如下：

	&lt;style type="text/css"&gt;
		input {
			width: 200px;
			height: 20px;
			border]]></description><category></category></item><item><title><![CDATA[新闻列表综合案列]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107523730</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107523730</guid><author>Valentine_T</author><pubDate>Wed, 22 Jul 2020 22:07:50 +0800</pubDate><description><![CDATA[要点：

盒子box有宽度，padding值会撑开盒子,为保证盒子实际大小不变，宽就要改变宽高，即减去padding值
去掉列表的默认样式：list-style: none;
去掉a的默认下划线：text-decoration: none;
一般情况下li 没有宽度 所有padding不会撑开盒子
块级盒子水平居中：margin：0 auto；
单行文本垂直居中：行高等于高；
背景图片移动位置：background-position： 5px center;(水平：5px 垂直：居中)；
鼠标移动到 li.]]></description><category></category></item><item><title><![CDATA[块级盒子水平居中]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107486146</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107486146</guid><author>Valentine_T</author><pubDate>Tue, 21 Jul 2020 22:17:42 +0800</pubDate><description><![CDATA[让块级盒子居中必须：

盒子必须指定了宽度(width)
左右外边距设置为auto

示例代码如下：
.div {
	width:300px;
	margin: 0 auto;
}

插入图片和背景图片的区别：

插入图片是我们用到的最多的，比如商品展示类，它移动的位置只能靠盒子模型的padding、margin值来改变。
背景图片我们一般用于小图标或者大背景图片，它只能通过 background-position属性来改变。


	&lt;style type="text/css"&gt;
		.pic{]]></description><category></category></item><item><title><![CDATA[盒子模型]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107469535</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107469535</guid><author>Valentine_T</author><pubDate>Mon, 20 Jul 2020 21:33:26 +0800</pubDate><description><![CDATA[1. 盒子模型
标准的盒子模型：


盒子模型有元素的内容、边框（border）、内边距（padding）以及外边距（margin）组成。
盒子里面的文字和图片等元素是内容区域
盒子的厚度称为盒子的边框
盒子内容与边框的距离称为内边距
盒子与盒子之间的距离称为外边距

2. 盒子边框

语法

border: border-width || border-style || border-color





属性
作用




border-width
定义边框粗细，单位是px


border-style]]></description><category></category></item><item><title><![CDATA[CSS三大特性（层叠性、继承性、优先级）]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107450211</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107450211</guid><author>Valentine_T</author><pubDate>Sun, 19 Jul 2020 21:39:25 +0800</pubDate><description><![CDATA[1. CSS层叠性


概念
所谓的层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候有一个属性就会将另一个属性层叠掉。


原则
样式冲突遵循的原则是就近原则。将执行离结构最近的样式。样式不冲突，就不会层叠。



2. 继承性

概念
子标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素即可。即子承父业。

注意：

恰当地使用继承可以简化代码，降低CSS 样式的复杂性。
子元素可以继承父]]></description><category></category></item><item><title><![CDATA[标签显示模式]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107429208</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107429208</guid><author>Valentine_T</author><pubDate>Sat, 18 Jul 2020 15:44:16 +0800</pubDate><description><![CDATA[1. 标签显示模式
什么是标签显示模式？
 标签以什么方式进行显示，比如div自己占一行，比如span一行可以放很多个。

作用
网页的标签非常多，在不同地方使用不同类型的标签，可以更好的完成我们的网页需求。

标签的分类
HTML标签一般分为块标签和行内标签两种类型，也称块元素和行内元素。

2. 块级元素


块级元素特点
 （1）块级元素独占一行
 （2）宽度、高度、边距都是可控的
 （3）宽度默认是浏览器的100%
 （4）是一个容器及盒子，里面可以放行内或者块级元素



注意
 （1）只要文字才]]></description><category></category></item><item><title><![CDATA[复合器选择器]]></title><link>https://blog.youkuaiyun.com/Valentine_T/article/details/107417671</link><guid>https://blog.youkuaiyun.com/Valentine_T/article/details/107417671</guid><author>Valentine_T</author><pubDate>Fri, 17 Jul 2020 21:29:11 +0800</pubDate><description><![CDATA[后代选择器
		&lt;style type="text/css"&gt;
			.nav a {
				color:red;
			}
		&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div class="nav"&gt;
		&lt;a href="#"&gt;我是链接&lt;/a&gt;
		&lt;a href="#"&gt;我是链接&lt;/a&gt;
		&lt;a href="#"&gt;我是链接&lt;/a&gt;
	&lt;/div&gt]]></description><category></category></item></channel></rss>