HTML/CSS相关面试题

最新推荐文章于 2025-03-05 20:12:32 发布

wj18740503137

最新推荐文章于 2025-03-05 20:12:32 发布

阅读量144

点赞数

文章标签： css html

本文链接：https://blog.youkuaiyun.com/wj18740503137/article/details/120222329

版权

前端面试题

HTML面试题

1、`<image>` 标签上title属性与alt属性的区别是什么？

- alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的 
- title属性可以实现鼠标悬停提示的效果。

2、请写出至少5个HTML5新增的标签，并说明其语义和应用场景？

		<header>：主要用于定义内容的介绍展示区域，描述了文档的头部区域，比如定义文章的头；

        <nav>：定义导航链接的部分；
        
        <section>：定义了文档中的节，比如章节、页眉、页脚或文档中的其他部分；
        
        <article>：定义独立的内容；
        
        <aside>：定义页面主区域之外的内容，比如侧边栏；
        
        <footer>：定义文档的底部区域，描述文档的页脚，比如作者、著作权信息、联系方式等；
            
        <figcaption>：定义<figure>元素的标题，一般被放置在<figure>元素内的第一个或最后一个位置处；
        
        <figure>：定义独立的流内容，比如图形、图标、照片、代码等；

3、请说说你对标签语义化的理解？

一个语义元素能够清楚的描述其意义给浏览器和开发者，即使在去掉或丢失样式的时候，也能够让页面呈现出清晰的结构；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备等），并以具有意义的方式来渲染网页；
便于团队开发和维护，语义化更具有可读性，遵循W3C标准的团队都遵循语义化标准，可以减少差异化；

4、简单描述 DOCTYPE 的作用？严格模式与混杂模式如何区分？它们有何意义？

DOCTYPE 的作用：DOCTYPE声明在文档的最前面，位于根元素 HTML 的起始标签之前，这样一来，在浏览器解析 HTML 文档正文之前就可以确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析。
**严格模式与混杂模式：**严格模式的排版和JS运作模式是以浏览器支持的最高标准运行；而在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作；
当 DOCTYPE 不存在或者格式不正确时，会导致文档以混杂模式呈现。

5、HTML5 有哪些新特性，移除了哪些元素？

HTML5 主要是关于图像、显示、存储、多任务等功能的增加：
- 拖拽释放API（Drag 和 Drop）
- 语义化更好的内容标签（header、footer、nav、article、section、aside）
- 音视频标签（audio、video）
- 画布API（Canvas）
- 地理API（Geolocation）
- Web存储API（localStorage、sessionStorage）
- 表单控件（calendar、date、time、email、url、search，color、number、month等等）
- 通讯API（WebSocket）
HTML5中移除了纯表现的元素，例如：big、dir、center、font、tt、u等等；
还移除了对可用性产生负面影响的元素，例如：frame、frameset、noframes等；

6、iframe的优缺点有哪些？

优点：
1. iframe能够原封不动地把嵌入的网页展示出来；
2. 提高页面代码的复用性；
3. 解决加载缓慢的第三方内容，如图标和广告等的加载问题；
4. 在处理上传或局部刷新时，避免了页面整体刷新；
5. iframe解决部分跨域问题；
缺点：
1. iframe会阻塞主页面的 onload 事件；
2. 无法被一些搜索引擎索引到；
3. 页面会增加服务器的http请求；
4. 会产生很多页面，不便于管理；
5. 很多移动设备无法完全显示框架，设备兼容性差；
6. 会出现区域的上下、左右滚动条，滚动条会挤占页面空间；
7. 使用框架时，要保证正确的使用导航链接，容易造成链接死循环；
  
  ** 随着前端技术的发展，逐渐使用ajax来代替iframe。**

7、请阐述 table布局有哪些缺点？

嵌套层级太深，会导致搜索引擎读取困难，而且会大大增加代码冗余；
灵活性差，比如要设置tr的border等属性是不行的，要在td上设置border属性；
代码可读性差；
混乱的 colspan 和 rowspan ，用它们来实现网页布局时，会造成文档顺序混乱；
不够语义化；

8、简述一下 src 和 href 的区别？

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系；
src指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置；
href指向网络资源所在的位置，建立和当前元素（锚点）或当前文档之间的链接；

9、web存储API的两种方式

localStorage （本地存储）- 没有时间限制的数据存储
sessionStorage （临时存储）- 针对一个 session 的数据存储（关闭窗口，存储的数据清空）
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

CSS面试题

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

常见的布局方式：
1. 固定布局：
  - 给页面元素设置固定的宽度，高度，单位一般采用px等绝对长度单位
  - 优点：布局容易，浏览器支持度高
  - 缺点：用户体验不好，不能根据不同的屏幕进行适应屏幕的布局
2. 流式布局、
  - 也叫百分比布局
  - 优点：可以使用不同大小屏幕
  - 缺点：对于大屏来说用户体验不是很好
