HTML,CSS面试题

·  阅读 466

1 常用那几种浏览器测试?有哪些内核(Layout Engine)?

  • 浏览器
    • chrome
    • IE
    • Opera
    • Safari
    • FireFox
  • 内核
    • Blink
    • Trident
    • Gecko
    • Webkit
    • Presto

2 清除浮动有哪些方式?

  1. 给父元素添加高度
  2. 给父元素添加浮动,不过父元素需要宽度
  3. 结尾添加空标签 clear:both
  4. 结尾处添加br标签设置clear:both
  5. 给父元素定义伪类:after和zoom
  6. 给父元素定义overflow:hidden
  7. 给父元素定义overflow:auto
  8. 给父元素定义display:table

3 html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?

  • 绘画canvas
  • 用于媒介回放的audio和video
  • 语义化更好的内容元素 header footer nav aside section
  • 本地离线存储的locatStorage,只要不手动删除,即使浏览器关闭也不会删除数据
  • sessionStorage的数据在浏览器关闭后会自动删除
  • 表单控件 data time email urll search

IE8/IE7/IE6支持使用document.createElement()产生的标签

4 简述一下你对HTML语义化的理解?

HTML语义化是使用正确的标签做正确的事情

它的好处有:

  • 利于SEO搜索 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重
  • 开发人员看源代码的时候更加方便的理解内容结构,方便后期维护,
  • 在没有css样式的情况下,也以中文档格式显示,并且容易阅读
  • 内容结构清晰,便于对浏览器,搜索引擎解析

5 什么叫优雅降级和渐进增强?**

优雅降级:一开始就构建完整的功能,然后在针对低版本浏览器进行兼容 渐进增强:一开始构建所有浏览器支持的基本功能,逐步的添加那些只有新式浏览器才支持的功能,当浏览器支持时,他们会自动的呈现出来并发挥作用

6 display:none和visibility:hidden的区别?

display:none 隐藏对应元素 脱离文档流 当标签进行隐藏时,在文档布局中不再给它分配口空间,各边的标签会合拢,就当他不存在 visbility:hidden 隐藏对应元素 当标签隐藏时,在文档布局中仍保留原来的空间

7 CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS3新增伪类有那些?

  • id选择符
  • 类选择符
  • 标签选择符
  • 相邻选择符
  • 属性选择符
  • 后代选择符
  • 子代选择符
  • 通配符选择符
  • 伪类选择器

8 CSS3有哪些新特性?

  • border-radius(圆角)
  • box-shadow(阴影)
  • text-shadow(文本特效)
  • gradient (渐变)

9 谈谈你对重构的理解

在不改变外部行为的前提下,简化结构,添加可读性,而在网站前端保持一致的行为。也就是说是在不改变UI的情况下,对网站进行优化 在扩展的同时保持一致的UI

10 对web标准以及w3c的理解和认识

标签闭合,标签小写,不乱嵌套,提高搜索机器人搜索几率。使用外链css和js脚本,结构行为表现分类,内容能被更多广泛的设备所访问,更少的代码和组件,容易维护,改版方便,不需要变动页面内容

11 Html和xhtml有什么区别?

XHMLT元素必须正确被嵌套,元素必须关闭,标签必须小写,必须有根元素

12介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

盒子模型是由内容 padding border margin

他们的不同之处在于内容宽的不同

标准的CSS盒子模型:内容宽+padding左右+border左右+margin左右

低版本的盒子模型:内容宽(padding左右+border左右)+margin左右

13 媒体查询怎么使用?

媒体查询可以为不同尺寸不同大小的媒体定义不同的css样式,适合相应的设备显示,也就是响应式布局

@media screen and(min-width:400px)and(max-width:700px){...}
复制代码

14 margin和padding分别适合什么场景使用?

margin 在边框的外面需要空白的时候 空白处不需要背景的时候(背景色,背景图片) 两个纵向的盒子中间需要间距是选择最大的那一个,使用Margin padding 在边框里面需要空白的时候 空白处需要背景的时候(背景色,背景图片) 两个纵向的盒子中间间距是两个盒子的padding值的时候

