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

原创 2018年04月17日 16:30:31

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

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

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

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

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行代码


前端开发面试总结HTML、CSS部分

要点:对Web标准的理解、浏览器差异、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发 技术等 1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式...
  • Jane617_min
  • Jane617_min
  • 2015-12-12 10:42:15
  • 1523

HTML+CSS面试题

1.对WEB标准以及W3C的理解与认识? (1)web标准规范要求,书写标签必须闭合、标签小写、不乱嵌套,可 提高搜索机器人对网页内容的搜索几率; (2)建议使用外链css和js脚本,从而达到结构与行...
  • qq_26536483
  • qq_26536483
  • 2017-08-28 10:55:29
  • 2529

web前端面试题及答案 css篇

1.CSS3有哪些新特性? CSS3实现圆角(border-radius), 阴影(box-shadow), 对文字加特效(text-shadow、), 线性渐变(gradient), 旋转...
  • qq_34753236
  • qq_34753236
  • 2016-04-29 11:46:02
  • 3069

前端面试总结

  • 2018年03月27日 13:58
  • 23KB
  • 下载

前端面试题答案的解答:html+css部分

知乎上一个前端面试题答案的解答: https://www.zhihu.com/question/19568008HTML+CSS
  • u013194113
  • u013194113
  • 2016-07-25 16:47:59
  • 1984

2-面试题-HTML5+CSS3(前端常见面试题带答案 )

HTML5+CSS3常见面试题目 1.    SGML(标准通用标记语言)和HTML(超文本标记语言),XML(可扩展标记语言)和HTML的之间有什么关系?                  ...
  • u013418331
  • u013418331
  • 2016-11-13 11:31:40
  • 8443

web前端面试题之 CSS浏览器兼容性?

CSS浏览器兼容性? 答题技巧:因为这个问题主要是看你经验,一般有了开发经验的都会遇到这样的坑,你只要说出几个来大致就可以了。 1.对齐文本和文本输入框 问题: 当input元素在...
  • Wz1135640
  • Wz1135640
  • 2017-10-10 14:53:28
  • 485

前端面试题之CSS盒模型

前端面试对于CSS这块不可或缺的一个考察点就是盒模型(BOX),通过对BOX的提问就可以了解你在CSS知识方面的掌握程度。本文主要介绍CSS中的盒模型在面试中可能会问到的相关问题和知识点,不足指出请指...
  • m0_37585915
  • m0_37585915
  • 2017-11-10 17:17:58
  • 686

阿里前端笔试题看 CSS布局与定位---实现2列自适应布局的几种方法

前端工程师三把斧,HTML,CSS,JavaScript 。其中css看似简单,其实真的要布局起来,仍然需要技巧。BAT中百度和阿里还是比较看重css布局能力,这次就以阿里巴巴2016年前端工程师笔试...
  • Cinderella_hou
  • Cinderella_hou
  • 2016-08-08 20:22:05
  • 1773

java面试⑤前端部分

2.4.1 简单说一下HTML,CSS,javaScript在网页开发中的定位? HTML:超文本标记语言,定义网页的结构 CSS:层叠样式表,用来美化页面 JavaScript:主要用来验证表单,做...
  • xiamiflying
  • xiamiflying
  • 2017-04-20 12:27:51
  • 2197
收藏助手
不良信息举报
您举报文章:关于前端第一次面试的总结与思考(CSS部分)
举报原因:
原因补充:

(最多只允许输入30个字)