RGBA和OPACITY的透明效果有什么不同？

如何理解line-height与vertical-align

随着互联网行业的发展，人们对网页的要求已经不限于传递信息，如何将网页设计的更合理，能更容易的让用户获取信息也愈发重要。而文字作为网页信息的主要载体，它的样式对用户交互的影响十分巨大，本次小课堂将跟大家分享两个关于文字样式的标签：line-height和vertical-align。

定义：行高是指文本行基线baseline之间的垂直距离

设置固定长度(px,rem等固定单位)

设置数字:设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

设置百分比:基于当前字体尺寸的百分比行距

注意： 数字可以直接被继承，然后在计算行高，而百分比是先计算出行高，在以px继承

定义：使行内元素的基线相对于该元素所在行的基线的垂直对齐

默认值baseline:元素基线与父元素基线对齐

众所周知，vertical-align支持很多属性值；(关键字值:vertical-align等等: middle;长度值：vertical-align: 4px等等；百分比值：vertical-align: 10%等等)

注意：vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

1,默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等

2,直接修改line-height值

把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。

设置父元素display:flex，使用align-items:center

绝对定位后设置top和left为50%，然后纵向变化50%的自身高度

参考一： MDN

参考二： 深入理解line-height与vertical-align

参考三： 对CSS vertical-align的一些理解与认识（一）

为什么我的vertical-align属性不起作用？

我们知道了vertical-align是垂直对齐的意思，不少经验尚浅的同行会试着使用这个属性实现一些垂直方向上的对齐效果，

            会发现有时候可以，有时候又不起作用，不知道为什么？因为只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。

还有什么其他的方法实现垂直居中

感谢大家观看

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树IT修真院   

  “我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

   这里是技能树IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。

   快来与我一起学习吧~>

IT行业的职业有以下几种：

1、WEB前端

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

2、硬件工程师

硬件工程师要求熟悉计算机市场行情；主要工作为：制定计算机组装计划、选购组装需要的硬件设备、合理配置和安装计算机以及外围设备、安装和配置计算机软件系统等。

3、硬件测试工程师

主要负责硬件产品的测试工作，保证测试质量及测试工作的顺利进行；编写测试计划、测试用例；提交测试报告，撰写用户说明书；参与硬件测试技术和规范的改进和制定。

4、软件工程师

软件工程师是一个广义的概念，包括软件设计人员、软件架构人员、软件工程管理人员、程序员等一系列岗位，工作内容都与软件开发生产相关，是IT行业中较为基础的职业。

5、云计算工程技术人员

云计算是分布式计算的一种，指的是通过网络“云”将巨大的数据计算处理程序分解成无数个小程序，然后，通过多部服务器组成的系统进行处理和分析这些小程序得到结果并返回给用户。

而云计算工程技术人员是指从事云计算技术研究，云系统构建、部署、运维，云资源管理、应用和服务的工程技术人员。

1背景介绍

1什么是RGBA？

rgb大家都熟悉，RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。那现在我们所说的grba又是什么呢？说得简单一点就是在grb的基础上加进了一个通道alpha。

其实他就是来定义透明度的。a的取值范围是0-1之间，不可以是负值，r、g、b三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：00% - 1000%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。

我们平时用的较多的是16进制颜色，例如黑色#000000;白色#FFFFFF，这些是16进制表示的颜色，如果使用RGB颜色表示就是 rgb(0, 0, 0)与rgb(255,255,255)，其实本质上是一样的，只是一个是16进制表示的，一个是二进制表示的(RGB颜色)。

用rgba改变大娃字体颜色

用rgba改变大娃边框颜色

用rgba改变大娃字体阴影颜色

用rgba改变大娃边框阴影颜色

其实我是一个dome

透明度还支持透明渐变。这对于制作一些特殊的效果是相当有用的，例如，当堆叠多个背景时。这里是两个背景的结合：一张，一个原谅绿到透明的线性渐变。

加了这个渐变属性

2什么是OPACITY？

也是一个css3属性，该属性用于设置元素的不透明度级别，所有的浏览器都支持这个属性。

opacity 中文翻译为：不透明度。语法：opacity：value | inherit ;

取值说明: value 不透明度，从00(完全透明)到10（完全不透明）。

3什么是DISPLAY：NONE

将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了。元素的内容也会被屏幕阅读所忽略。隐藏起来。

