html+css面试题

HTML

1.   <img>标签上title属性与alt属性的区别是什么?

title:当光标移动到图片上,显示title属性

alt:图片不显示,显示alt属性

2.   分别写出以下几个HTML标签:文字加粗、下标、居中、字体

文字加粗:b strong

下标:sub

居中:center

字体:font

3.   请说说你对标签语义化的理解?

让合适的标签作合适性,利于搜索引擎搜索

4.   Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

<!DOCTYPE> 标签位于文档的开头,用来说明当前文档的类型。

严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。(渐进增强

混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。(优雅降级)

5.你知道多少种Doctype文档类型?

过渡的(Transitional)、严格的(Strict)和框架的(Frameset)

6.   HTMLXHTML——二者有什么区别

a.XHTML元素必须被正确地嵌套。

b.XHTML元素必须被关闭。

c.标签名必须用小写字母。

d.XHTML文档必须拥有根元素。

7. iframe的优缺点?

优点:

a.解决加载缓慢的第三方内容如图标和广告等的加载问题

b.iframe无刷新文件上传

c.iframe跨域通信

缺点:

a.iframe会阻塞主页面的Onload事件

b.无法被一些搜索引擎索引到

c.页面会增加服务器的http请求

d.会产生很多页面,不容易管理。

8. 请阐述table的缺点

a.太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接

的损失就是大大增加了冗余代码量。

b.灵活性差,比如要将tr设置border等属性,是不行的,得通过td

c.代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱

d.混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺

序混乱。

e.不够语义

9. 简述一下srchref的区别

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

CSS

1.   谈谈你对CSS布局的理解

常见的布局方式:固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding。

2.   请列举几种可以清除浮动的方法(至少两种)

1、给父元素加overflow:hidden

2、给浮动元素加clear:left   clear:right   clear:both

3、父元素加clearfix::after{content:‘’;display:block;clear:both}

4、给父元素加

clearfix::after;clearfix::before{content:‘’;display:table;clear:both}

3.   请列举几种隐藏元素的方法

1、display:none; 2、opacity:0;3、visibility:hidden;

4. 如何让一段文本中的所有英文单词的首字母大写

       text-transform:capitalize; 首字母大写

5. 请简述CSS样式表继承

CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下:

文本相关:font-family,font-size,font-style,font-variant,font-weight,font,letter-spacing,line-height,color,text-…

列表相关:list-style-image,list-style-position,list-style-type,list-style

6. 请简述CSS的选择器

基本选择器:类名选择器、id选择器、标签选择器、多类名选择器、通配符选择器

复杂选择器:子代选择器、后代选择器、交集选择器、并集选择器

伪类选择器:a:link、a:hover、a:visite、a:active

7. CSS伪类与CSS伪对象的区别

根本区别在于:它们是否创造了新的元素(抽象)

伪类:一开始用来表示一些元素的动态状态,随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类

伪对象:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中

8. 请简述CSS的权重规则

       !Important>style>id选择器>类名选择器>标签选择器>通配符选择器

       元素本身的样式>继承的样式

  继承或者*的贡献值0,0,0,0

  每个标签的贡献值0,0,0,1

  每个类的贡献值0,0,1,0

每个id的贡献值0,1,0,0

每个行内样式的贡献值1,0,0,0

每个!important贡献值重要的无穷大

9. 请写出多种等高布局

       a.假等高列:使用背景图片,在列的父元素上使用这个背景图进行Y轴的铺放,

从而实现一种等高列的假像

b.给容器div使用单独的背景色(固定布局)(流体布局):用元素中的最大

高度撑大其他的容器高度

c.创建带边框的两列等高布局:用border-left来做,只能使用两列。

d.使用正padding和负margin对冲实现多列布局方法:在所有列中使用正的上、

下padding和负的上、下margin,并在所有列外面加上一个容器,设置

overflow:hiden把溢出背景切掉

e.使用边框和定位模拟列等高:但不能使用在多列

f.模仿表格布局等高列效果:兼容性不好,在ie6-7无法正常运行

10. CSS样式中常使用pxem,各有什么优劣,在表现上有什么区别?

px是相对长度单位,相对于显示器屏幕分辨率而言的。

em是相对长度单位,相对于当前对象内文本的字体尺寸。

Rem是相对长度单位,相对于根元素文本的字体尺寸

11. CSS link @import 的区别是什么?

a.link属于HTML标签,而@import是CSS提供的,且只能加载CSS

b.页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加

载完再加载

c.import只在IE5以上才能识别,而link是HTML标签,无兼容问题

d.link方式的样式的权重高于@import的权重

e.当使用Javascript控制DOM去改变样式的时候,只能使用link方式,因

为@import眼里只有CSS,不是DOM可以控制

12. positionabsolutefixed共同点与不同点

      absolute和fixed脱离标准流,不占位置

       absolute: 父元素没有定位,元素相对于视口定位;父元素定位,元素相对于父元素定位。

       fixed:相对于浏览器窗口定位

13. position的值, relativeabsolute分别是相对于谁进行定位的?

relative:相对于元素本身定位

absolute:父元素没有定位,元素相对于视口定位;父元素定位,元素相对于父元素定位。

14. CSS3有哪些新特性?

CSS3实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow),线性渐变(gradient),变形(transform)

增加了更多的CSS选择器多背景rgba,在CSS3中唯一引入的伪元素是::selection,媒体查询,多栏布局

15. 为什么要初始化CSS样式?

浏览器存在兼容问题

16. 解释下 CSS sprites原理,优缺点

       将背景图片放到一张图上,利用background-image、background-repeat,,background-position等样式对所需图片进行定位

17. 解释下浮动和它的工作原理?

       浮动的元素会脱离标准流,移动到设置好的位置上

浮动元素碰到包含它的边框或者浮动元素的边框停留。

18. 浮动元素引起的问题

a.父元素的高度无法被撑开,影响与父元素同级的元素

b.与浮动元素同级的非浮动元素会跟随其后

c.若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显

示的结构

19. 什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?(未学)

       如果使用import方法对CSS进行导入,会导致某些页面在Windows下的IE出现一些奇怪的现象:

  以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(FlashofUnstyledContent),简称为FOUC。

  原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。

  解决方法:使用LINK标签将样式表放在文档HEAD中。

20 :link:visited:hover:active的执行顺序是怎么样的?

       :link:未访问链接

  :visited:已访问的链接

       :hover:鼠标移动到链接上

       :active:鼠标选定链接

21 经常遇到的浏览器兼容性有哪些?如何解决?

a.浏览器默认的margin和padding不同

b.IE6双边距bug

c.在ie6,ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给

元素设置默认的行高的高度导致的

d.min-height在IE6下不起作用

e.透明性IE用filter:Alpha(Opacity=60),而其他主流浏览器用opacity:0.6

f.input边框问题,去掉input边框一般用border:none;就可以,但由于IE6在解

析input样式时的BUG(优先级问题),在IE6下无效

22 有哪项方式可以对一个DOM设置它的CSS样式?

1、        行内样式

2、        内联样式

3、        外联样式

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

       外边距重叠有两种情况:1、两个相邻块元素,一个设置下外边距,一个设置上外边距,外边距发生重叠,它的值为两者的最大值;2、当父块状元素没有边框和上内边距时,父块状元素与子块状元素的上外边距发生合并,值为两者上外边距的最大值

24 rgba()opacity的透明效果有什么不同?

       opacity作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素

的颜色或其背景色。

posted @ 2020-08-14 21:13  靡荼  阅读(170)  评论(0编辑  收藏  举报