html清除标签定位后对页面,HTML,CSS面试题

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

浏览器

chrome

IE

Opera

Safari

FireFox

内核

Blink

Trident

Gecko

Webkit

Presto

2 清除浮动有哪些方式?

给父元素添加高度

给父元素添加浮动,不过父元素需要宽度

结尾添加空标签 clear:both

结尾处添加br标签设置clear:both

给父元素定义伪类:after和zoom

给父元素定义overflow:hidden

给父元素定义overflow:auto

给父元素定义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

比权重,谁的权重大,谁的优先级高

权重相同,遵循就近原则

继承的优先级最小

样式上有!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 常见的兼容性问题

在IE8及以下,如果a标签里面包含一个图片,图片外面会出现一层蓝圈

解决方法:设置border:none

如果一个标签加了float标签,又加了margin标签,在IE6的页面中,会出现双边距问题

解决方法:是指display:inline

图片与图片之间的间距问题

解决办法:使用float为img布局

不同浏览器的内补丁(padding)和外补丁(margin)不同

解决办法:使用*{padding:0,margin:0}

当标签的高度设置小于10px,在IE6,IE7中会超过自己设置的高度

解决办法:设置line-height小于设置的高度,或者overflow:hidden

26 伪元素选择器有哪些?

::selection 设置元素被选中的部分样式高亮显示

::first-letter 设置元素第一个字符的添加特殊样式

::first-line 设置元素第一行文本的样式

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值