4什么是VISIBLITY

w3school上给的定义 定义和用法 visibility 属性规定元素是否可见。 提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

二知识剖析

1RGBA与OPACITY的区别

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明

rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。

三常见问题

DISPLAY 和VISIBILITY有什么区别

四解决方案

1主要在于visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击。有一句话是这么说的，display：none会真的把你弄没，而visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。

2就是displayde回流与渲染visibility没有这个影响前端性能的问题。回流则是重新使该页面渲染一次，从而影响性能。

3株连性,所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。如果子孙元素应用了visibility:visible，那么这个子孙元素又会刘谦般地显现出来。

对比总结： display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。 visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。

五编码实战

六扩展思考

什么是渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

详见dome

7参考文献

参考一： handongopqwe的专栏

参考二： CSS3 Gradient

参考三： 张云的博客

8更多讨论

更多讨论：大家有没有其他实现透明或隐藏的方法

某些情况下可以使用left:-100000px来达到同样效果。

position: relative;效果类似于visibility:hidden;还占着位置，不愿离开。

position: absolute;效果类似于display:none;消失的很远，还不占地方。

opacity ：0 和 visbility :hidden 之间有什么区别

visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。

鸣谢

感谢何华飒、王相博师兄，此教程是在他们之前技术分享的基础上完善而成

感谢大家观看

BY : 何华飒| 王相博 | 王姝丽

PPT链接

视频链接

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

我们下周再见！

------------------------------------------------------------------------------------------------------------------------

技能树IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~

我的邀请链接：>

这里是修真院前端小课堂，每篇分享文从

背景介绍知识剖析常见问题解决方案编码实战扩展思考更多讨论参考文献

八个方面深度解析前端知识/技能，本篇分享的是：

1背景介绍

盒子模型与元素水平

九宫格对于一个初学者来说，只需要了解标准盒模型，盒模型由内至外分别是content、padding、border、margin， 其中可以使用百分比的有content,padding,margin，边框border则不可以用%单位。

元素水平分为3种：block水平，inline-block水平，inline水平，3种元素各有不同的表现。

            block水平默认情况下，继承父级宽度，铺满整行。多个元素竖直方向排列，可以设置宽高，竖直方向上的padding,margin有效。

             inline元素水平排列，多个inline水平的元素，会在一行里排列，不可以设置宽高，竖直方向上的padding,margin无效。

             inline-block水平元素，用时具有block水平和inline水平的特点，多个元素水平排列成一行。可以设置宽高，竖直方向上的padding,margin有效。

2知识剖析

既然这样，实现九宫格效果，必然不能是9个block水平的元素或者是9个inline水平的元素，只能是inline-block的元素。

 所以引出第一种九宫格布局。inline-block布局。固定尺寸的九宫格布局。

关于九宫格的自适应，什么叫自适应，九宫格的自适应指的又是什么，认识css单位,px,%，与vw。

px,%,vw的不同之处

vw：viewpoint-width，视窗宽度，1vw等于视窗宽度的1%。

vh：viewpoint-height，视窗高度，1vh等于视窗高度的1%。

%:百分比，以父级元素的尺寸为基准，乘以%后得到相应的尺寸。

既然这样就可以轻松的写出第一个九宫格展示图。

b、float布局

关于浮动

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

c、vw布局

d、flex布局

e、grid布局

f、position布局

g、line-height布局

3常见问题

display:inline-block后的九宫格会折行？

4解决方案

分析原因：

解决办法：

1、父级设置font-size为0

2、标签闭合

5编码实战

6扩展思考

9宫格必须使用9个div吗？

不一定

直接看demo。

3个div实现宫格

1个div实现9宫格

7参考文献

参考一：w3c

参考二：知乎

8更多讨论

讨论点1：以上提到的九宫格布局实现方案，还有别的实现方案吗？

       table布局方案，纯position定位方案 

讨论点2：选择哪种方案好？

         考虑兼容性的话float布局与inline-block布局最好，其他的布局方案或多或少不兼容低版本浏览器

讨论点3：初学者实现九宫格要注意的问题

inline-block布局的问题，有必要清楚浮动吗？

问题：

1display:inline-block后的九宫格会折行？

答：

a、父级设置font-size为0

b、标签闭合

2为什么绝对定位知识设置相对方向值，就能实现width或者height具有尺寸？