3. 弹性布局、
4. 浮动布局、
  - 浮动布局也称float布局，现在pc端网页使用此布局较为频繁，和固定布局结合使用
  - 有点
    - 浮动可以使元素block块状化
    - 可以使块元素同行排列
  - 缺点：
    - 导致父元素高度塌陷
    - 元素脱离文档流，布局困难
5. 定位布局、
6. 自适应布局
7. 响应式布局
8. 表格布局：
  - 优点：容易上手，兼容性好
  - 缺点：标签结构多，不利于后期维护，一但设置完成就变死了很难通过css进行维护

2、请列举几个清除浮动的方法

（1）使用clear属性

<div style="clear:both"></div>

（2）使用br标签和其自身的HTML属性

<br clear="all" />

（3）通过设置父元素的样式，实现清除浮动，例如：

//第一种方式
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
//第二种方式
voerflow:hidden;
//兼容IE浏览器
zoom:1

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

display:none，设置元素为不可见，不会占用文档的空间；
visibility:hidden，这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在；
opacity:0，是CSS3的属性，设置元素为完全透明，和 visibility 的效果类似，但是该属性修饰的元素可以使用 transition 和 animate 设置动画效果；

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

text-transform: none | capitalize（将每个单词的第一个字母转为大写） | uppercase（将每个单词都转为大写）| lowercase（将每个单词都转为小写）

5、请简述CSS样式表的继承

CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下：
文本相关：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color；
列表相关：list-style-image，list-style-position，list-style-type， list-style；

6、请简述CSS的选择器

元素选择器：* 、E、 E#id、 E.class
关系选择器：E、F、E>F、E+F、E~F
属性选择器：E[att]、E[att=“val”]、E[att~=“val”]、E[att^=“val”]、E[att$=“val”]、E[att*=“val”]、E[att|=“val”]
伪类选择器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
伪对象选择器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection

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

伪类：描述了所有逻辑上存在但在文档树中无须标识的分类；
伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中；

8、简述css的权重规则

行内样式 > ID > 属性选择器/class类/伪类选择器 > 元素名/伪对象选择器；

9、在CSS样式中使用px、em，各有什么优势，在表现上有什么区别？

px是相对长度单位，相对于显示器屏幕分辨率而言的；
em是相对长度单位，相对于当前对象内文本的字体尺寸；
px定义的字体，无法用浏览器字体放大功能；em的值并不是固定，会继承父级元素的字体大小，

10、CSS中link和@import 的区别是什么？

link属于HTML标签，而 @import 是CSS提供的，只能加载CSS；
页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
@import只能在IE5以上才能识别，而link是HTML标签，无兼容问题；
link方式的样式权重高于@import的权重；
当使用javascript控制DOM去改变样式的时候，只能使用link方式，因为@import只有CSS才能识别，DOM无法控制；

11、position的值，relative 和 absolute 分别是相对于谁进行定位的？

**absolute：**生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位
**fixed：**生成绝对定位的元素，相对于浏览器窗口进行定位。（IE6不支持）
**relative：**生成相对定位的元素，相对于其在普通流中的位置进行定位
**static：**默认值。没有定位，元素出现在正常的流中

12、CSS3有哪些新特性？

新增特性有：圆角（border-radius）、阴影（box-shadow）、对文字加特效（text-shadow）、线性渐变（gradient）、变形（transform）；
增加了更多的CSS选择器，媒体查询，多栏布局，多背景rgba，引入伪元素::selection。

13、为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会出现浏览器之间的页面显示差异；

14、解释下 CSS sprites 原理

css sprites是什么通俗解释：CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。
优点
- 减少网页的http请求
- 减少图片的字节
- 解决网页设计师在图片命名上的困扰，只需要对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名
- 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变了
缺点
- CSS sprites 在开发的时候，需要通过Photoshop或其他工具测量计算每一个背景单元的精确位置
- 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要修改这张合并的图片

15、浮动元素引起的问题

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

16、line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

**带单位：**px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高；
**纯数字：**把比例传递给后代，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.5*18=27px；
**百分比：**将计算后的值传递给后代；

17、:link、:visited、:hover、:active 的执行顺序是怎么样的？

:link > :visited > :hover > :active

18、经常遇到的浏览器兼容性有哪些？如何解决？

浏览器默认的 margin 和 padding 不同
透明性IE用filter.Alpha(opcity=60)，而其他主浏览器用opacity:0.6

19、有哪些方式可以对一个DOM设置它的CSS样式？

外部样式表，使用 <link>标签引入一个外部CSS样式
内部样式表，将CSS代码放在 <style> 标签内部
内联样式，将CSS样式直接定义在HTML元素内部

20、什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse；
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式称为折叠，并且因而所结合成的外边距称为折叠外边距；
折叠结果计算规则：
两个相邻的外边距都是正数时，折叠结果是他们两者之间较大的值；
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值；
两个外边距一正一负时，折叠结果是两者的相加的和