懒咪学编程


html&css面试笔记

时间:2020-08-19 21:01:51  来源:  作者:牧心  所属栏目:HTML5

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


选择器类型:
id选择器 ( https://segmentfault.com/a/1190000015860892# myid)
类选择器 (.myclassname)
标签选择器 (di

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

选择器类型:

id选择器      ( https://segmentfault.com/a/1190000015860892# 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
html&css面试笔记
.box{ width:200px; height:200px; border:1px solid https://segmentfault.com/a/1190000015860892#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°
https://segmentfault.com/a/1190000015860892#lamp{
    width: 400px;
    height: 40px;
    background: https://segmentfault.com/a/1190000015860892#ff0000;
}
https://segmentfault.com/a/1190000015860892#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属性的区别? html&css面试笔记
当图片不输出信息的时候,会显示alt信息,鼠标放上去没有信息,当图片正常读取,不会出现alt信息 html&css面试笔记
当图片不输出信息的时候,会显示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:https://segmentfault.com/a/1190000015860892#0909; /* For IE8+ */
    *color:https://segmentfault.com/a/1190000015860892#f00;  /* For IE7 and earlier */
    _color:https://segmentfault.com/a/1190000015860892#ff0;  /* For IE6 and earlier */
}
// 3、选择符Hack
* html .test{color:https://segmentfault.com/a/1190000015860892#090;}       /* For IE6 and earlier */
* + html .test{color:https://segmentfault.com/a/1190000015860892#ff0;}     /* For IE7 */
18、bootstrap响应式实现的原理 百分比布局+媒体查询 19. 请简要描述margin重合问题,及解决方式 同向margin的重叠:
在最外层的div中加入overflow:hidden;zoom:1
在最外层加入padding:1px;属性
在最外层加入:border:1px solid https://segmentfault.com/a/1190000015860892#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://segmentfault.com/a/1190000015860892,作者:牧心

以上就是对html&css面试笔记的相关介绍,希望对您学习有所帮助,感谢您关注懒咪IT学习网!

本文地址:https://c.lanmit.com/Webqianduan/HTML5/85942.html

 

推荐HTML5排行......