您的位置：首页 > 职场人生

关于前端第一次面试的总结与思考(CSS部分)

2018-04-17 16:30 579 查看

我是一个很少写博客的人，最近遇到的事情太多，想找个地方记录下关于我的前端之路。

上周开始在拉勾和猎聘上投简历，周五面试了人生中第一次前端面试。收到面试通知的前一天晚上，得知奇化网是一家国企，因为前一家公司也是国企，我自以为了解国企尿性的，准备不足也确实小瞧了些。

特此记录下还有印象的面试题目，补充自己的基础知识。

---------------------------------------------------------------------------------

CSS部分

1.CSS选择符有哪些，CSS属性哪些可以继承，CSS选择器的优先级

CSS选择符（9）：

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1+p）:注意，在一个相同的父元素多个相邻的兄弟，用一个选择符只能选择相邻的第二个元素，eg: li + li {font-weight:bold}只会把除第一列后面的加粗

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
</div>
</body>
</html>

5.子选择器（ul >li）

6.后代/包含选择器（li a）

7.属性选择器（[title]）E[attr]{}
E[attr=value]{}选择具有attr属性且属性值等于value的E
E[attr~=value]{}选择具有attr属性值等于value的，可用空格分开，例如

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title~=hello]
{
color:red;
}
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />

<h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
</body>
</html>

8.伪类选择器（a:hover, li: nth-child）

伪类：

属性	描述
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

伪元素：

属性	描述
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

9.通配符选择器（*）

可继承的CSS属性：（大多数不可继承）

可以的：font-size font-family color, ul li dl dd dt

不可以：border padding margin background-color width height等

CSS选择器的优先级：

优先级就近原则，同样情况下样式定义最近者为准

载入样式以最后载入的定位为准

优先级为：！important > style对象 > id > class > 标签选择，important比内联优先级高

行内样式>外部<link><style>标签定义

---------------------------------------------------------------------------------

JS部分

-----------------------------------------------------------------------

3.ajax执行顺序 js异步4.模块化 AMD CMD requirejs5.观察者模式
表格li之间的两个空格原型链上传大文件垃圾回收内存机制页面闪烁页面加载渲染的过程boostrap栏栅jquery源码10W行代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航