发表于 | 分类于

怪异盒模型:box-sizing

box-sizing:content-box || border-box ;

  • content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )

此属性表现为标准模式下的盒模型。

  • border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

浏览器对盒模型的解释是IE6之前的版本下相同，此时内容的宽高可以由定义的 width height 减去相应方向上的padding和border;
此属性表现为怪异模式下的盒模型。

发表于 | 分类于

hexo 命令

  • 初始化博客

$ mkdir blog 创建一个名为blog 的文件夹

$ hexo init 将会在目标文件夹下建立博客需要的所有文件

$ npm install 进行依赖包安装

  • 配置博客
  • 创建博文

$ hexo new myhello 创建一个makedown文件在drafts目录里面

$ hexo n myhello 等价

$ hexo publish myhello 将文件从drafts移到post目录

$ hexo server 启动服务器

$ hexo s 也可以启动服务器

  • 如何将博客发布到GitHub上？

$ npm install hexo-deployer-git –save 安装hexo git插件

  • 部署

$ hexo clean 清除一些莫名其妙的问题

$ hexo generate 生成静态页面 此时会将/source的.md文件生成到/public中，形成网站的静态文件。

等价于

$ hexo g

$ hexo deploy 将生成的博客静态页面上传GitHub上 ；该操作会将hexo生成的静态内容部署到配置的仓库中，请看下面介绍。

部署网站之前需要生成静态文件，即可以用 $ hexo generate -d 直接生成并部署。等价于

$ hexo d

$ hexo clean # 删除 已经生成的静态页面

$ cd your-hexo-site

$ git clone + http 地址可以创建主题

然后修改root/config.yml theme

发表于 | 分类于

DOM元素和jquery对象的互相转化

1 DOM对象转化为jquery对象,语法：$(DOM对象)：用js一些固有的操作获取页面元素。比如 document.getElementById(),getElementsByTagName()，等js方法获取页面元素的所得为DOM对象,将DOM对象放在中括号里面所得便是jquery对象；

2 jquery对象转化为DOM对象，语法：jquery对象[ index]或者 jquery对象.get(index); 用jquery方法获取页面元素，通过jquery选择器，筛选器进行选择，所得结果为jquery对象，jquery对象有两种方法可以转化为DOM对象：jqueryObj[index] 和 jqueryObj . get(index);(如果不写参数的话，那么则将匹配到的所有的jquery对象转化为DOM对象)

3 DOM中this代表DOM对象 jquery中$(this)代表jquery对象。

4 栗子说明下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="bd">
  <ul>
    <li class="current">我是体育模块</li>
    <li>我是娱乐模块</li>
    <li>我是新闻模块</li>
    <li>我是综合模块</li>
  </ul>
</div>
console.log($(".hd>span"));//jquery对象
console.log($(".hd>span:first-child"));//jquery对象
console.log($(".hd>span").get(1));//DOM对象
console.log($(".hd>span").get());//DOM对象
console.log($(".hd>span")[1]);//DOM对象

5 注意jQuery对象和DOM对象的方法不能通用，

DOM对象只能用 innerHTML，innerText ，属性操作 setAttribute() 、getAttribute() 、ele.style.property ；

jQuery对象只能用html() text(), 属性操作，attr() 、prop( )、 css( );

发表于 | 分类于

position() jquery DOM

一 相关position定位基准建议回顾：

1 DOM 中获取元素定位相关属性的方法：

obj.style.property obj.currentStyle(attr) window.getComputedStyle(element,null)[attr]

将attr设置为 定位的 left top 等 即可。

2 jquery中获取定位元素的偏移，官方文档定义：获取匹配元素相对父元素的偏移。

返回的对象包含两个整型属性：top 和 left。

嗯，就是这么简洁。初学者需要注意,官方文档说的很模糊，我在这里详细说明一下：

二 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 5px solid #000;
            width: 300px;
            height: 200px;
            margin: 100px;
        }
        p{
            border: 1px solid green;
            width: 200px;
            position: absolute;
            padding: 10px;
            margin: 25px;
        }
    </style>
<div><p id="p2">这是一个段落</p></div>
<script src="jquery-1.12.2.js"></script>
<script>
    var pos = $("#p2").position();
    console.log(pos);//object
    console.log(pos.top);//105
    console.log(pos.left);//105
</script>

