HTML+CSS面试题

原创

wx61d549d4a061c 2022-01-10 18:00:50 博主文章分类：前端面试相关 ©著作权

©著作权归作者所有：来自51CTO博客作者wx61d549d4a061c的原创作品，请联系作者获取转载授权，否则将追究法律责任

每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？
答案：<!DOCTYPE>声明位于文档中最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。（重点：告诉浏览器按照何种规范解析页面）

请讲一下HTML5的特点。
答案：（1）HTML5的跨平台技术。传统移动终端上Native App，开发者的研发工作必须针对不同的操作系统进行，成本相对较高。Native App对于用户还存在着管理成本、存储成本以及性能消耗成本。HTML/JavaScript/CSS语言所开发的应用只要一次开发就能进入所有浏览器进行分发。即使是走传统的App Store应用商店渠道，只需要再将底层用HTML5开发的应用“封装”为App，从时间和资金成本上讲远远小于跨系统移植。
（2）HTML5更佳的用户体验。提高了用户体验，加强了视觉感受。HTML5技术在移动端，能够让应用程序回归到网页，并对网页的功能进行扩展，用户不需要下载客户端或插件就能够观看视频、玩游戏，操作更加简单，用户体验更好。HTML5的视音频新技术解决了移动端苹果和安卓4.0+对Flash的不支持问题，HTML5在性能上要比Flash更好，让用户拥有更好的体验。HTML5中的CSS3特效样式、Canvas、WEBGL的介入，不仅加强了网页的视觉效果，甚至能够使用户在网页当中看到三维立体特效。

你知道的语义化的标签有哪些？
答案：一个语义元素能够清楚的描述其意义给浏览器和开发者。语义元素实例：<form>, <table>, and <img>- 清楚的定义了它的内容。HTML5 提供了新的语义元素来明确一个Web页面的不同部分:<header>、<nav>、<section>、<article>、<aside>、<figcaption>、<figure>、<footer>

CSS3新增了哪些特性？
答案：(1) CSS3实现圆角- border-radius
(2) 盒子阴影- box-shadow
(3) 文本阴影- text-shadow
(4) 线性渐变- gradient
(5) 变化样式- transform：roatate-旋转、scale-缩放、translate- 定位、skew- 倾斜
(6) 增加了更多css选择器
(7) 多背景、rgba
(8) 新增加的伪元素：：selection
(9) 媒体查询与多栏布局
(10) border-image
(11) 新增的伪类选择器：first-of-type、last-of-type、only-of-type、only-child、nth-child（num）、enabled、disabled、checked

请讲一下CSS3动画的优点。
答案：代码比较简单，再就是性能好，浏览器会对其进行优化。

请讲一下圣杯布局和双飞翼布局。
圣杯布局与双飞翼布局都是双边固定宽度，中间自适应的布局。

如何写宽高自适应的APP？
答案：前端移动端开发的时候肯定是会面对不同型号的手机的页面展示问题的，那就是要一种自适应不同移动端的方法，使用vw，vh单位。vw和vh是根据设备的宽度和高度来决定的，设备的宽就是100vw，设备的高就是100vh。一般情况下宽度，字体大小和左右边距间距等都是用vw单位。高度，行高，上下边距间距等都是用vh单位。

div+css的布局较table布局有什么优点？
答案：改版的时候更方便，只要改css文件。页面加载速度更快、结构化清晰、页面显示简介。表现与结构相分离。易于优化（seo）搜索引擎更友好，排名更容易靠前。

grid布局有过了解么？
答案：CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。这是一个二维系统，这意味着它可以同时处理列和行。

img的alt与title有何异同？strong与em的异同？
答案：alt：用来指定替换文字【图片加载失败展示】。title：用来提供建议性文字【移入显示】。strong：粗体强调标签。em：斜体强调标签。

请描述一下渐进增强与优雅降级。
答案：渐进增强是向前【高版本浏览器】兼容。优雅降级是向后【低版本浏览器】兼容。

知道什么是微格式吗？谈谈理解。
答案：微格式是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。优点：将智能数据添加到网页上，让网页内容在搜索引擎结果页面可以显示额外的提示。（应用范例：豆瓣）

为什么利用多个域名来存储网站资源会更有效？
答案：CDN缓存更方便；突破浏览器并发限制；节约cookie带宽；节约主域名的连接数，优化页面相应速度；防止不必要的安全问题；

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更高的体验。
答案：使用精灵图，将小规格的图片整合为一张精灵图，减少浏览器请求次数。【http2.0可以不考虑此问题】

