unknow 前端开发面试题收集(css部分)
来源:互联网 发布:overlay软件 编辑:程序博客网 时间:2024/06/04 19:14
的font-size: 10rem;那么当用户重置或拖拽浏览器窗口时,它的文本会不会受到影响?答:不会。rem是css3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。5.问: 伪类选择器:checked将作用与input类型为radio或者checkbox, 不会作用于option?答:不对。可以作用于option,试了下感觉并没有什么用,虽然能选中,但是这个不能改变其中的属性。复制代码 option:checked { color: red; } input:checked { background: red; }
Male
Female
复制代码
6.问: 在HTML文本中,伪类:root总是指向html元素?
答:是。
7.问:translate()方法能移动一个元素在z轴上的位置?
答:不能。它只能移动x,y轴的位置。translate3d可以。
8-14.这六个题都是在考css选择器的优先级,看下14题:
问:如下代码中文本“Sausage”的颜色是?
- Milk
- Sausage
#awesome .favorite:not(#awesome) .highlight {
color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
color: blue;
}
答:red
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 n 个子元素的每个元素.
:nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 n 个子元素的每个元素,从最后一个子元素开始计数。
15.
html:
Hello
css:
#example { margin-bottom: -5px;}问:#example的位置会发什么什么?答:所有带id为example的元素的位置都会向上移动5px.(一般id不取重复,如果真的这样设置了就和class效果一样)16.省略。。。17-21.公用一个例子:17.问:#i-am-useless 会被浏览器加载吗?
i-am-useless {background-image: url(‘mypic.jpg’);}
答:不会。
18.问:mypic.jpg 会被浏览器加载吗?
test2 {
background-image: url('mypic.jpg');display: none;
}
答:会。
19.问:mypic.jpg 会被浏览器加载吗?
test2 {
background-image: url('mypic.jpg');visibility: hidden;
}
答:会。
20.问:mypic.jpg 会被浏览器加载吗?
复制代码
test1 {
display: none;
}
test2 {
background-image: url('mypic.jpg');visibility: hidden;
}
复制代码
答:不会。
21.问:mypic.jpg 会被浏览器加载吗?
复制代码
test1 {
visibility: hidden;
}
test2 {
background-image: url('mypic.jpg');display: none;
}
复制代码
答:会.
22-23.
css:
@media only screen and (max-width: 1024px) {
margin: 0;
}
22.问:only选择器的作用是?
答:停止旧版本浏览器解析选择器的其余部分。
only 用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query 但却支持Media Type 的设备隐藏样式表的。其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only 不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only 而不是screen;另外不支持Media Qqueries 的浏览器,不论是否支持only,样式都不会被采用。
23.问:screen关键词是指设备的物理屏幕大小还是指浏览器的视窗。
答:浏览器的视窗。
24.问:overfloa:hidden 是否形成新的块级格式化上下文?
答:会。
会触发BFC的条件有:
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block 中的任何一个。
position的值不为relative 和static。
根元素。
总结:
一.css选择器,优先级知识点考的挺多。如何计算优先级,参考http://www.cnblogs.com/wangfupeng1988/p/4285251.html 这篇文章引入的一个概念:特指度。特指度表示一个css选择器表达式的重要程度,可以通过一个公式来计算出一个数值,数越大,越重要。
这个计算叫做“I-C-E”计算公式,
I——Id;
C——Class;
E——Element;
即,针对一个css选择器表达式,遇到一个id就往特指度数值中加100,遇到一个class就往特指度数值中加10,遇到一个element就往特指度数值中加1。
举例:
CSS选择器表达式
特指度计算结果
p
1
p.large
11
P#large
101
div p#large
102
div p#large ul.list
113
div p#large ul.list li
114
注意:!important优先级最高,高于上面一切。* 选择器最低,低于一切。
浏览器CSS匹配顺序:
浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如#divBox p span.red{color:red;},浏览器的查找顺序如下:先查找html中所有class=’red’的span元素,找到后,再查找其父辈元素中是否有p元素,再判断p的父元素中是否有id为divBox的div元素,如果都存在则匹配上。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。
二:display:none 和visibilty:hidden的区别。
两者都是将某个元素隐藏起来,区别是:display:none会使对象彻底消失,不占据空间;但是visibility:hidden所占的空间还在,留了一块空白区域。(不过上述例子,关于img加载的,还有些不是很懂 第18问,为什么display:none还是要加载图片,第20问,却没有加载图片)
三:浏览器渲染,这个自己要着重学习下:
浏览器的渲染原理简介
专题:浏览器:渲染重绘、重排两三事
浏览器加载和渲染HTML的顺序以及Gzip的问题
从FE的角度上再看输入url后都发生了什么
四:BFC 块级格式化上下文
深入理解BFC和Margin Collapse
CSS布局中一个简单的应用BFC的例子
理解BFC(Block Formatting Context)
我对BFC的理解
参考:
前端试题css部分
作者:wj704 出处:http://www.cnblogs.com/wj204/
- unknow 前端开发面试题收集(css部分)
- 前端开发面试题收集(css部分)
- 前端开发面试题收集
- 最新前端开发工程师面试题——CSS部分
- 收集Web前端 面试题 Javascript部分
- 前端面试题总结HTML CSS部分
- 前端面试题总结HTML CSS部分
- 前端面试题总结HTML CSS部分
- 前端面试题总结HTML CSS部分
- 前端面试题收集
- CSS面试题【网页前端开发面试题考试题】
- css前端面试题
- 常见前端面试题之HTML/CSS部分(一)
- 常见前端面试题之HTML/CSS部分(二)
- 常见前端面试题之HTML/CSS部分
- 【自学笔记】前端面试题之CSS(部分HTML)
- 前端面试题整理-------HTML/CSS部分----小知识点
- Web前端面试题 CSS部分问题与解答
- MonoGC原理—SGen
- UVa 197 - Cube
- 前端开发面试题收集(css部分)
- android获取cpu信息
- LRU缓存实现(Java)
- unknow 前端开发面试题收集(css部分)
- VM中调节系统窗口大小
- 逻辑运算符
- 博客园整理
- [leetcode]118. Pascal's Triangle
- 前端开发人员必须了解的七大技能图谱
- 简单C语言笔试题的整理
- 线性回归中的最小二乘法,L1,L2推导
- git设置远程仓库关于多用户ssh无密码登陆问题