定位还是按原来的走：

  • 如果父元素有除了static定位以外的定位，那么就相对于父元素进行定位；
  • 如果父元素没有定位，那么就相对于body定位
  • 定位的基准是 ：子元素整体(margin +border+padding+content)的最外边界，相对于有定位的父元素或者body的内边界。

如果给div加一个定位 

1
position: absolute;

此时：

console.log(pos);//object
console.log(pos.top);//0
console.log(pos.left);//0

三：总结，jquery中position( )方法不能对定位进行设置，只能获取定位的top left 值，如果要设置定位的坐标，还是的用 css( ) 方法。

发表于 | 分类于

事件冒泡

一、什么是事件冒泡

在一个对象上触发某类事件（比如单击onclick事件，那么会一直冒泡直到document元素找click事件，然后执行处理程序，如果都没有绑定，那就算咯；比如onmouseover事件，也是会执行这样的过程），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

二、事件冒泡有什么作用

（1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

【集中处理例子】

1
2
3
4
5
6
7
8
9
10
11
12
13
<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
	<div id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//本例子只在外面盒子定义了处理方法，而这个方法一样可以捕获到子元素点击行为并处理它。假设有成千上万子元素要处理，难道我们要为每个元素加“onclick="eventHandle(event)"”？显然没有这种集中处理的方法来的简单，同时它的性能也是更高的。
function eventHandle(e)
{
    var e=e||window.event;
    var obj=e.target||e.srcElement;
    alert(obj.id+' was click')
}
</script>
复制代码

（2）让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情，就像老板一下命令，各自员工做自己岗位上的工作去了。

【同时捕获同一事件例子】 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div onclick="outSideWork()" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
	<div onclick="inSideWork()" id="inSide" style="width:100px; height:100px; background:#CCC">		</div>
</div>
<script type="text/javascript">
function outSideWork()
{
    alert('My name is outSide,I was working...');
}
function inSideWork()
{
    alert('My name is inSide,I was working...');
}
//因为下面程序自动激活单击事件，有些浏览器不允许，所以请单击灰色盒子，从这里开始下命令，这样因为冒泡的原因，黑色大盒子也会收到单击事件，并调用了自己的处理程序。如果还有更多盒子嵌套，一样道理。
/*
function bossOrder()
{
    document.getElmentById('inSide').click();
}
bossOrder();
*/
</script>

三、需要注意什么

●事件捕获其实有三种方式，事件冒泡只是其中的一种：（1）IE从里到外（inside→outside）的冒泡型事件。（2）Netscape4.0从外到里（outside→inside）的捕获型事件。（3）DOM事件流，先从外到里，再从里到外回到原点（outside→inside→outside）的事件捕获方法（似乎对象将触发两次事件处理，这有什么作用？鄙人不懂！）。

●不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。

●事件捕获方式在不同浏览器，甚至同种浏览器的不同版本中是有所区别的。如Netscape4.0采用捕获型事件解决方案，其它多数浏览器则支持冒泡型事件解决方案，另外DOM事件流还支持文本节点事件冒泡。

●事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。在IE6中HTML是接收事件冒泡的，另外大部分浏览器将冒泡延续到window对象，即……body→documen→window。

●阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据，这种行为无须我们写程序定制。

四、阻止事件冒泡

通常情况下我们都是一步到位，明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目标，这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解，我们知道程序将做多较多额外的事情，这必然增大程序开销。还有一个重要的问题是：事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，甚至无从下手调试，这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时，我们要阻止事件冒泡。

【不想激活的事件被激活例子】

1
2
3
4
5
6
7
8
9
10
11
<div onclick="openWin('http://www.baidu.com')" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="openWin('http://www.google.com')" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//本例你实际希望点击灰色盒子打开google首页，而点击黑色盒子打开baidu首页，但结果你点击灰色盒子的时候，却是同时打开了两个网页。其实在实际设计中较少遇到此问题，你可能会想如果我在页面不同DOM深处安置了不同的按钮或链接，深层处的事件触发会不会波及顶层的按钮呢？不会，因为按钮不能形成嵌套关系。
function openWin(url)
{
    window.open(url);
}
</script>

