wdely1的博客

记录每天进步的一点点

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

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

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

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

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

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 requirejs
5.观察者模式

表格li之间的两个空格
原型链
上传大文件 垃圾回收内存机制
页面闪烁
页面加载渲染的过程
boostrap栏栅
jquery源码
10W行代码


阅读更多
下一篇前端第一次面试的总结(JS部分)
想对作者说点什么? 我来说一句

前端面试总结-CSS

css

mengStudents mengStudents

2017-10-11 22:11:26

阅读数:543

前端面试总结

2018年03月27日 23KB 下载

没有更多推荐了,返回首页

关闭
关闭