资讯专栏INFORMATION COLUMN

html&css面试笔记

maochunguang / 2490人阅读

摘要:什么叫优雅降级和渐进增强渐进增强针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果交互等改进和追加功能达到更好的用户体验。优雅降级一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

1、CSS选择器有哪些?它们的优先级是怎样的?

选择器类型:

id选择器      ( # myid)
类选择器      (.myclassname)
标签选择器    (div, h1, p)
相邻选择器    (h1 + p)
子选择器      (ul > li)
后代选择器    (li a)
通配符选择器  ( * )
属性选择器    (a[rel = "external"])
伪类选择器    (a:hover, li:nth-child)

选择器优先级:就近原则,同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;

优先级为:!important > id > class > tag,同时important 比内联优先级高

权重的规则:标签的权重为1,class的权重为10,id的权重为100;如果权重相同,则最后定义的样式会起作用

2、列出px、em、rem三者的区别

px:像素,绝对单位,指定是多少就是多少,计算比较容易;

em:相对单位,相对于父元素的字体大小,如果当前对象没有设置字体尺寸,则相对于浏览器默认字号,em的值不固定,并且em会继承父级元素的字体大小;

rem:相对单位,相对于HTML根元素的字体大小;

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

3、写出一个两列等高,左列固定宽度为200px,右列自适应浏览器的布局

浮动

父元素flex布局,左侧子元素flex-basis:200px,右侧子元素flex:1;

4、你做的页面在哪些浏览器测试过?常见浏览器的内核分别是什么?

浏览器内核:IE-Trident,Firefox-Gecko,Opera-Blink,Chrome-Webkit,Safari-Webkit,360-兼容模式Trident+极速模式Webkit

5、不定宽高的img在固定宽高的容器内水平垂直居中,写出html和css
.box{ width:200px; height:200px; border:1px solid #06C; display:table-cell; text-align:center; vertical-align:middle; *font-family:simsun; *font-size:200px; } .box img{ vertical-align:middle; }
6、清除浮动的原理和实现方法

父元素没有给定高度的前提下,父元素内整体浮动的元素无法撑开父元素,需要清除浮动。

父级上增加属性overflow:hidden

.parent{
    overflow:hidden;
}

在最后一个子元素的后面加一个空的div,给它样式属性 clear:both(不推荐)

使用成熟的清浮动样式类,clearfix

.clearfix:after{
    content:"";
    display:table;
    clear:both;
}
7、rgba()和opacity的透明效果有什么不同

效果上的不同:opacity方案,子元素文字内容同时透明;rgba方案,子元素内容不透明

8、css实现,鼠标放在一个div上时该元素在2s内旋转180°
#lamp{
    width: 400px;
    height: 40px;
    background: #ff0000;
}
#lamp:hover{
    animation: rotate 2s;
    -webkit-animation: rotate 2s; /* Safari and Chrome */
}
@keyframes rotate
{
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}
9、什么是盒子模型?

在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。
这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

10、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

11、CSS实现垂直水平居中

实现方法有很多种,以下是其中一种实现:

//HTML结构:
//CSS: .wrapper { position: relative; width: 500px; height: 500px; border: 1px solid red; } .content{ position: absolute; width: 200px; height: 200px; /*top、bottom、left和right 均设置为0*/ top: 0; bottom: 0; left: 0; right: 0; /*margin设置为auto*/ margin:auto; border: 1px solid green; }
12、简述一下src与href的区别

href标识超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系

src表示引用资源,表示替换当前元素,用在img,script,iframe上,src是页面内容不可缺少的一部分。

补充:link和@import的区别

两者都是外部引用CSS的方式,但是存在一定的区别:

区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

13、什么叫优雅降级和渐进增强?

渐进增强 progressive enhancement:
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation:
一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

区别:

a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要

c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

14、html中title属性和alt属性的区别?


当图片不输出信息的时候,会显示alt信息,鼠标放上去没有信息,当图片正常读取,不会出现alt信息


当图片不输出信息的时候,会显示alt信息 鼠标放上去会出现title信息
当图片正常输出的时候,不会出现alt信息,鼠标放上去会出现title信息