本例你实际希望点击灰色盒子打开google首页，而点击黑色盒子打开baidu首页，但结果你点击灰色盒子的时候，却是同时打开了两个网页。其实在实际设计中较少遇到此问题，你可能会想如果我在页面不同DOM深处安置了不同的按钮或链接，深层处的事件触发会不会波及顶层的按钮呢？不会，因为按钮不能形成嵌套关系。

【阻止事件冒泡例子】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比）
function showMsg(obj,e)
{
    alert(obj.id);
    stopBubble(e)
}
//阻止事件冒泡函数
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true;
  //或者如下
  e&&e.stopPropagation ? e.stopPropagation : window.event.cancelBubble = true ;
}
  //或者在事件处理函数  return false也可以阻止事件冒泡，同时会取消对应的默认行为
</script>

【阻止事件默认行为】

1
2
3
4
5
e = e ? e : window.event ;
e.preventDefault()
//或者
return false;

发表于 | 分类于

HTTP(HyperText Transfer Protocol)

MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。

一 HTTP理解

1 HTTP 服务器:即网站服务器，主要提供文档(文本、图片、视频、音频)浏览服务，一般安装Apache、Nginx服务器软件。HTTP服务器可以结合某一编程语言处理业务逻辑，由此进行的开发，通常称之为服务端开发。常见的运行在服务端的编程语言包 括 php、java、.net、Python、Ruby、Perl等。

如何搭建自己的HTTP服务器？

  • 安装wampsever:(Windows+Apache+Mysql+PHP)
  • 配置安装根目录
  • 配置虚拟主机

2 HTTP 协议:超文本传输协议（HTTP，HyperText Transfer Protocol) 网站是基于HTTP协议的， 例如网站的图片、CSS、JS等都是基于HTTP协议进行传输的。HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范。即HTTP协议主要由请求和响应构成。

3 请求和响应

  • 3.1、请求行

由请求方式、请求URL和协议版本构成

1
2
GET /day01/code/login.php?username=123&password=123 HTTP/1.1
POST /day01/code/login.php HTTP/1.1
  • 3.2、请求头

Host：localhost请求的主机

Cache-Control：max-age=0控制缓存

Accept：/ 接受的文档MIME类型

1
2
1 如果是XHR对象和javascript标签发送请求，那么accept ：*/ *  代表接受所有的MIME类型的返回值;
2 jQuery ajax发送请求的时候，如果设置了dataType 属性

User-Agent：很重要

Referer：从哪个URL跳转过来的

Accept-Encoding：可接受的压缩格式

If-None-Match：记录服务器响应的ETag值，用于控制缓存

此值是由服务器自动生成的

If-Modified-Since：记录服务器响应的Last-Modified值

此值是由服务器自动生成的

  • 3.3、请求主体

即传递给服务端的数据

注：当以post形式提交表单的时候，请求头里会设置

Content-Type: application/x-www-form-urlencoded，以get形式当不需要

4 响应

响应由服务器发出，其规范格式为：状态行、响应头、响应主体。

  • 4.1、状态行

由协议版本号、状态码和状态信息构成 HTTP/1.1 200 OK

  • 4.2、响应头

Date：响应时间

Server：服务器信息

Last-Modified：资源最后修改时间 由服务器自动生成

ETag：资源修改后生成的唯一标识

由服务器自动生成

Content-Length：响应主体长度

Content-Type：响应资源的类型(header()函数可以定义返回的资源类型text/html 、text/javascript 、 )

  • 4.3、响应主体

即服务端返回给客户端的内容；

二 请求的”进化”；

“标签”请求 form可以设置get和post a标签href发送请求get请求 iframe src属性 img src属性 script src属性

1 form表单method:get post方法请求 a 标签 都是以get发送请求

控制台 type document对象 ;

代表有document对象直接发送请求(这就是为什么页面会刷新的原因)

2 XMLHttpResponse 对象请求 ，该请求只允许请求当前源(域名，端口，协议)的资源，所以AJAX是不能跨域的

控制台  type 是 XMLHttpRequest 对象 ；

代表请求是由这个javascript内置对象发送的；所谓的ajax其实就是请求的发送以及响应体的接受都是由一个javascript对象XMLHttpRequest完成。页面不会刷新，可以通过js动态的加载元素。

