html和css面试题目-史上最全的web前端面试题汇总及答案Html&Css(二)

作者html和css面试题目:樱桃小丸子儿

html和css面试题目-史上最全的web前端面试题汇总及答案Html&Css(二)

链接::///p/abadcc84e2a4

html和css面试题目-史上最全的web前端面试题汇总及答案Html&Css(二)

HTML&CSS

html和css面试题目-史上最全的web前端面试题汇总及答案Html&Css(二)

img的alt和title的异同?

html和css面试题目-史上最全的web前端面试题汇总及答案Html&Css(二)

**alt **是图片加载失败时,显示在网页上的替代文字;

**title **是鼠标放上面时显示的文字,title是对图片的描述与进一步说明;

这些都是表面上的区别,alt是img必要的属性,而title不是。

对于网站seo优化来说,title与alt还有最重要的一点:

搜索引擎对图片意思的判断,主要靠alt属性。所以在图片alt属性中以简要文字说明,同时包含关键词,也是页面优化的一部分。条件允许的话,可以在title属性里,进一步对图片说明。

简述一下src与href的区别

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

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

html5新元素?

HTML5 中一些有趣的新特性:

①用于绘画的 canvas 元素;

②用于媒介回放的 video 和 audio 元素;

③对本地离线存储的更好的支持;

④新的特殊内容元素,比如 article、footer、header、nav、section;

⑤新的表单控件,比如 calendar、date、time、email、url、search\”

以上是w3c上的原话,简单说就是更符合标准,提供更多功能支持;更加规范,可读性更强,性能有提升,实现功能更加简单方便,就像手机一样,高版本的功能多一些。

更详细请看html5新元素

CSS层叠是什么?介绍一下

CSS就是层叠式样式表(Cascading Style Sheets)的简称,CSS中层叠的意思就是在HTML文档树结构中的子标记能够继承所有父标记定义的样式,还可以多次定义自己的样式,全部样式按照从外到内、由先到后的顺序叠加起来,如果不发生冲突,则全部样式都有效,重复定义冲突时按照内层优先、后定义优先的原则进行覆盖,即内层子元素覆盖父元素样式、后定义的覆盖先定义的样式。

CSS实现垂直和水平居中

这是一道经典的问题,实现方法也有很多种,以下是其中一种实现:

具体方案说明:

①使用绝对定位left:50%与margin-left取宽度值一半的复数形式设置水平居中。

②使用绝对定位top:50%与margin-top取高度值一半的复数形式设置垂直居中

HTML结构:

<div class=\”box1\”> <div class=\”content\”></div> </div> CSS代码:

.box1 { position: relative; width: 600px; height: 600px; background-color: red; } .content{ background-color:pink; width:200px; height:200px; position: absolute; //父元素相对定位,使子元素相对父元素定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height,width margin-left: -100px; } 什么是CSS Hack?

针对不同的浏览器写不同的CSS,就是 CSS Hack。

详情请看以下链接

CSS hack大全&详解(什么是CSS hack)

你知道哪些CSS浏览器兼容性问题。

CSS 多浏览器兼容性问题及解决方案

px和em的区别

px和em都是长度单位,区别是,px的值是固定的,是绝对单位,类似的还有pt(磅,1pt=1/72英寸)、pc(皮卡,1pc=12pt)、mm(毫米)、cm(厘米)、in(英寸)绝对单位指定是多少就是多少,计算比较容易。

em的值不是固定的,它是相对单位,em是指当前默认字号大小(继承父元素默认字号)的倍数,可根据父元素字号的改变而自动调整。例如2em是当前字号的2倍,若父元素或默认字号为12pt,则2em就是24pt。类似的还有ex,ex是当前字号高度值(通常是字体尺寸一半)的倍数。

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

HTML5离线存储

localStorage 长期存储数据,浏览器关闭后数据不丢失;

sessionStorage 数据在浏览器关闭后自动删除。

说说你对语义化的理解

①去掉或者丢失样式的时候能够让页面呈现出清晰的结构;

②有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

③方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

④便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

描述一段语义的HTML代码

(HTML5中新增加的很多标签(如:<article>、<nav>、<header>和<footer>等)就是基于语义化设计原则)

< div id=\”header\”> < h1>标题< /h1> < h2>专注Web前端技术< /h2> < /div>如何居中div?

给div设置一个宽度,然后添加margin:0 auto属性

div{width:200px; margin:0 auto; }

列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?

block 像块类型元素一样显示。

none 缺省值。像行内元素类型一样显示。

inline-block 像行内元素一样显示,但其内容像块类型元素一样显示。

**list-item **像块类型元素一样显示,并添加样式列表标记。

absolute

absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位,若父元素都没有定位则相对于html的根元素(浏览器窗口)定位。

fixed

fixed (老IE不支持)生成绝对定位的元素,相对于浏览器窗口进行定位。

relative

relative生成相对定位的元素,相对于其原来所在的文档流中的位置进行定位。

static

static 默认值。没有定位,元素出现在正常的流中 (忽略 top, bottom, left, right z-index 声明)

对BFC规范的理解

BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。

(W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。)

描述CSS Reset的作用和用途。

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

最简化的CSS Reset

*{outline:0;padding:0;margin:0;border:0;}CSS定义的权重

CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式;ID>class>元素。

理解选择器的特殊性很重要,特别是在修复bug的时候,但是要尽量避免使用。

CSS选择器的权重与优先规则

CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?

在CSS中关于定位的内容是:position:relative | absolute | static | fixed

• static 自动定位,自动定位就是元素在页面普通文档流中由HTML自动定位,普通文档里中的元素也称为流动元素。不能通过z-index进行层次分级。

• relative 相对定位,相对定位不脱离文档流,参考其在原来文档流中的位置,通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。

• absolute 绝对定位,绝对定位脱离文档流,依据最近的已经定位(绝对、相对或固定定位)的父元素,通过 top,bottom,left,right 定位。当父级 position 为 static 时,absolute元素将依据body根元素(浏览器窗口)进行定位,可以通过z-index进行层次分级。

• fixed 固定定位,固定定位与父元素无关(无论父元素是否定位),直接根据浏览器窗口定位,且不随滚动条拖动页面而滚动,可通过z-index进行层次分级。

CSS中margin和padding的区别

margin是外边距,属于元素之外,相邻元素的margin可以融合。

padding是内边距,在元素之内,相邻元素的padding不可融合。

本文来自网络,不代表唯米智能立场,转载请注明出处。如有侵权请联系删除。http://www.weiseo.cc/b/3585.html

作者: 小易

上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 2013723@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部
在线客服系统