前端面试问题css汇总

1,行内元素有哪些?块级元素有哪些?空元素有哪些?CSS的盒模型?  

  块级元素:div p h1 h2 h3 h4 form ul li
  行内元素: a b br i span input select

  空元素:即没有内容的HTML元素,例如:br、meta、hr、link、input、img
  css盒模型:content,padding,border ,margin(盒模型顺序)

  行内元素的margin padding是无效的,需要display:inline

  用display:inline-block 强制将块级元素转为行内元素。注意有3px间距。letter-spacing可以消除这个间距

2,描述css reset的作用和用途。

  reset重置浏览器的css默认属性 浏览器的品种不同,样式不同,然后重置,让他们统一。

3,如何减轻服务器对图片请求的压力

  使用雪碧图,减少服务器请求图片的数量

4,CSS实现垂直水平居中

  HTML结构:

    <div class="wrapper">
        <div class="content"></div>
    </div>    

  CSS:

    .wrapper {
      position: relative;
      width: 500px;
      height: 500px;
      background-color: #ddd;
     }
    .content{
        background-color:#6699FF;
        width:200px;
        height:200px;
        position: absolute;        //父元素需要相对定位
        top: 50%;
        left: 50%;
        margin-top:-100px ;   //二分之一的height,width
        margin-left: -100px;
    } 

5,简述一下src与href的区别

href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

6、什么是css hack ?css hack解决的问题?

  CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的

  CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题(参考文档:http://www.kwstu.com/Admin/ViewArticle/201409011604277330)

  不同浏览器的内核:IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto,Firefox:gecko内核;

7、px和em的区别

  px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
  浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

8,有哪些方式可以对一个DOM设置它的CSS样式? 

  外部样式表,引入一个外部css文件

  内部样式表,将css代码放在标签内部

  内联样式,将css样式直接定义在 HTML 元素内部

9、CSS都有哪些选择器? 派生选择器(用HTML标签申明)

  id选择器(用DOM的ID申明)

  类选择器(用一个样式类名申明)

  属性选择器(用DOM的属性申明,属于CSS2,IE6不支持,不常用,不知道就算了)

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

  后代选择器(利用空格间隔,比如div .a{  })

  群组选择器(利用逗号间隔,比如p,div,#a{  })

  选择器越特殊,选择指向越准确,优先级越高。

  css 奇数、偶数选择器。奇数:p:nth-child(odd);偶数:p:nth-child(even)

10,rgba()和opacity的透明效果有什么不同?

  rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,

  而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)

11,Sass、LESS是什么?大家为什么要使用他们?

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

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

  为什么要使用它们?

  结构清晰,便于扩展。

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

  可以轻松实现多重继承。

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

12、什么是外边距重叠?重叠的结果是什么?

  答案:

  外边距重叠就是margin-collapse。

  在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。

  折叠结果遵循下列计算规则:

  1.       两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。

  2.       两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。

  3.       两个外边距一正一负时,折叠结果是两者的相加的和。

时间: 2024-10-13 22:47:18

前端面试问题css汇总的相关文章

前端面试之CSS

[email protected] Contents 1.?CSS 中类 (classes) 和 ID 的区别. 2.?请问 "resetting" 和 "normalizing" CSS 之间的区别?你会如何选择,为什么? 3.?请解释浮动 (Floats) 及其工作原理. 4.?描述z-index和叠加上下文是如何形成的. 5.?请描述 BFC(Block Formatting Context) 及其如何工作. 6.?列举不同的清除浮动的技巧,并指出它们各自适用

前端面试:css预处理

css预处理定义: 定义了一种新的语言,其基本思想是用一种专门编程语言,为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 几种预处理语言 sass less stylus turbine swithch css css cacheer dt css

前端面试集锦——CSS篇

三.CSS篇 3.1.谈谈你对CSS布局的理解 3.2.请列举几种可以清除浮动的方法(至少两种) 浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动.正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷). a. 添加额外标签,例如<div ></div> b. 使用br标签和其自身的html属性,例如<br clear="all" /> c. 父元素设置 overflow:hidden:在IE6中还需要触发hasLayou

前端面试的面试经验

?? 文章列表 前端面试总结--基础javascript篇 前端面试总结--进阶javascript篇 前端面试总结--http.html和浏览器篇 前端面试总结--css篇 一.基础javascript篇 1. get请求传参长度的误区 误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的. 实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少.对get请求参数的限制是来源与浏览器或web服务器,浏览器或web服务器限制了url的长度.为了明确这个概

Web前端知识技能大汇总

Web前端知识技能大汇总 来源:github 发布时间:2015-07-08 阅读次数:3432 28 项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目.我们可以通过协作的方式来共同维护这个项目.Git的历史记录也可以见证前端行业的一些变迁. 可视化效果 前端开发知识结构 前端工程师 浏览器 IE6/7/8/9/10/11 (Trident) Firefo

前端工程师必备技能汇总

首先,看一张前端知识结构图:  (原文: ithomer) 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目.我们可以通过协作的方式来共同维护这个项目.Git的历史记录也可以见证前端行业的一些变迁. 尽管会变成文字的方式来维护这些内容,但是我承诺写一个小工具帮大家生成更好玩的图形(基于DataV项目). 前端开发知识结构 前端工程师 浏览器 IE6/7/8/9/10/11 (Trident) Firefox (

前端html与css学习笔记总结篇(超详细)

第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的html5抢占移动端的市场 自己创业做老板 随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标: 第一.梳理知识架构 负责内容的HTML 负责外观的css(层叠样式表) 负责行为的js ps切图 第二.分解目标(起步阶段.提升阶段.成型阶段) 起步阶段: 基本知识的掌握 常用工具的掌

2020年前端面试复习必读文章【超百篇文章/赠复习导图】

前言 之前写过一篇 一年半经验如何准备阿里巴巴前端面试,给大家分享了一个面试复习导图,有很多朋友说希望能够针对每个 case 提供一个参考答案. 写答案就算了,一是「精力有限」,二是我觉得大家还是需要自己「理解总结会比较好」. 给大家整理了一下每个 case 一些还算不错的文章吧(还包括一些躺在我收藏夹里的好文章),大家可以自己看文章总结一下答案,这样也会理解更深刻. 「并不是所有文章都需要看」,希望是一个抛砖引玉的作用,大家也可以锻炼一下自己寻找有效资料的能力 ~ ( 文章排序不分前后,随机排

2016.10.19 小米前端面试 vs 2016.10.22 华为web面试

这次面试还是很值得记录一下的~长了很多姿势. 一共三面,面试官都是MIUI的浏览器部门,感觉面试官都很厉害,知识点问的很细很深入. 一面面试官是个可爱的小姑娘,主要考察的就是常见的前端面试题,很基础,但是会在其上进行拓展和深入.就我记得的一些题做个总结: 1. 说一下CSS的盒模型?(这简直是我参加过的几乎所有前端面试岗必问的一道题目--不管是比较水的国企还是问基础的互联网... 想一想似乎只有只问项目不谈基础的京东没有问吧) 这里是答案 2. 常用的跨域方法:(之前小米一个面试官电话面试时候也