HTML&CSS面试高频考点(三)
11. CSS隐藏元素的方式
/*占据空间,无法点击*/
visibility: hidden;
position: relative; top: -999em; /* 不占据空间,无法点击 */
position: absolute; top: -999em;
display: none;
position: absolute; visibility: hidden;
height: 0; overflow: hidden; /*可以点击*/
opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */
position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */
=> display: none; 和 visibility: hidden; 的区别?
- display: none; 元素消失,也不再占据空间;visibility: hidden; 元素消失但仍然占据空间;
- visibility具有继承性,其子元素也会继承此属性,若给子元素设置visibility:visible,则子元素会显示;
- visibility不会影响计数器的计算,虽然隐藏掉了,但是计数器依然继续运行着;
- 在css3的transition中支持visibility属性,但是不支持display,因为transition可以延迟执行,因此配合visibility使用纯css实现hover延时显示效果可以提高用户体验;
- display:none会引起回流(重排)和重绘 visibility:hidden只会引起重绘。
opacity:0 只是让内容不可见,透明度为0,在渲染树中,在dom文档中仍旧占领位置,子元素也不会展示,而且子元素不能通过设置opacity:1来展示,元素的点击事件可用。
重绘重排
重绘重排是由于浏览器再次渲染引起的,首先了解浏览器的渲染过程。
渲染引擎会解析HTML文档来构建DOM树,同时用CSS解析器解析CSS文档构建CSSOM树。接下来将两者关联起来构成渲染树(RenderTree),这一过程称为Attachment。然后浏览器按照渲染树进行布局(Layout),最后一步通过绘制显示出整个页面。
- 重排(回流):render tree中的一部分因元素的规模尺寸、布局、隐藏等改变需要重新构建。页面第一次加载的时候必须进行一次回流。回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分树。
- 重绘:完成回流后,浏览器重新绘制受影响的部分到屏幕中。
回流必定引起重绘,而重绘不一定引起回流。
回流导致渲染树需要重新计算,开销较大,所以要尽量避免回流。
重绘的产生:更新只影响元素的外观、风格,而不影响布局的属性。eg: visibility, outline, 背景颜色等。
避免回流的方法:
- 样式集中改变(老版本才有的问题,现代浏览器已有Flush队列进行渲染队列优化);
- 缓存布局信息;
- position属性为absolute或fixed的元素,回流开销比较小;
- 使用DocumentFragment,让要操作的元素进行“离线处理”。
12. Flex布局
13. 双栏布局 三栏布局
三列布局:
(1)浮动解决方案
.layout1 .left{
float: left;
}
.layout1 .right{
float: right;
}
(2)绝对定位解决方案
.layout2 .left-center-right>div{
position: absolute;
}
.layout2 .left{
left:;
width: 300px;
}
.layout2 .center{
left: 300px;
right: 300px; //定左右栏的宽度
}
.layout2 .right{
right:;
width: 300px;
}
(3)Flex布局
.layout3 .left-center-right{
display: flex;
}
.layout3 .left{
width: 300px;
}
.layout3 .center{
flex:;
}
.layout3 .right{
width: 300px;
}
(4)表格布局
.layout4 .left-center-right{
width: 100%;
display: table;
height: 100px; //高度会跟着变
}
.layout4 .left-center-right>div{
display: table-cell;
}
.layout4 .left{
width: 300px;
}
.layout4 .right{
width: 300px;
}
在高度不已知的情况下3,4仍能使用(会自动撑开)。
14. 重排和重绘
*前面有提到哟~
触发重排的机制:
- 添加或删除可见的DOM元素
- 元素位置改变
- 元素本身的尺寸发生改变
- 内容改变
- 页面渲染器初始化
- 浏览器窗口大小发生改变
性能优化:
下面这段代码,会使浏览器发生三次重排:
var el = document.querySelector('.el');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';
如果能够合并为一次处理,这样DOM就只修改节点一次。这样最小化的方式有两种:
(1)使用cssText属性
var el = document.querySelector('.el');
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px';
(2)改变类名
// css
.active {
padding: 5px;
border-left: 1px;
border-right: 2px;
}
// javascript
var el = document.querySelector('.el');
el.className = 'active';
最小化的方式适合修改单个节点的情况。当需要批量修改节点的时候,则需要换一种方式:
(1)隐藏元素,进行修改后,然后再显示该元素
let ul = document.querySelector('#mylist');
ul.style.display = 'none';
appendNode(ul, data);
ul.style.display = 'block';
发生了两次重排,分别是隐藏和显示的时候。
(2)使用文档片段创建一个子树,然后再拷贝到文档中
let fragment = document.createDocumentFragment();
appendNode(fragment, data);
ul.appendChild(fragment);
只在将文档片段的子节点群插入的时候发生了一次重排。且不会造成元素短暂消失的逻辑问题。
(3)将原始元素拷贝到一个独立的节点中,操作这个节点,然后覆盖原始元素
let old = document.querySelector('#mylist');
let clone = old.cloneNode(true);
appendNode(clone, data);
old.parentNode.replaceChild(clone, old);
这种方法也只发生了一次重排(将操作完的复制节点插入的时候),但相较于文档片段的方式,更多的操作了DOM。
缓存布局信息
当访问诸如offsetLeft
,clientTop
这种属性时,会冲破浏览器自有的优化——通过队列化修改和批量运行的方法,减少重排/重绘版次。所以我们应该尽量减少对布局信息的查询次数,查询时,将其赋值给局部变量,使用局部变量参与计算。
//bad
div.style.left = 1 + div.offsetLeft + 'px';
div.style.top = 1 + div.offsetTop + 'px'; //good
current = div.offsetLeft;
div.style.left = 1 + ++current + 'px';
div.style.top = 1 + ++current + 'px';
每次都会访问div的offsetLeft,造成浏览器强制刷新渲染队列以获取最新的offsetLeft值。更好的办法就是,将这个值保存下来,避免重复取值。
15. CSS选择器
(一)基本选择器
1. 标签选择器
2. ID选择器 “#”
ID的命名要求:
- 只能有字母、数字、下划线。
- 必须以字母开头。
- 不能和标签同名。比如id不能叫做body、img、a。
- 大小写严格区分,也就是说aa,和AA是两个不同的ID
HTML页面,不能出现相同的id,哪怕他们不是一个类型。比如页面上有一个id为pp的p,一个id为pp的div,是非法的!
3. 类选择器 “.”
特性1:类选择器可以被多种标签使用。
特性2:同一个标签可以使用多个类选择器。用空格隔开。
4. 通配选择器 => 属性选择器
属性名选择器:
[attribute],用于选择所有带有特定属性的元素,例如 [title]
,选择所有带有 title 属性的元素。
属性值选择器:
*[title(="...")]{...},匹配所有带有title标签的
a[href(="...")][title(="...")]{color:red}将同时有 href(="...")和 title(="...")属性的 HTML 超链接的文本设置为红色
(二)高级选择器
1. 后代选择器
空格隔开 后代不一定是子元素,只要有祖先后代的关系就可以。
子元素选择器: >(直接的子元素)
同级元素选择器: a~b (与a元素同级的b元素)
相邻元素选择器:eg: h3+p 意思是h3后面的第一个p。
2. 交集选择器
不空格!(空格的就是后代选择器了)
一般不会连交,IE低版本不支持。
3. 并集选择器
逗号隔开。
4. 伪类选择器
<a>
标签对应几种不同的状态:
link
:超链接点击之前visited
:超链接点击之后focus
:是某个标签获得焦点的时候(比如某个输入框获得焦点)hover
:鼠标放到某个标签上的时候active
:点击某个标签没有松鼠标时
(1)静态伪类:只能用于超链接
a{}
和a:link{}
的区别:
a{}
定义的样式针对所有的超链接(包括锚点)a:link{}
定义的样式针对所有写了href属性的超链接(不包括锚点)
(2)动态伪类:针对所有标签都适用
focus(聚焦,点击某个文本框后输入文字,可以定义文本框和文字的属性)
:是某个标签获得焦点的时候(比如某个输入框获得焦点)hover(盘旋,鼠标停留在上面)
:鼠标放到某个标签上的时候active(长按状态)
:点击某个标签没有松鼠标时
(3)结构伪类选择器
:nth-child(n),选择同级元素中的第 n 个元素(元素下标是从1开始的)
也可以使用 even(偶数), odd(奇数) 关键字
:nth-last-child(n)
:first-child
:last-child
:only-child
:nth-of-type(n),选择同级元素中的第 n 个同类元素
eg:.box > :nth-of-type(2)
<div class="box">
<p>第一个 p 子元素,不会被选中</p>
<span>第一个 span 子元素,不会被选中</span>
<p>第二个 p 子元素,会被选中</p>
<span>第二个 span 子元素,会被选中</span>
</div>
:nth-last-of-type
:first-of-type
:last-of-type
:only-of-type
(4):root 选择器
选择文档的根元素,对于 HTML 文档就是 html 元素。
(5):empty 伪类选择器
选择没有子元素的元素(包括文本节点)
5. 伪元素选择器
::first-letter,选择元素的第一个字母
::first-line,选择元素的第一行
::before/::after
::before,选择在元素之前插入的生成内容
::after,选择在元素之后插入的生成内容
::selection,选择用户选取的内容
HTML&CSS面试高频考点(三)的更多相关文章
- HTML&CSS面试高频考点(二)
HTML&CSS面试高频考点(一) ♥ 6. W3C盒模型与怪异盒模型 标准盒模型(W3C标准) 怪异盒模型(IE标准) 怪异盒模型下盒子的大小=width(content + bord ...
- HTML&CSS面试高频考点(一)
1. 行内元素/块级元素 非替换元素/替换元素 行内元素(内联元素):a, abbr(缩写), acronym(只取首字母缩写), b, bdo(文本方向), big, br, cite(引用), c ...
- CSS面试复习(三):预处理器、工程化方案、三大框架中的CSS
一.预处理器 1.介绍 基于CSS的另一种语言.通过工具编译成CSS.添加了很多CSS不具备的特性.能提升CSS文件的组织 2.less嵌套 3 .sass嵌套 4. less变量 5.sass变量 ...
- 数仓面试高频考点--解决hive小文件过多问题
本文首发于公众号:五分钟学大数据 小文件产生原因 hive 中的小文件肯定是向 hive 表中导入数据时产生,所以先看下向 hive 中导入数据的几种方式 直接向表中插入数据 insert into ...
- 「面试高频」二叉搜索树&双指针&贪心 算法题指北
本文将覆盖 「字符串处理」 + 「动态规划」 方面的面试算法题,文中我将给出: 面试中的题目 解题的思路 特定问题的技巧和注意事项 考察的知识点及其概念 详细的代码和解析 开始之前,我们先看下会有哪些 ...
- C++面试高频题
作者:守望者1028链接:https://www.nowcoder.com/discuss/55353来源:牛客网 面试高频题: 校招过程中参考过牛客诸位大佬的面经,但是具体哪一块是参考谁的我也忘记了 ...
- 总结CSS面试题目的考察点及常见布局问题整理
整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考. 写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试 ...
- 面试准备——(三)Selenium(1)基础问题及自动化测试
转载:https://www.cnblogs.com/lesleysbw/p/6413880.html 面试准备——(三)Selenium(1)基础问题及自动化测试 滴滴面试: 1. 自己负责哪部 ...
- Java面试集合(三)
前言 大家好,给大家带来Java面试集合(三)的概述,希望你们喜欢 三 1.在Java中是否可以含有多个类? 答:可以含有多个类,但只有一个是public类,public类的类名与文件名必须一致. 2 ...
随机推荐
- seo网站优化收录过少的病因分析-智狐seo顾问
seo网站优化收录过少的病因分析 很多网站优化人员都了解,一个网站收录的重要性,企业网站要想可以在百度中占据一个良好的排名,获取的权重更高,那么网站收录自然就上去了,很多站长们在操作的过程中就会出现不 ...
- Java实现 LeetCode 736 Lisp 语法解析(递归)
736. Lisp 语法解析 给定一个类似 Lisp 语句的表达式 expression,求出其计算结果. 表达式语法如下所示: 表达式可以为整数,let 语法,add 语法,mult 语法,或赋值的 ...
- Java实现 LeetCode 324 摆动排序 II
324. 摆动排序 II 给定一个无序的数组 nums,将它重新排列成 nums[0] < nums[1] > nums[2] < nums[3]- 的顺序. 示例 1: 输入: n ...
- Java实现 LeetCode 225 用队列实现栈
225. 用队列实现栈 使用队列实现栈的下列操作: push(x) – 元素 x 入栈 pop() – 移除栈顶元素 top() – 获取栈顶元素 empty() – 返回栈是否为空 注意: 你只能使 ...
- Java实现 蓝桥杯VIP 算法提高 开灯游戏
算法提高 开灯游戏 时间限制:1.0s 内存限制:256.0MB 问题描述 有9盏灯与9个开关,编号都是1~9. 每个开关能控制若干盏灯,按下一次会改变其控制的灯的状态(亮的变成不亮,不亮变成亮的). ...
- java实现第四届蓝桥杯大臣的旅费
大臣的旅费 题目描述 很久以前,T王国空前繁荣.为了更好地管理国家,王国修建了大量的快速路,用于连接首都和王国内的各大城市. 为节省经费,T国的大臣们经过思考,制定了一套优秀的修建方案,使得任何一个大 ...
- Linux RPM命令查询
查看包是否安装 rpm -q 包名,其中,-q 表示查询 rpm -qa 表示查询所有已经安装的rpm包,a 表示所有 查询软件包详细信息 rpm -qi 包名,其中,-i 表示查询软件信息,-p 表 ...
- set基本运用
/* set集合基本用法 */ #include<iostream> #include<set> using namespace std; //set<T>a; v ...
- windows注册表删除右键菜单
1.删除空白处右键菜单 HKEY_CLASSES_ROOT\Directory\background\shell HKEY_CLASSES_ROOT\Directory\background\shel ...
- 【快手初面】要求3个线程按顺序循环执行,如循环打印A,B,C
[背景]这个题目是当时远程面试时,手写的题目.自己比较惭愧,当时写的并不好,面试完就又好好的完善了下. 一.题意分析 3个线程要按顺序执行,就要通过线程通信去控制这3个线程的执行顺序. 而线程通信的方 ...