15 如何修改chrome记住密码后自动填充表单的黄色背景**

设置chrome关闭自动填充表单功能,设置表单属性autocomplete="off/on",关闭自动填充表单,自己实现记住密码

16 请写出html5新增的标签,并说明其语义和应用场景

  • header 标签设置页面或章节的头部
  • footer 标签设置页面或章节的尾部
  • aside 标签设置和页面内容关联不大的内容
  • nav 标签设置用于链接导航的部分
  • section 定义文档中的一个节

17 描述一下 cookies、sessionStorage 和 localStorage的区别

cookie是由同源HTTP请求携带,在服务端和浏览器之间传递 sessionStorage和localStorage是不会把数据传递到服务端的,只保存在本地 存储大小 cookie的存储大小只有4k,多出来的会被截掉 sessionStorage和localStorage的存储大小也有限制,但是比cookies多,有5M

生命期 cookies在过期时间之前,数据都会保存,即使关闭窗口和浏览器 sessionStorage的数据,只要一关闭浏览器就会自动删除数据 localStorage的数据存储时间长,除非手动删除,即使关闭浏览器也不会删除

18 如何实现浏览器内多个标签页之间的通信?

在seesionStorage或者localStorage中存储数据

19 title与h1的区别、b与strong的区别、i与em的区别?

title标签没有任何语义,只代表是个标题,不会出现在页面上 h1是一个层次明确的标签,也是标题使用 b标签文本加粗 strong标签不止文本加粗,还带有语义化 i标签文本倾斜 em标签不止文本倾斜,还带有语义化

20 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

css盒子模型是由content padding border margin组成 他们的区别在于内容宽 标准的CSS盒子模型宽:内容宽+左右padding+左右border+左右margin 低版本的盒子模型:内容宽(左右Padding+左右border)+左右margin

21 CSS优先级算法如何计算?

  • 标签选择器 1
  • 类选择器 10
  • id选择器 100
  • 元素标签 1000
  1. 比权重,谁的权重大,谁的优先级高
  2. 权重相同,遵循就近原则
  3. 继承的优先级最小
  4. 样式上有!important优先级最高

22 CSS3新增伪类有那些?

  • p:first-of-type 选择属于其父元素的首个元素
  • p:last-of-type 选择属于其父元素的最后一个元素
  • p:only-of-type 选择属于其父元素唯一的一个元素
  • p:only-child 选择属于其父元素唯一的一个子元素
  • p:nth-chlid(2)选择属于其父元素的第二个子元素
  • :enabled :disabled 表单控件的禁用状态
  • :checked 单选框或复选框被选中

23 position的值?

  • static 默认 不脱离文档流,按照正常文档流排序
  • absolute 绝对定位 参照离它最近的不是static的值的父元素的left right top bottom的位置进行定位
  • relative 相对定位,不脱离文档流,参照静态自身的left top right bottom进行定位
  • fixed 固定定位 参照可视窗口的位置对自己进行定位

24 css3中制作动画有几个属性?

  • animation 动画
  • transtion 过渡
  • transform 变形

25 常见的兼容性问题

  1. 在IE8及以下,如果a标签里面包含一个图片,图片外面会出现一层蓝圈 解决方法:设置border:none
  2. 如果一个标签加了float标签,又加了margin标签,在IE6的页面中,会出现双边距问题 解决方法:是指display:inline
  3. 图片与图片之间的间距问题 解决办法:使用float为img布局
  4. 不同浏览器的内补丁(padding)和外补丁(margin)不同 解决办法:使用*{padding:0,margin:0}
  5. 当标签的高度设置小于10px,在IE6,IE7中会超过自己设置的高度 解决办法:设置line-height小于设置的高度,或者overflow:hidden

26 伪元素选择器有哪些?

  • ::selection 设置元素被选中的部分样式高亮显示
  • ::first-letter 设置元素第一个字符的添加特殊样式
  • ::first-line 设置元素第一行文本的样式

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改