CSS经典面试题

   列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。

  • 对父级设置适合CSS高度 
  • clear:both清除浮动，但是需要新增一个空的div 
  • 父级div定义 overflow:hidden 
  • 父级div也一起浮动 
  • 父级div定义 display:table

 

CSS样式分为哪三种？

  •    外部样式表。引入一个外部CSS文件
  •    内部样式表。将CSS代码放在<head>标签内部
  •    内联样式。将CSS样式直接定义在HTML元素内部

CSS都有哪些选择器？

  • 派生选择器（用HTML标签申明）

  • id选择器（用DOM的ID申明）

  • 类选择器（用一个样式类名申明）

  • 属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）

  • 除了前3种基本选择器，还有一些扩展选择器，包括

  • 后代选择器（利用空格间隔，比如div .a{  }）

  • 群组选择器（利用逗号间隔，比如p,div,#a{  }）

 

 如何理解CSS样式表的层叠性？

  • 继承性是指，许多CSS的样式规则不但影响选择器所定义的元素，而且会被这些元素的后代继承。
  • 层叠性是指，当一个web页面使用多个样式表，多个样式表中的样式可层叠为一个。在多个样式表之间所定义的样式没有冲突的时候，浏览器会显示所有的样式。
  • 优先级是指，当发生样式定义冲突时，浏览器首先会按照不同样式规则的优先级来应用样式。CSS样式的优先级如下所示（其中数字3拥有最高的优先权）：
    1.浏览器缺省设置；
    2.外部样式表（.css文件）或者内部样式表（位于<head>元素内部）；
    3.内联样式（作为某个元素的style属性的值）。
    同等优先级下，以最后定义的样式为准，important比内联高。

       层叠性指的是样式的优先级，当产生冲突时以优先级高的为准。

  1. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）

  2.  id选择符>（伪）类选择符>元素选择符

  3.  权重相同时取后面定义的样式

 详细请转  http://www.cnblogs.com/hellowzl/p/5841587.html

 

哪些属性可以继承？

文本相关属性：font-family、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height、text-align、 text-indent、 text-transform 、word-spacing 、color；

列表相关属性：list-style-image、list-style-position、list-style-type、list-style；

表格相关属性：border-collapse、border-spacing、caption-side、table-layoute；

其他属性：Cursor、visibility；

 

 简要描述CSS中的定位机制？

  • 浮动定位是将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。
  • 相对定位将元素相对于它在普通流中的位置进行定位。
  • 绝对定位是指将元素的内容从普通流中完全移除，并且可以使用偏移属性来固定该元素的位置。
  • 固定定位是指将元素的内容固定在页面的某个位置。

title和alt的区别？

  • alt是图片不能正常加载时候显示的提示语。
  • title是鼠标划上去显示的内容。

 

input的placeholder属性怎么改变颜色？

input::-webkit-input-placeholder

页面导入样式时，使用link和@import的区别？

  •  link：属于XHTML标签，页面被加载时，link会同时被加载；JavaScript控制DOM去改变样式；
  • @import：只能加载CSS，页面全部被下载完再被加载。不是DOM可以控制的

 

px和em的区别？

    px和em都是长度单位，

   区别是:px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小。

    浏览器的默认字体高度都是16px。所以未经调整的浏览器都符合：1em=16px。那么12px=0.75em, 10px = 0.625em。

 

css两种盒子模型？

  • 标准盒子模型：content 不包含padding和border
  • IE盒子模型：content 包含padding和border
例如：

    一个盒子的margin为20px，border为1px，padding为10px，content的宽为200px、高为50px，加入用标准盒子模型解释，那么这个盒子需要占据的位置为：

    宽：20*2 + 1 * 2 + 10* 2 + 200 = 262px, 高：20 * 2 + 1 * 2 + 10 * 2 + 50 = 112px。

    盒子的实际大小为：宽1*2 + 10 * 2 + 200 = 222px,高1* 2 + 10 * 2 + 50 = 72px。

    假如用IE盒子模型，那么盒子需要占据的位置为：

    宽：20 * 2 + 200 = 240px,高：20 * 2 + 50 = 70px。

    盒子的实际大小：宽200px,高50px。

    一般推荐使用W3C盒子模型，怎样才算是选择了标准W3C盒子模型呢？就是在网页上加DOCKTYPE申明。如果不加，那么各个浏览器会根据自己的行为去理解网页。

 

 

css优先级？哪个优先级最高？

优先级为: !important >  id > class > tag  ； 

 important优先级最高

CSS实现垂直水平居中有哪几种方法？

 

 rgba()和opacity的透明效果有什么区别？

  • rgba()和opacity都能实现透明效果；
  • opacity：作用于元素，以及元素内的所有内容的透明度；
  • rgba()只作用于元素的颜色或起背景色。设置rgba透明的元素的子元素不会继承透明效果。

 

display:none和visiblity:hidden的区别是什么？

  •     display:隐藏对应元素但不挤占该元素原来的空间。
  •     visiblity: 隐藏对应的元素并且挤占该元素原来的空间。

 