3 跨域请求(同源策略:域名 协议 端口相同，当前域不能访问其他域的资源)

  • script标签请求 script标签不受同源策略的限制 script 的src获取javascript;link的src获取 css； img的src获取图片资源； iframe 的src获取页面标 是允许跨域的，这些标签不受跨域的限制；

    控制台 type script ，(如果我们用script标签请求其他网站的jQuery库，可以减少本网站的请求)

  • Cross-Origin Resource Sharing（CORS）跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。

3.1 如何解决同源策略带来的问题，进行跨域？

3.1.1 jsonp 单向跨域(get请求方式)

为什么script标签引入的文件不受同源策略的限制？因为script标签引入的文件内容是不能够被客户端的js获取到的，不会影响到被引用文件的安全，所以没必要使script标签引入的文件遵循浏览器的同源策略。而通过ajax加载的文件内容是能够被客户端js获取到的，所以ajax必须遵循同源策略，否则被引入文件的内容会泄漏或者存在其他风险。JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求

1
2
3
4
5
6
7
//本域代码
<script>
	function getUsers (obj){
      console.log(obj)
	}
</script>
<script src="http://www.google.com/getUsers.php"></script>
1
2
3
4
//需要谷歌支持，服务器代码如下，返回的是一个js代码的字符串，
<?php 
 	echo 'getUsers(["Jhon","JiM","kobe"])';
 ?>

3.1.2 Assess-Control

比如百度向谷歌发送一个请求，那么谷歌的服务器上的响应的文件上需要设置如下

1
header("Access-Control-Allow-Origin: http://www.baidu.com");//表示允许baidu.com跨域请求本文件

4 HTML5新增API postMessage方法，HTML5系列博文有篇文章专门分析总结

发表于 | 分类于

jQuery中和DOM中 offset系列的不同；
一　offset

  • jQuery中offset( ) 方法获取元素距离边界的值，该方法返回两个整形数值，一个代表left,一个代表top，其始终是获取的当前jquery对象相对于文档的边界的距离；

不写参数：jqueryObj.offset().left jqueryObj.offset().top 可以获取相应值

传入键值对参数：jQueryObj.offset({left:30,left:50});可以将匹配的元素设置距离边界的距离。

  • DOM中的offsetLeft offsetTop 获取元素距离边界值，

1)如果父元素有定位，那么DOM子元素是相对于父元素的border内边界的距离；

2)如果父元素没有定位，那么子元素是相对于文档边界的距离；

3)offsetLeft offsetTop 只能获取值，不能设置值，是一个只读属性；

4)offsetLeft 经常结合定位进行轮播图的封装，因为offsetLeft指的是子元素border外边界相对于父元素border内边界的距离，而定位的left值代表的也是这一段距离。

二，事件对象参数的offsetX offsetY clientX clientY的区别

先总结下区别：

event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX、event.pageY

类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

event.offsetX、event.offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

图xy2 :执行完rotateZ(90deg)

发表于 | 分类于

XML

1 XML声明以及基础语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="ISO-8859-1"?>   
<!--第一行是 XML 声明。它定义 XML 的版本 (1.0) 和所使用的编码 (ISO-8859-1 = Latin-1/西欧字符集)。
下一行描述文档的根元素-->
<note>										
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
<root>
  <child id="brother">
    <subchild>.....</subchild>
  </child>
</root>

注意:xml如何形成良好的语法习惯

  • 1)XML 文档必须有根元素 2) XML 文档必须有关闭标签 3)XML 标签对大小写敏感
  • 4)XML 元素必须被正确的嵌套 5)XML 属性必须加引号
< < 小于
> > 大于
& & 和号
' ‘ 单引号
" “ 引号

2 xml命名规则:可使用任何名称，没有保留的字词。

  • 1)名称可以含字母、数字以及其他的字符 2)名称不能以数字或者标点符号开始
  • 3)名称不能以字符 “xml”（或者 XML、Xml）开始 4)名称不能包含空格

3 xml元素和属性:元数据（有关数据的数据）应当存储为属性，比如id 用来查找元素的，可以存储为属性；而数据本身应当存储为元素。

因使用属性而引起的一些问题,请尽量使用元素来描述数据。而仅仅使用属性来提供与数据无关的信息

  • 1)属性无法包含多重的值（元素可以） 2)属性无法描述树结构（元素可以）
  • 3)属性不易扩展（为未来的变化） 4)属性难以阅读和维护

4 xmlDOM XMLHttpRequest对象:XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。

