HTML、CSS面试题

元素的alt和title有什么异同（★）
简述src和href的区别（★）
元素的隐藏有哪些？（★）
你对语义化的理解？（★）
谈谈对bfc规范的理解（★）
CSS选择器以及优先级的理解？（★）
使用link和@import有什么区别（★）
css3新增了那些特征？
什么是rem、em、px、rpx区别？
什么是媒体查询？
响应式设计的基本原理是什么？
什么是回流什么是重绘以及区别？
简单说一下H5新增了哪些新特性
css选择器？

元素的alt和title有什么异同（★）

不同点: 元素的alt是表示图片加载失败显示的文本内容，而title是表示鼠标悬停图片时显示的文本内容.
相同点: 在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字

简述src和href的区别（★）

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

元素的隐藏有哪些？（★）

opacity=0，该元素隐藏起来了，不会改变页面布局，如果该元素已经绑定一些事件，也能触发点击事件的。
visibility=hidden，该元素隐藏起来了，不会改变页面布局，但是不会触发该元素已经绑定的事件。
display=none，把元素隐藏起来，并且会改变页面布局。

你对语义化的理解？（★）

方便用户阅读，页面结构更加清晰。
利于SEO（搜索引擎优化），有利于爬虫抓取更多有效信息，确定上下文以及关键字。
有利于开发维护。

谈谈对bfc规范的理解（★）

bfc是即是块级格式化上下文
BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。

CSS选择器以及优先级的理解？（★）

常用的CSS选择器
ID选择器、类选择器、标签选择器、子选择器、后代选择器、伪类选择
权重划分
在同一层级下：
!important > 内联样式 > ID选择器 > 类选择器 > 标签选择器 > 子选择器 > 后代选择器 > 伪类选择器
权重划分
不同层级下：
正常来说权重值越高的优先级越高，但是一直以来没有具体的权重值划分，所以目前大多数开发中层级越深的优先级越高

使用link和@import有什么区别（★）

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：Link引入和@import导入，两者都是外部引用CSS的方式，但是存在一定的区别：

从属关系: link是标签，@import是css提供的.
加载差异: link：结构和样式同时加载；而@import 先加载结构，后加载样式
兼容性:link没有兼容问题，@import不兼容ie5以下的浏览器.
可操作性: link可以通过js操作dom插入link标签改变样式，而@import不能

css3新增了那些特征？

颜色：新增RGBA、HSLA模式
文字阴影：（text-shadow）
边框圆角（border-radius）边框阴影：box-shadow
盒子模型：box-sizing
背景：background-size,background-origin background-clip(削弱)
渐变：linear-gradient(线性渐变):eg: background-image: linear-gradient(100deg, #237b9f, #f2febd);radial-gradient (径向渐变)
过渡：transition可实现动画
自定义动画： animate@keyfrom
媒体查询：多栏布局@media screen and (width:800px)
border-image
2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜scale(x,y)缩放
3D转换
字体图标：font-size
弹性布局：flex

什么是rem、em、px、rpx区别？

rem是一个相对单位，rem的是相对于html元素的字体大小，没有继承性
em是一个相对单位，是相对于父元素字体大小，有继承性
px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。

什么是媒体查询？

媒体查询是CSS3新语法。
使用媒体查询，可以针对不同的媒体类型定义不同的样式
媒体查询可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

响应式设计的基本原理是什么？

什么是响应式设计：响应式网站设计是一个网站能够兼容多个终端，智能地根据不同设备环境进行相对应的布局
响应式设计的基本原理：基本原理是通过媒体查询检测不同的设备屏幕尺寸设置不同的css样式，页面头部必须有meta声明的

什么是回流什么是重绘以及区别？

回流:
当元素的大小或者位置等发生改变时，触发了重新布局导致渲染树需要重新构建，这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建渲染树。
重绘:
只改变自身样式，不会影响到其他元素，则称为重绘(repaint)，比如background-color。
区别:
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流。

简单说一下H5新增了哪些新特性

语义化标签：header、footer、section、nav、aside、article
音频视频：audio、video
canvas 画布
本地存储： localStorage 没有时间限制的数据存储； sessionStorage， sessionStorage的数据存储，当用户关闭浏览器窗口后，数据会被删除
增强型表单：input 的多个 type calendar、date、time、url、search、tel、file、number
新增表单属性：placehoder、required、min 和 max
WebSocket：建立持久通信协议，新的技术：webworker、websocket、Geolocation

css选择器？

div p ：将所有<div>标签里面的<p>标签选中（子标签和孙子辈标签）
div>p ：将所有<div>标签的子标签<p>选中，不包括孙子辈标签。
div+p ：将所有离<div>相邻的<p>标签选中。
div~p ：将<div>后面所有的<p>标签选中（必须是同级的）。
div .content ：将div下class=content 标签选中。
div.content ：表示选中class=content的div
div span.username:表示选中div下class为username的span
p,span ：将p和span选中

HTML、CSS面试题相关推荐

前端基础：100道CSS面试题总结
前言 CSS 是层叠样式表(Cascading Style Sheets)的简称.CSS 主要作用是美化网页.布局页面.CSS 规则主要由两个主要部分构成:选择器及一条或多条声明.在前端基础面试中,C ...
值得收藏的 104个 CSS 面试题
给大家分享104个 CSS 面试题,助你查漏补缺.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助 CSS 面试知识点总结最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题,本 ...
CSS面试题总结，助（祝）2021成功拿到offer
今天是2020年的最后一天,希望2021年的我们会更好! html.css基础 1,link和@import的区别? 从属关系区别: link属于html标签,而@import是css提供的. 加载顺 ...
104道 CSS 面试题
104道 CSS 面试题 (给前端大全加星标,提升前端技能) 作者:CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Not ...
百度糯米android面试题,前端面试—CSS面试题汇总
前端面试-CSS面试题汇总博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 1.flex常见面试题 Flex 是 Flexible ...
104道 CSS 面试题，助你查漏补缺（下）
作者:CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md 本部 ...
【面试题】104道 CSS 面试题，助你查漏补缺（下）
作者:CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md 本部 ...
html+css面试题（更新中）
html面试题「学习笔记」HTML基础 (qq.com) (17条消息) html面试题总结_Mr.Gu的博客-CSDN博客 (17条消息) HTML面试题_萌萌哒の瑞萌萌的博客-CSDN博客文章 ...
【2022前端面试】CSS面试题汇总（加紧收藏）
[2022前端面试]CSS面试题汇总(加紧收藏) 更新时间:2022年3月2日. 本文致力于建设前端面试题库,欢迎兄弟们投稿哈! 大纲 CSS整体的在上次的篇幅上有了较大的变化,画一个思维导图及时更新 ...

HTML、CSS面试题

HTML、CSS面试题

元素的alt和title有什么异同（★）

简述src和href的区别（★）

元素的隐藏有哪些？（★）

你对语义化的理解？（★）

谈谈对bfc规范的理解（★）

CSS选择器以及优先级的理解？（★）

使用link和@import有什么区别（★）

css3新增了那些特征？

什么是rem、em、px、rpx区别？

什么是媒体查询？

响应式设计的基本原理是什么？

什么是回流什么是重绘以及区别？

简单说一下H5新增了哪些新特性

css选择器？

HTML、CSS面试题相关推荐

最新文章

热门文章