Css & Html / Summary of Interview Questions_html中reba是什么-CSDN博客

本文链接：https://blog.csdn.net/liuxin_hello/article/details/128155237

opacity 与 rgba 区别？

reba(红,绿,蓝,alpha)

W3C指在原有的rgb颜色模型之后增加了 “alpha”参数，“可以让制定的颜色透明化”（rgb()上扩展的，其只可以设置颜色，而不能使设置的颜色透明化）
eg ：rgba(55,146,179,.5) ;
rgb值为“55,146,179”，.5使设定的rgb值为50%透明,1为完全不透明，0为完全透明

opacity

opacity属性是css3的属性，也可以实现透明效果

例子：opacity:.65; // 1为完全不透明，0为完全透明

区别？

rgba()和opacity都能实现透明效果。
opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。
opacity 子元素的内容也透明了， rgba() 只是本身透明。

谈谈CSS3 硬件加速(GPU 加速)？

何为硬件加速？

就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。

CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行染减少 CPU 操作的一种优化方案。
页面Css做图片滑动，滚动，特别是手机端，可能出现卡顿，闪白等情况。
解决这些动画卡顿的情况，我们通常可以采用GPU加速的方式。
由于 GPU 中的 ransform 等 CSS属性不会触发 repaint，所以能大大提高网页的性能

为何要开启硬件加速？

国内浏览器的内核，大部分是Chrome的内核，Chrome下的动画比IE9和FF都要慢很多，所以要开启硬件加速，提升动画的流畅性。

如何开启 GPUR 加速？

CSS 中的以下几个属性能触发硬件加速:

transform
opacity
filter
will-change

如何开启硬件加速

Chrome, FireFox, Safari, IE9+ 以及最新的 Opera都支持硬件加速，只要使用特定的CSS语句就可以开启硬件加速:
1 使用3d效果来开启硬件加速
.lusheng {
   -webkit-transform: translate3d(-50%,-50%,0x) 
  rotate3d(10px,10px,0,180deg)
   scale3d(1.1,1.1, 1.1);
}
2 如果并不需要用到transform变换，仅仅是开启硬件加速:
.lusheng{
   -webkit-transform: translateZ(0);
}
3 通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：
.lusheng {
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
}
注:　通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题，但使用仍需谨慎，使用前一定要进行严谨的测试，否则它反而会大量占用浏览网页用户的系统资源，尤其是在移动端

CSS设置inline-block存在空隙原因和解决方法？

把两个块级元素的设置 display:inline-block。使得两个块元素显示子在一行时候，我们会发现块元素和块元素的之间存在一定的空隙。这就是“换行符/空格间隙问题”。

产生间隙的原因?

元素被当成行内块元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符。
在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

法一：解决元素之间的空白符；缺点：代码的可读性变差。
<body>
<section>

<div class="div1">child1
</div class="div2"><div>child2
</div>
</section>


<section>
<div class="div1">child1</div><div class="div2">child2</div>
</section>
</body>
法二：为父元素设置“font-size:0”,再为子元素设置“font-size”。

缺点：inline-block元素必须设定字体，不然行内元素中的字体不会显示。增加了代码量。
<section style="font-size: 0px">
  <div class="child" style="font-size: 16px">child1</div>
  <div class="child" style="font-size: 16px">child2</div>
</section>
法三：为inlink-block元素添加float

缺点：float布局会有高度塌陷问题,如果解决float带来的高度塌陷问题，咱们下次在细谈。

法四：设置子元素margin为负值

缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的。
如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的，因此这个方法不通用。
注意：当marigin-right使用相对单位em来表示时，Chrome下可以正常去除间距,而Firefox下元素之间有重叠。
.div1 + .div2{
  margin-left: -2px;
}
法五：设置父元素的display:table和white-space
section{
  display: table;
  word-spacing:-1em; /*兼容其他浏览器，题主还未验证*/
}

几种元素消失的属性？

在CSS中，我们可以使用display属性来隐藏元素。下面是三种常见的方法：

1. none：完全隐藏元素，并从文档流中移除。

2. visibility:hidden：元素仍然保留其空间，但不可见。

3. opacity:0：元素的不透明度变为0，即完全透明。

4. width: 0; 宽度设为0，元素看不见，不占位。

需要注意的是，在隐藏元素之前，我们应该考虑场景和实际需求，确保选择正确的方法。

Doctype 的作用是什么？

<!doctype>声明须处于HTML文档头部，在<html>标签之前，HTML5中不区分大小写；
<!doctype>是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档；
<!doctype>声明于文档的最前面，告诉浏览器以何种方式来渲染页面；
这里有两种模式，严格模式和混杂模式。
严格模式：排版和JS运作模式是以浏览器的最高标准执行。
混杂模式：向后兼容，模拟老式的浏览器，防止浏览器无法兼容页面。

在页面中画出一条 0.5 px的线？

 <style>
	div {
		height: 1px;
		margin: 50px auto;
		/* 渐变轴为53度，从蓝色渐变到橙色 */
		background: linear-gradient(53deg,	#ccfffc,	#ffcccf);
	    /*
		  transform三大属性之scale（缩放）
		    1、其他：transform三大属性： 
                 1.1、rotate、scale、translate 、
                 1.2、transform-origin属性设置元素旋转起始位置
		    2、CSS 属性transform里面的scale()函数，可以用来改变元素的显示比例
		    3、scale(数值)定义倍数缩放，>1放大，<1缩小
		    4、scaleX()通过x轴定义，仅水平方向缩放
			5、scaleY()通过y轴定义，仅垂直方向缩放
			6、scaleZ()通过z轴定义，定义3d缩放
		*/ 
		transform: scale(0.5) /* X(水平)、Y(垂直)分别缩小大0.5两倍 */
		}
  </style>
  <body>
	  <div class="div"></div>
  </body>

效果