Css Html / Summary of Interview Questions
目录
opacity 与 rgba 区别 ？
谈谈CSS3 硬件加速(GPU 加速)？
CSS设置inline-block存在空隙原因和解决方法？
几种元素消失的属性？
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; /*兼容其他浏览器，题主还未验证*/ }
几种元素消失的属性？
- display: none; 元素消失，不占位；
- visibility: hidden; 元素消失，占位；
- opacity: 0; 透明度设为0，元素看不见，占位；
- 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>效果
Css Html / Summary of Interview Questions相关推荐
- JavaScript / Summary of Interview Questions
目录 Js中函数柯里化? commonjs和es6模块化的使用? 判断一个对象为空对象的几种方法? Js中函数柯里化? 函数柯里化是指: 将使用多个参函数,转换成一系列, 使用一个参数的函数, 它返回 ...
- 35+ Top Apache Tomcat Interview Questions And Answers【转】
原文地址:https://www.softwaretestinghelp.com/apache-tomcat-interview-questions/ Most frequently asked Ap ...
- 机器学习面试题合集Collection of Machine Learning Interview Questions
The Machine Learning part of the interview is usually the most elaborate one. That's the reason we h ...
- 转:C# Interview Questions
转自: http://blogs.crsw.com/mark/articles/252.aspx C# Interview Questions This is a list of questions ...
- [转]Design Pattern Interview Questions - Part 2
Interpeter , Iterator , Mediator , Memento and Observer design patterns. (I) what is Interpreter pat ...
- English job interview Questions and Answers
"What are your goals for the future?" or "Where do you see yourself in five years?&qu ...
- C# Interview Questions and Answers
What's C# ?C# (pronounced C-sharp) is a new object oriented language from Microsoft and is derived f ...
- Java developer interview questions: The hard part
Since I've attended several job interviews recently, I've decided toshare some experience with you. ...
- 安卓面试题 Android interview questions
安卓面试题 Android interview questions 作者:韩梦飞沙 2017年7月3日,14:52:44 1. 要做一个尽可能流畅的ListView,你平时在 ...
最新文章
- R语言构建xgboost模型：指定特征交互方式、单调性约束的特征、获取模型中的最终特征交互形式（interaction and monotonicity constraints）
- python爬虫流程-Python：爬虫处理流程及网页解析
- tensorflow 对csv数据进行批量获取
- PAT甲级1019 General Palindromic Number：[C++题解]进制位、回文数、vector来做
- PID1 / 明明的随机数
- bzoj 2905 背单词
- mybatis 映射成多个list_SSM:Mybatis架构与原理
- 通过特性动态获取属性及值
- 【我的物联网成长记11】8招带你玩转规则引擎
- soap协议_启扬课堂：扒一扒IOT的协议，很多你可能不知道
- python中的thread_深入理解Python中的ThreadLocal变量（上）
- VC Ping IP的类
- 【软件加密】python制作一个超强的加密软件
- POI 实现Word替换书签
- SPSS因子分析案例
- Linux【环境部署 02】yum源镜像下载+挂载镜像+本地yum源配置+局域网yum源服务搭建+局域网yum源使用（一篇学会离线yum源配置）
- 自动化专业好找工作吗?就业方向是什么？
- 时域、频域、傅里叶变换
- 基统计的方法对进行多因子的探索性数据分析
- MatLab 数字图像处理实验 图像分割