CSS有哪些选择器？
答案：(1) 标签选择器（如body，html，div,p,ul,li)
(2) 类选择器（如：class=”head”)
(3) ID选择器（如：id=”name”)
(4) 全局选择器（如：*号）
(5) 组合选择器（如.head .head_logo)
(6) 继承选择器（如：div p）
(7) 伪类选择器（如：就是链接样式a元素的伪类，4种不同的状态：link、visited、active、hover）

CSS中可以通过哪些属性，使得一个DOM元素不显示在浏览器的可视范围内？
答案：display: none;visibility: hidden;opacity: 0;

为什么要使用HTML5的语义化标签？
答案：去掉或样式丢失的时候能让页面保留基本样式呈现清晰的结构。利于SEO。减少团队差异化。

行内元素和块级元素的区别是什么？行内元素的padding和margin可设置么？
答案：块级元素总是独占一行。width，height，padding，margin都可以控制。行内元素和相邻的行内元素在同一行，width，height与padding-top,padding-bottom,还有margin-top,margin-bottom不可控制，其余可控制。

超链接被访问过后hover样式就不出现的问题是什么？如何解决？
答案：被点击访问过的超链接样式不在具有hover和active了，解决办法是改变css属性的排列顺序：L-V-H-A（link,visited,hover,active）。

rgba()和opacity的透明效果有什么不同？
答案：rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

请描述display:none；visibility:hidden；opacity:0;三者的区别；
答案：三者共同点都是隐藏。
不同点：
(1) 是否占据空间。display：none;隐藏后不占位置；visibility:hidden;和opacity:0;隐藏之后还占据空间。
(2) 子元素是否继承。display:none;-----不会被子元素继承，父元素不存在了，子元素也不会显示出来Visibility: hidden;--------会被子元素继承，通过设置子元素visibility：visible来显示子元素opacity：0；----------会被子元素继承，但是不能通过设置子元素opacity：0来重新显示
(3) 事件绑定。display:none;的元素都已经不再页面存在了，因此无法触发它绑定的事件Visibility: hidden;不会触发它上面绑定的事件opacity：0；元素上面绑定的事件是可以触发的

你知道的css让元素垂直水平居中的方法有哪些？(这里答案我也让水平居中）
答案：假如html代码为以下：

<div class="wrap"><div class="inner"></div></div>

则有3种方法：前两种首先让wrap类选择器的css样式定位为relative

(1) 
.inner{ 
  //未知父元素宽高
  position:absolute;
  Left:0;
  Right:0;
  Top:0;
  Bottom:0;
  Margin:auto;
  }


(2) 

.inner {      
   Width:40px;      
   Height: 40px;  
  Position: absolute;  
  Left: 50%;
  Top: 50%;        
  Margin-left: -20px; //已经知道元素高宽,这里取宽高的二分之一       
  Margin-top: -20px;
  或者用  transform：translate(-50%,-50%);代替margin的设置也可以
  }

(3) .wrap { 
       Display: flex; 
       Justify-content:center;       
        Align-items:center;
        }

如何垂直居中一个浮动元素？
答案：答案同上

请讲一下px，em的区别。
答案：px和em都是长度单位。但是px是固定的，指定多少就是多少。em是根据父级元素的大小变化的。拓展：浏览器默认字体大小是16px。所以未经调整的浏览器都符合：1em=16px这个计算规则。

SASS和LESS是什么？为什么要使用它们？
答案：CSS预处理器，通过编程的方式来开发CSS，可实现代码简写与复用等。使用它们是因为：结构清晰，便与拓展、减少无意义的机械劳动、可以轻松实现多重继承。

CSS的link和import的区别是什么？
答案：(1) link属于html标签，所以没有兼容性，而@import是css2.1才出的语法，@import只有在IE5以上才能识别。
(2) 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
(3) Link方式的样式权重高于@import的权重：在link标签引入的CSS文件中，使用@import时需要注意，如果已经存在相同样式，@import引入的这个样式将被CSS文件本身的样式覆盖掉。 style 嵌入方式引入，减少页面请求(优点)，但只会对当前页面有效，无法复用、会导致代码冗余，不利于项目维护(缺点)，此方式一般只会项目主站首页使用（腾讯、淘宝、网易、搜狐）等大型网站主页，之前有看到过都是这种方式，但后来有些也舍弃了

请讲一下盒模型。
答案：css盒模型分俩种：IE盒子模型和标准盒子模型。在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

BFC是什么？
答案：BFC是指浏览器中创建了一个独立的渲染区域。

对WEB标准以及W3C的理解与认识。
答案：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、能被更多的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

前端页面有哪三层构成？分别是什么？作用是什么？
答案：结构层(HTML - - 设置页面的基本结构)、样式层(CSS - - 修改页面展示给用户的样式加一些小交互)、行为层(JS - - 使用户与页面完美交互)

CSS选择符有哪些？块级元素有哪些？空元素有哪些？
答案：选择符也就是选择器，前面答案有写到。
1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = “external”])
9.伪类选择器(a: hover, li:nth-child)首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。(1) 行内元素有：a b span img input select strong(2) 块级元素有：div ul ol li dl dd h1 h2 h3 h4…p(3) 常见的空元素：