发表于 | 分类于

toString()和valueof()的区别

1.存在环境

1
所有的对象都继承了这两个方法，甚至于包装对象Number、String和Boolean。

2.具体细节

1
2
3
4
5
6
7
8
9
10
对于不同类型的对象，js定义了多个版本的 toString 和 valueOf 方法
toString:
（1）普通对象，返回 "[object Object]";
（2）数组，返回数组元素之间添加逗号合并成的字符串;
（3）函数，返回函数的定义式的字符串;
（4）日期对象，返回一个可读的日期和时间字符串;
（5）正则，返回其字面量表达式构成的字符串;
valueOf:
（1）日期对象，返回自1970年1月1日到现在的毫秒数;
（2）其它均返回对象本身;比如数组，函数，对象等以及number 布尔类型 字符串的valueof()都将返回本身
1
2
3
Object.prototype.valueOf()
用 MDN 的话来说，valueOf() 方法返回指定对象的原始值。
JavaScript 调用 valueOf() 方法用来把对象转换成原始类型的值（数值、字符串和布尔值）。但是我们很少需要自己调用此函数，valueOf 方法一般都会被 JavaScript 自动调用。
1
2
toString() 方法返回一个表示该对象的字符串。
每个对象都有一个 toString() 方法，当对象被表示为文本值时或者当以期望字符串的方式引用对象时，该方法被自动调用。

原始类型

1
2
Number String Boolean Undefined  Null
在 JavaScript 进行对比或者各种运算的时候会把对象转换成这些类型，从而进行后续的操作

3.应用场景——类型转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
String类型转化    对象到字符串  
（1）执行toString，如果返回了一个原始值，则将其转化为字符串
（2）否则执行valueOf方法，如果返回了一个原始值，则将其转化为字符串
（3）否则抛出类型错误
    如果 toString 方法存在并且返回原始类型，返回 toString 的结果。
    如果 toString 方法不存在或者返回的不是原始类型，调用 valueOf 方法，如果 valueOf 方法存在，并且返回原	始类型数据，返回 valueOf 的结果。
    其他情况，抛出错误。
Number类型转化  对象到数字
（1）执行valueOf，如果返回了一个原始值，如果需要，则将其转化为数字
（2）否则执行toString，如果返回了一个原始值，则将其转化为数字并返回
（3）否则抛出类型错误
	如果 valueOf 存在，且返回原始类型数据，返回 valueOf 的结果。
	如果 toString 存在，且返回原始类型数据，返回 toString 的结果。
	其他情况，抛出错误。
	
以上两种方式转换的情况，我们可以通过重写对象的valueOf()方法和toString()方法来看下javascript是如何选择执行的以及执行的顺序

4.类型转换与关系操作符(>、<等，不包括===和!==)

1
2
3
4
5
- 两个都是数值，则比较数值
- 两个都是字符串，则比较字符编码值
- 其中一个是数值，则要把另个转化成数值进行比较
- 如果其中一个是对象，则调用valueOf，若没有返回原始值则调用toString，再进行前面的比较
- 如果有一个是布尔值，则将其转化成数值

注：日期对象只调用toString，不会调用valueOf方法

发表于 | 分类于

一 opacity和rgba 改变透明度的区别

需要注意，rgba()

  • 仅仅改变的是背景的透明度，
  • 不会对文本造成影响，不具有继承性

然而，opacity

  • 不仅会改变背景的透明度，
  • 还会改变文本的透明度，并且具有继承性

二 代码演示：

1
2
3
4
5
6
7
8
9
10
11
12
<style>
       div{
           width: 500px;
           height: 100px;
           background-color:  rgba(344,24,67,.3);
       }
   </style>
<div>这一段话是div里面的文字,opacity 透明度会改变字体的透明度 ，rgba  则不会
  		<p>这一段话是p里面的文字，如果对div设置透明度的时候，用opacity那么将会被继承，如果用rgba设置			透明度的时候，则不会被继承
     	</p>
</div>
1
2
3
4
5
6
7
8
<style>
      div{
          width: 500px;
          height: 100px;
          background-color:  rgb(344,24,67);
          opacity: 0.3;  
      }
  </style>

三 总结：在做项目的时候，尽量用rgba 来改变透明度，因为opacity透明度具有继承性，并且还会改变文本的透明度，会造成一些影响