CSS Sprite是什么，谈谈这个技术的优缺点？

CSS Sprite是一种网页图片应用处理方式，把网页中一些背景图片整合到一张图片文件中，再利用CSS的”background-image”，”background-repeat”，”background-position”的组合进行背景定位。

其优点在于：

①减少网页的http请求，提高性能，这也是CSS Sprite最大的优点，也是其被广泛传播和应用的主要原因；

②减少图片的字节，多张图片合并成1张图片的字节小于多张图片的字节总和；

③较少了命名困扰，只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

④更换风格方便。只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便；

CSS Sprite缺点：

①图片合成比较麻烦；

②背景设置时，需要得到每一个背景单元的精确位置；

③维护合成图片时，最好只是向下加图片，而不是更改已有图片。

 

知道css content属性有什么用？有什么应用？

 CSS的content属性专门应用在before/after伪元素上，用来插入生成内容。

 最常见的应用是利用伪类清除浮动：

 

对CSS3有了解吗？列举几个CSS3的新特性并简要描述

CSS3作为CSS技术的升级版本，着力于模块化发展，将规范分解为一些小的模块，如选择器、盒子模型、列表模块、背景和边框等；

并加入很多新的模块和属性，比如赋值选择器、文字阴影、边框圆角、边框阴影、渐变、过渡、多栏布局、2D/3D转换、动画等。

CSS3提供了一些复杂选择器，用于实现页面复杂情况下的元素选择，如属性选择器，一些伪类和伪元素选择器；

渐变用于为元素设置渐变效果的背景；

转换可以实现元素的变换，比如位移、缩放、旋转等；

过渡可以实现简单的动画效果；动画属性则可以实现复杂的动画，可以实现逐帧制作动画。

 

过渡与动画的区别是什么？

过渡属性transition可以在一定的事件内实现元素的状态过渡为最终状态，用于模拟一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果；

动画属性animation可以制作类似Flash动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。

 

简述一下src与href的区别？

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；

在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

<script src =”js.js”></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

<link href=”common.css” rel=”stylesheet”/>

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css

 

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

  • 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

  • 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

  • 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

  • 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

  • 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

 

在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

答案：dns缓存，cdn缓存，浏览器缓存，服务器缓存。

 

Sass、LESS是什么？大家为什么要使用他们？

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

为什么要使用它们？

  • 结构清晰，便于扩展。

  • 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

  • 可以轻松实现多重继承。

  • 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

 

在书写高效 CSS 时会有哪些问题需要考虑？

（1）避免使用全局样式 
既然是全局的定义，那么他会吧所有标签都处理一遍，增加了浏览器解析的时间。有些标签其实没有必要处理。 
允许一个元素去继承它的祖先，或者使用一个class去应用复杂的元素。 
（2）将规则写的越精确越好 
偏向使用class ，id，少使用tag 
另外定义class时使用一些有代表意义的单词，比如在模块化开发的过程中，一般用mod-xxx，很利于维护，代码也很漂亮， 
（3）移除一些无用的限定 
下面的这些限定是多余的 
1.id选择器被class 或者tag选择器限定，也就是不要在id前面添加任何限定符，包括class tag 或者其他的选择符。 
2.class被tag选择器进行限定（如果一个class只被用于一个tag，这也是很好的实践） 
（4）避免使用后代选择器，特别是包含了一些无用的祖先元素 
eg：body ul li a{…} 制定了一个无用的body限定，因为所有的元素都是在body中。 
（5）使用class选择器取代后代选择器，CSS 的层级选择器不要超过3个 
eg：如果你需要两个不同的样式（一个无序列表，一个有序列表） 
不要使用下面的样式 
ul li {color:blue} ol li {color:red} 
应该这样的使用 .unordered-list-item {color: blue;} .ordered-list-item {color: red;} 
如果你一定要用后代选择器，建议你使用子选择器 
（6）display与visibility的差异 
他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。所以不赞成用visibility:hidden; 
（7）border:none;与border:0;的区别 
有些同学肯定没注意过这两个代码的区别，在HTML显示肯定是一样的，但是从基本上来说他们不一样 用border:0虽然现实上和none没什么区别，但是它会保留color、style 这两个属性。所以不赞成用border:0; 
（8）不宜过小的背景图片平铺 
（9）代码缩写

使用 CSS 预处理器的优缺点有哪些？

缺点：简单来说CSS预处理器语言较CSS玩法变得更高级了，但同时降低了自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。另外，预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。 
优点：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

 

 

谈谈以前端角度出发做好SEO需要考虑什么？

  • 了解搜索引擎如何抓取网页和如何索引网页

你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

  • Meta标签优化

主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

  • 如何选取关键词并在网页中放置关键词

搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

  • 了解主要的搜索引擎

虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。

  • 主要的互联网目录

Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。

  • 按点击付费的搜索引擎

搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。

  • 搜索引擎登录

网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。

  • 链接交换和链接广泛度（Link Popularity）

网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。

  • 合理的标签使用

posted @ 2018-03-06 20:09  此夏_唯美  阅读(798)  评论(0)  编辑  收藏  举报