html&css面试笔记

2024年3月18日 74次阅读来源: 牧心

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，右列自适应浏览器的布局

浮动

<div>
    <div id="left" style="float:left;width:100%; height:200px;background-color:red;"></div>
    <div id="right" style="float:left;margin-left:-100%;width:200px;height:200px;background-color:green;"></div> 
</div>

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

<div style="display:flex;">
    <div id="left" style="flex-basis:200px;width:100%; height:200px;background-color:red;"></div>
    <div id="right" style="flex:1;height:200px;background-color:green;"></div> 
</div>

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

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

5、不定宽高的img在固定宽高的容器内水平垂直居中，写出html和css

<div class="box">
    <img src="http://img1.gtimg.com/nice_mb/08/1c/24769.jpg" />
</div>
 .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（不推荐）

<div class="parent">
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <div style="clear:both"></div>
</div>

使用成熟的清浮动样式类，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结构：
<div class="wrapper">
     <div class="content"></div>
</div>

//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属性的区别？

<img src="#" alt="alt信息" />
当图片不输出信息的时候，会显示alt信息，鼠标放上去没有信息，当图片正常读取，不会出现alt信息
<img src="#" alt="alt信息" title="title信息" />
当图片不输出信息的时候，会显示alt信息鼠标放上去会出现title信息
当图片正常输出的时候，不会出现alt信息，鼠标放上去会出现title信息
title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签
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
<!--[if IE]>
  <style>
    .test{color:red;}
  </style>
<![endif]-->
// 2、属性Hack
.test{
    color:#090\9; /* 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。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
3.将CSS与DOM合并，构建渲染树（Render Tree）;
4.布局和绘制，重绘（repaint）和重排（reflow）;

22、对<meta>标签有什么理解

<meta> 标签提供关于 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

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

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

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

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

5、不定宽高的img在固定宽高的容器内水平垂直居中，写出html和css

6、清除浮动的原理和实现方法

7、rgba()和opacity的透明效果有什么不同

8、css实现，鼠标放在一个div上时该元素在2s内旋转180°

9、什么是盒子模型？

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

11、CSS实现垂直水平居中

12、简述一下src与href的区别

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

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

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

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

17、什么是CSS Hack?

18、bootstrap响应式实现的原理

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

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

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

22、对<meta>标签有什么理解

23、h5新特性

25、display none visibility hidden区别？

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