答：这是绝对定位的特性，假如我们在一个相对定位的容器有一个子元素，我们直接设置这个子元素是绝对定位，然后设置left：0;right:0;top:0;bottom:0;此时子元素的宽度就是父级的宽度，子级的高度就是父级的高度，这就是绝对定位的特性，拉伸特性。

3为什么九宫格布局不能使用height的百分比。

答：

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。

（即块级元素的宽度）

但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

因为父级元素的高度是由该元素里面的内容撑起的，在不设置该圆素高度的前提下。

于是子元素的高度height: 50% 也不会起作用。解决办法就是给html和body加上height: 100%。

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，学习的路上不再迷茫。

这里是技能树IT修真院：>

软件项目外包和人力资源外包都是外包，但是也有一定的区别，具体区别如下：

一、本质的不同:

人力资源外包是将人力资源管理的某些功能外包给专业组织的一种管理策略，其目的是有效提高效率，百使外包职能的运作更加专业化。

软件项目外包是指企业将软件项目的全部或部分工作外包给提供外包服务的企业，以专注于核心竞争力业务，降低软件项目成本的一种软件需求活动。

二、管理责任主度体的不同：

属于工程外包的，承包企业不直接管理承包单位的职工，承包单位的劳动组织形式和工作时间由承包单位自行确定；而人版才外包人员必须按照用人单位确定的工作形式和工作时间进行工作。

三、结算方式不同:

项目外包是按约定单价和完成工作量结算，其合同目标为“工作量”；软件外包是按派遣人数、约定工资和成本标准结算，其合同目标为“人”。

四、用工需求不同:

工程外包需要产品或服务，承包人使用的劳务数量与承包人没有实质性权关系；人才外包需要劳务，发包人需要派遣公司按照约定数量提供派遣技术人员。

五、合同性质不同:

项目外包是合同，而人才外包签订的是软件人才外包合同。

小课堂成都第142期   分享人：张珺琢

1背景介绍

外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界重合在一起而形成一个单一边界,外边距的重叠只产生在普通流的垂直相邻边界间。

如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。

2知识剖析

当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加

一般情况：

3常见问题

外边距重叠的意义？

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。

解决外边距重叠？

4解决方案

外层元素padding代替

内层元素透明边框 border:1px solid transparent;

内层元素绝对定位 postion:absolute:

外层元素 overflow:hidden;

内层元素 加float:left;或display:inline-block;

内层元素padding:1px;

5编码实战

对**盒子设置overflow：hidden；或者对橙色盒子设置绝对定位。或设置浮动，等等。很多种方法。

6拓展思考

利用BFC是否能避免垂直方向margin重叠？

BFC的两条属性：

1内部的Box会在垂直方向，一个接一个地放置。

2Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

由此：

当垂直的两个box属于不同BFC时，可以避免重叠。

感谢收看。

>

大家好，我是IT修真院的学员，一位正直纯洁善良的web前端程序员，给大家分享一下什么是外边距重叠？重叠的结果是什么？

1背景介绍

外边距是盒子模型中的一个属性。在使用外边距时，有可能会发生外边距重叠。

2知识剖析

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距的合并的几种情况

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

外边距甚至可以与自身发生合并。 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。

如果这个外边距遇到另一个元素的外边距，它还会发生合并

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并的意义：以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

3常见问题

有时候，我们有可能不需要外边距重叠。

4解决方案

1浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）

2外层元素padding代替

3内层元素透明边框 border:1px solid transparent;

4用同一方向的margin，都设置为top或者bottom。

5编码实战

6扩展思考

7参考文献

1w3school教程 CSS 外边距合并

2如何解决外边距margin叠加的问题探讨

3CSS 外边距(margin)重叠及防止方法

8更多讨论

问题一

外边距有哪些属性？

答：margin-top  上外边距               margin-right  右外边距

    margin-bottom  下外边距             margin-left   左外边距

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。

问题二

什么是外边距？

答：

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

问题三

margin如何简写？

答：

四条外边距按照上、右、下、左的顺序。

CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：

如果缺少左外边距的值，则使用右外边距的值。

如果缺少下外边距的值，则使用上外边距的值。

PPT

视频

以上就是关于如何理解line-height与vertical-align全部的内容，包括:如何理解line-height与vertical-align、南邮研一要自学什么、it行业有哪些职位等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！