(水平分割线)

哪些CSS属性可以继承？CSS新增伪类有哪些？
答案：可继承的样式：
1.font-size
2.font-family
3.color
4.text-indent不可继承的样式：
1.border
2.padding
3.margin
4.width
5.height

请说出position的属性值有哪些。每个值的特点作用。
1. position: relative;相对定位
1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）
2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）
3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）
4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。）（两个都为定位元素，后面的会覆盖前面的定位）
2. position: absolute;绝对定位
1> 使元素完全脱离文档流（在文档流中不再占位）
2> 使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）
3> 使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）
4> 相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）
5> 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）
6> 提升层级（同相对定位）
3. position: fixed;固定定位 fixed生成固定定位的元素，相对于浏览器窗口进行定位。
4. position:static：默认值默认布局。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5. position: sticky 粘性定位粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。
6. position: inherit规定应该从父元素继承 position 属性的值。
7. position: initial 设置该属性为默认值，详情查看CSS initial 关键字initial 关键字用于设置 CSS 属性为它的默认值。initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

display的属性值有哪些？可以做什么？
答：inherit：规定应该从父元素继承 display 属性的值。
block：变成一个块元素，单独占一行，可以设置width,height，maigin四个方向，padding四个方向；
inline：变成一个行内元素，元素的宽度就是它内容的宽度，不可改变。inline-block：变成一个行内块元素，和内联元素在同一行，但自身相当于块级元素，可以设置width,height等属性。
none：隐藏该元素，不占空间。但对开发来说真实存在，可以获取被隐藏的元素。 list-item：此元素会作为列表显示。
table：此元素会作为块级表格来显示（类似 < table >），表格前后带有换行符。
table-row：此元素会作为一个表格行显示（类似 < tr >）。
table-cell：此元素会作为一个表格单元格显示（类似 < td > 和 < th >）。

css样式优先级算法如何计算？
答案：
(1) !important > id > class > 标签
(2) !important比内联样式优先级高，内联样式比id优先级高；
(3) 优先级就近原则，样式定义最近者为准；
(4) 以最后载入的样式为准；

你开发过程中遇到过最棘手的html与css问题是什么？
参考答案：自己想啦（哈哈哈哈哈）

说说 cookies，sessionStorage 、 localStorage 你对它们的理解？ cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密），cookie数据始终在同源的http请求中携带，记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
大小： cookie数据大小不能超过4k,sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
时效：localStorage 存储持久数据，浏览器关闭后数据不丢失除非用户主动删除数据或清除浏览器/应用缓存；sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭部分面试官可能还会再深入一些：

1)、如何让cookie浏览器关闭就失效？——不对cookie设置任何正、负或0时间的即可;
2)、sessionStorage在浏览器多窗口之间 (同域)数据是否互通共享? ——不会，都是独立的，localStorage会共享;
3)、能让localStorage也跟cookie一样设置过期时间？答案是可以的，在存储数据时，也存储一个时间戳，get数据之前，先拿当前时间跟你之前存储的时间戳做比较

什么是外边距合并,项目中是否有遇到过?
答案：有，外边距合并指的是，当两个垂直元素的都设置有margin外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的值中的较大那个。

:before 和 :after两伪元素，平时都是使用双冒号还是单冒号？有什么区别？以及它们的作用：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）;
:before/:after 的兼容性要比::before/::after好，不过在H5开发中建议使用::before/::after比较好。想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后；
如果按堆栈视角，::after生成的内容会在::before生成的内容之上。