title属性可以用在除了base,basefont,head,html,meta,param,scripttitle之外的所有标签

title属性的功能是提示。额外的说明信息和非本质的信息请使用title属性。title属性值可以比alt属性值设置的更长

title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。

15、标准盒子模型与IE怪异盒子模型

当不对doctype进行定义时,会触发怪异模式。

在标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式下,一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)
CSS3的box-sizing
当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;
当设置为box-sizing:border-box时,将采用怪异模式解析计算;

16、CSS3有哪些新增的属性?

分为边框、背景,渐变,阴影、2D转换 3D转换、过渡、动画、弹性盒子等。

比如:边框(border-radius、border-shadow、border-image)之类的 。

17、什么是CSS Hack?

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack

IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档)。例如:

// 1、条件Hack

// 2、属性Hack
.test{
    color:#0909; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
}
// 3、选择符Hack
* html .test{color:#090;}       /* For IE6 and earlier */
* + html .test{color:#ff0;}     /* For IE7 */
18、bootstrap响应式实现的原理

百分比布局+媒体查询

19. 请简要描述margin重合问题,及解决方式

同向margin的重叠:
在最外层的div中加入overflow:hidden;zoom:1
在最外层加入padding:1px;属性
在最外层加入:border:1px solid #cacbcc;

异向重叠问题:
float:left(只能解决IE6浏览器中的异向重叠问题,可以解决IE8以上、chorme、firefox、opera下的同向重叠问题)

20、position的值,relative、absolute、fixed分别相对于进行谁定位,有什么区别?

absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。

fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。

relative 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 left位置添加 20 像素。

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

inherit 规定应该从父元素继承 position 属性的值。

21、浏览器是如何渲染页面的?

渲染的流程如下:
1.解析HTML文件,创建DOM树。自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。
2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式3.将CSS与DOM合并,构建渲染树(Render Tree);
4.布局和绘制,重绘(repaint)和重排(reflow);

22、对标签有什么理解

标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。
可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
还有一个用途是可以添加服务器发送到浏览器的http头部内容

23、h5新特性

新的语义标签和属性

表单新特性

视频和音频

Canvas绘图

SVG绘图

地理定位

拖放API

25、display none visibility hidden区别?

display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;

使用visibility:hidden性能要好,display:none切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113621.html

相关文章

  • html&amp;css面试笔记

    摘要:什么叫优雅降级和渐进增强渐进增强针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果交互等改进和追加功能达到更好的用户体验。优雅降级一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 1、CSS选择器有哪些?它们的优先级是怎样的? 选择器类型: id选择器 ( # myid) 类选择器 (.myclassname) 标签选择器 ...

    zhangwang 评论0 收藏0
  • html&amp;css面试笔记

    摘要:什么叫优雅降级和渐进增强渐进增强针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果交互等改进和追加功能达到更好的用户体验。优雅降级一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 1、CSS选择器有哪些?它们的优先级是怎样的? 选择器类型: id选择器 ( # myid) 类选择器 (.myclassname) 标签选择器 ...

    shengguo 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&amp;前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0
  • js&amp;jq面试笔记(下)

    摘要:面试笔记,该部分为下部分。构造函数模式使用自定义的构造函数与普通函数一样,只是用它来创建对象,定义对象类型如的属性和方法。使用原型来添加属性共享一个原型对象的方法原型是指向原型对象的,这个原型对象与构造函数没有太大关系,唯一的关系 js&jq面试笔记,该部分为下部分。 字符串相关 1、定义一个方法,用于将string中的每个字符之间加一个空格,并输出 如:hello -> h e l ...

    xinhaip 评论0 收藏0
  • HTML&amp;CSS笔记001

    摘要:告诉搜索引擎爬虫,我们的网站是关于什么内容的服装好看的衣服我是你爸爸我是你爸爸段落标签标题标题标题标题标题标题标题标签独成一段,加粗字体哈哈我的家在东北lesson1      ①我是你爸爸 我是你爸爸  ②标题 标题 标题 标题 标题 标题 ③  哈哈  ④50$ ⑤我的家在东北 ⑥  a  b  c         lesson2    /*链接到4中的ul的导航栏应用*/  *{   ...

    iOS122 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<