在我们找工作时经常会因为面试问题而头痛, 本文搜集了一些前端面试题及答案, 希望对大家有一定的帮助.
CSS 相关问题
display:none 和 visibility:hidden 的区别?
display:none 隐藏对应的元素, 在文档布局中不再给它分配空间, 它各边的元素会合拢,
就当他从来不存在.
visibility:hidden 隐藏对应的元素, 但是在文档布局中仍保留原来的空间.
CSS 中 link 和 @import 的区别是?
(1) link 属于 html 标签, 而 @import 是 CSS 提供的;
(2) 页面被加载的时, link 会同时被加载, 而 @import 引用的 CSS 会等到页面被加载完再加载;
(3) import 只在 IE5 以上才能识别, 而 link 是 HTML 标签, 无兼容问题;
(4) link 方式的样式的权重 高于 @import 的权重.
position 的 absolute 与 fixed 共同点与不同点
A: 共同点:
1, 改变行内元素的呈现方式, display 被置为 block;
2, 让元素脱离普通流, 不占据空间;
3, 默认会覆盖到非定位元素上
B: 不同点:
absolute 的 "根元素" 是可以设置的, 而 fixed 的 "根元素" 固定为浏览器窗口. 当你滚动网页, fixed 元素与浏览器窗口之间的距离是不变的.
介绍一下 CSS 的盒子模型?
1)有两种, IE 盒子模型, 标准 W3C 盒子模型; IE 的 content 部分包含了 border 和 pading;
2)盒模型: 内容(content), 填充(padding), 边界(margin), 边框(border).
CSS 选择符有哪些? 哪些属性可以继承? 优先级算法如何计算? CSS3 新增伪类有那些?
CSS 选择符:
1,id 选择器( # myid)
2, 类选择器(.myclassname)
3, 标签选择器(div, h1, p)
4, 相邻选择器(h1 + p)
5, 子选择器(ul> li)
6, 后代选择器(li a)
7, 通配符选择器( * )
8, 属性选择器(a[rel = "external"])
9, 伪类选择器(a: hover, li:nth-child)
可继承的样式: font-size font-family color, text-indent;
不可继承的样式: border padding margin width height ;
优先级就近原则, 同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important> id> class> tag
important 比 内联优先级高, 但内联比 id 要高
CSS3 新增伪类举例:
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素.
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素.
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素.
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素.
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素.
:enabled :disabled 控制表单控件的禁用状态.
:checked 单选框或复选框被选中.
列出 display 的值, 说明他们的作用. position 的值, relative 和 absolute 分别是相对于谁进行定位的?
display 值:
block 象块类型元素一样显示.
inline 缺省值. 象行内元素类型一样显示.
inline-block 象行内元素一样显示, 但其内容象块类型元素一样显示.
list-item 象块类型元素一样显示, 并添加样式列表标记.
position 值:
absolute: 生成绝对定位的元素, 相对于 static 定位以外的第一个祖先元素进行定位.
fixed (老 IE 不支持): 生成绝对定位的元素, 相对于浏览器窗口进行定位.
relative: 生成相对定位的元素, 相对于其在普通流中的位置进行定位.
static 默认值. 没有定位, 元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明).
inherit 规定从父元素继承 position 属性的值.
CSS3 有哪些新特性?
CSS3 实现圆角(border-radius), 阴影(box-shadow), 对文字加特效(text-shadow,), 线性渐变(gradient), 旋转(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转, 缩放, 定位, 倾斜
增加了更多的 CSS 选择器 多背景 rgba
在 CSS3 中唯一引入的伪元素是::selection.
媒体查询, 多栏布局
border-image
为什么要初始化 CSS 样式?
因为浏览器的兼容问题, 不同浏览器对有些标签的默认值是不同的, 如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异.
当然, 初始化样式会对 SEO 有一定的影响, 但鱼和熊掌不可兼得, 但力求影响最小的情况下初始化.
* 最简单的初始化方法就是: * {padding: 0; margin: 0;} (不建议)
淘宝的样式初始化:
- body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li,
- pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
- body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
- h1, h2, h3, h4, h5, h6{ font-size:100%; }
- address, cite, dfn, em, var { font-style:normal; }
- code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
- small{ font-size:12px; }
- ul, ol { list-style:none; }
- a { text-decoration:none; }
- a:hover { text-decoration:underline; }
- sup { vertical-align:text-top; }
- sub{ vertical-align:text-bottom; }
- legend { color:#000; }
- fieldset, img { border:0; }
- button, input, select, textarea { font-size:100%; }
- table { border-collapse:collapse; border-spacing:0; }
对 BFC 规范的理解?
BFC, 块级格式化上下文, 一个创建了新的 BFC 的盒子是独立布局的, 盒子里面的子元素的样式不会影响到外面的元素. 在同一个 BFC 中的两个毗邻的块级盒在垂直方向 (和布局方向有关系) 的 margin 会发生折叠.
(W3C CSS 2.1 规范中的一个概念, 它决定了元素如何对其内容进行布局, 以及与其他元素的关系和相互作用.)
解释下 CSS sprites, 以及你要如何在页面或网站中使用它.
CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中, 再利用 CSS 的 "background-image","background- repeat","background-position" 的组合进行背景定位, background-position 可以用数字能精确的定位出背景图片的位置.
这样可以减少很多图片请求的开销, 因为请求耗时比较长; 请求虽然可以并发, 但是也有限制, 一般浏览器都是 6 个. 对于未来而言, 就不需要这样做了, 因为有了 `http2`.
来源: http://www.css88.com/interview/14154.html