前端面试题全集(html+CSS)

其他 2020-04-23 10:41:23 阅读次数: 0

文章目录

前端面试题git地址

HTML
Doctype 作用？标准模式与兼容模式各有什么区别?
  • 声明位于HTML文档中的第一行，处于 html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

  • 标准模式的排版 和 JS 运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

HTML5 为什么只需要写 <!DOCTYPE HTML>？
  • HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
  • 而 HTML4.01 基于 SGML,所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

定义：CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，如 div 的 display 默认值为“block”，则为“块级”元素；span 默认 display 属性值为“inline”，是“行内”元素。

  • 行内元素有：a b span img input select strong（强调的语气）
  • 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
  • 空元素：
    • 常见: br hr img input link meta
    • 不常见: area base col command embed keygen param source track wbr

不同浏览器（版本）、HTML4（5）、CSS2 等实际略有差异
参考: http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements

页面导入样式时，使用 link 和@import 有什么区别？
  • link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS, 定义 rel 连接属性等作用；而@import 是 CSS 提供的，只能用于加载 CSS;
  • 页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;
  • import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题;
  • link 支持使用 js 控制 DOM 去改变样式，而@import 不支持;
介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS 引擎则：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

常见的浏览器内核有哪些？
  • Trident 内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称 MSHTML]
  • Gecko 内核：Netscape6 及以上版本，FF,MozillaSuite/SeaMonkey 等
  • Presto 内核：Opera7 及以上。 [Opera 内核原为：Presto，现为：Blink;]
  • Webkit 内核：Safari,Chrome 等。 [ Chrome 的：Blink（WebKit 的分支）]

详细文章：浏览器内核的解析和对比

扫描二维码关注公众号，回复： 11067861 查看本文章
html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

  • HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

    • 绘画 canvas
    • 用于媒介回放的 video 和 audio 元素
    • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
    • sessionStorage 的数据在浏览器关闭后自动删除
    • 语意化更好的内容元素，比如 article、footer、header、nav、section
    • 表单控件，calendar、date、time、email、url、search
    • 新的技术 webworker, websocket, Geolocation

  • 移除的元素：

    • 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
    • 对可用性产生负面影响的元素：frame，frameset，noframes；

  • 支持 HTML5 新标签：

    • IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，

    • 可以利用这一特性让这些浏览器支持 HTML5 新标签，

    • 浏览器支持新标签后，还需要添加标签默认的样式。

    • 当然也可以直接使用成熟的框架、比如 html5shim;

      <!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

  • 如何区分 HTML5： DOCTYPE 声明\新增的结构元素\功能元素

简述一下你对 HTML 语义化的理解？
  • 用正确的标签做正确的事情。
  • html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
  • 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
  • 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
HTML5 的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

  1. 页面头部像下面一样加入一个 manifest 的属性；
  2. 在 cache.manifest 文件的编写离线存储的资源
CACHE MANIFEST
#v1.0

CACHE:
js/app.js
css/style.css

NETWORK:
assets/logo.png

FALLBACK:
/html5/ /404.html
  1. 在离线状态时，操作 window.applicationCache 进行需求实现。

参考链接：HTML5 离线缓存-manifest 简介

浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？
  • 在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
  • 离线的情况下，浏览器就直接使用离线存储的资源。
请描述一下 cookies，sessionStorage 和 localStorage 的区别？
  • cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
  • cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
  • sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。
  • 存储大小：
    • cookie 数据大小不能超过 4k。
    • sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
  • 有效期（生命周期）：
    • localStorage: 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
    • sessionStorage: 数据在当前浏览器窗口关闭后自动删除。
    • cookie: 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
iframe 有那些缺点？
  • iframe 会阻塞主页面的 Onload 事件；
  • 搜索引擎的检索程序无法解读这种页面，不利于 SEO;
  • iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript

动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。

Label 的作用是什么？是怎么用的？

label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

  <label for="Name">Number:</label>
  <input type=“text“name="Name" id="Name"/>
  <label>Date:<input type="text" name="B"/></label>
HTML5 的 form 如何关闭自动完成功能？

给不想要提示的 form 或某个 input 设置为 autocomplete=off。

如何实现浏览器内多个标签页之间的通信? (阿里)
  • WebSocket、SharedWorker；
  • 也可以调用 localstorge、cookies 等本地存储方式；

localstorge 另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，

我们通过监听事件，控制它的值来进行页面信息通信；

注意 quirks：Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；

webSocket 如何兼容低浏览器？(阿里)
  • Adobe Flash Socket 、
  • ActiveX HTMLFile (IE) 、
  • 基于 multipart 编码发送 XHR 、
  • 基于长轮询的 XHR
页面可见性（Page Visibility API） 可以有哪些用途？
  • 通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
  • 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；
如何在页面上实现一个圆形的可点击区域？
  • map+area 或者 svg
  • border-radius
  • 纯 js 实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
 <div style="height:1px;overflow:hidden;background:red"></div>
网页验证码是干嘛的，是为了解决什么安全问题。
  • 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；
  • 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。
title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？
  • title 属性没有明确意义只表示是个标题，H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响；
  • strong 是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong 会重读，而 b 是展示强调内容。
  • i 内容展示为斜体，em 表示强调的文本；

Physical Style Elements – 自然样式标签

b, i, u, s, pre

Semantic Style Elements – 语义样式标签

strong, em, ins, del, code

应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

html 中 title 属性和 alt 属性的区别？
<img src="#" alt="alt信息" />

当图片不输出信息的时候，会显示 alt 信息 鼠标放上去没有信息，当图片正常读取，不会出现 alt 信息。

<img src="#" alt="alt信息" title="title信息" />

当图片不输出信息的时候，会显示 alt 信息 鼠标放上去会出现 title 信息；
当图片正常输出的时候，不会出现 alt 信息，鼠标放上去会出现 title 信息。

另外还有一些关于 title 属性的知识：
  • title 属性可以用在除了 base，basefont，head，html，meta，param，script 和 title 之外的所有标签。
  • title 属性的功能是提示。额外的说明信息和非本质的信息请使用 title 属性。title 属性值可以比 alt 属性值设置的更长。
  • title 属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。
CSS
display: none; 与 visibility: hidden; 的区别

相同： 它们都能让元素不可见

区别：

  • display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
  • display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible;可以让子孙节点显式
  • 修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘
  • 读屏器不会读取 display: none;元素内容；会读取 visibility: hidden 元素内容
css hack 原理及常用 hack

原理：利用不同浏览器对 CSS 的支持和解析结果不一样编写针对特定浏览器样式。常见的 hack 有 1）属性 hack。2）选择器 hack。3）IE 条件注释

IE 条件注释：适用于[IE5, IE9]常见格式如下

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

选择器 hack：不同浏览器对选择器的支持不一样

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

属性 hack：不同浏览器解析 bug 或方法

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
link 与 @import 的区别
  • link 是 HTML 方式， @import 是 CSS 方式
  • link 最大限度支持并行下载，@import 过多嵌套导致串行下载，出现 FOUC
  • link 可以通过 rel=“alternate stylesheet” 指定候选样式
  • 浏览器对 link 支持早于@import ，可以使用 @import 对老浏览器隐藏样式
  • @import 必须在样式规则之前，可以在 css 文件中引用其他文件
  • 总体来说：link 优于@import
CSS 有哪些继承属性
  • 关于文字排版的属性如：
    • font
    • word-break
    • letter-spacing
    • text-align
    • text-rendering
    • word-spacing
    • white-space
    • text-indent
    • text-transform
    • text-shadow
  • line-height
  • color
  • visibility
  • cursor
display,float,position 的关系

  • 如果 display 为 none，那么 position 和 float 都不起作用，这种情况下元素不产生框

  • 否则，如果 position 值为 absolute 或者 fixed，框就是绝对定位的，float 的计算值为 none，display 根据下面的表格进行调整

  • 否则，如果 float 不是 none，框是浮动的，display 根据下表进行调整

  • 否则，如果元素是根元素，display 根据下表进行调整

  • 其他情况下 display 的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整 display

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2C3E0WKE-1587510758186)(…/imgs/display关系.png)]

外边距折叠(collapsing margins)

外边距重叠就是 margin-collapse

相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距

折叠结果遵循下列计算规则：

  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
  • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
  • 两个外边距一正一负时，折叠结果是两者的相加的和
介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？
  • 有两种， IE 盒子模型、W3C 盒子模型；
  • 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
  • 标准(W3C)盒模型：元素宽度 = width + padding + border + margin
  • 怪异(IE)盒模型：元素宽度 = width + margin
  • 区 别： IE 的 content 部分把 border 和 padding 计算了进去;
  • 标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高
CSS 选择符有哪些？
  • id 选择器（ # myid）
  • 类选择器（.myclassname）
  • 标签选择器（div, h1, p）
  • 相邻选择器（h1 + p）
  • 子选择器（ul > li）
  • 后代选择器（li a）
  • 通配符选择器（ * ）
  • 属性选择器（a[rel = “external”]）
  • 伪类选择器（a:hover, li:nth-child）
CSS3 新增伪类有那些？

  • p:first-of-type 选择属于其父元素的首个

    元素的每个

    元素。

  • p:last-of-type 选择属于其父元素的最后

    元素的每个

    元素。

  • p:only-of-type 选择属于其父元素唯一的

    元素的每个

    元素。

  • p:only-child 选择属于其父元素的唯一子元素的每个

    元素。

  • p:nth-child(2) 选择属于其父元素的第二个子元素的每个

    元素。

  • :after 在元素之前添加内容,也可以用来做清除浮动。

  • :before 在元素之后添加内容

  • :enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。

  • :disabled 控制表单控件的禁用状态。

  • :checked 单选框或复选框被选中

如何居中 div？如何居中一个浮动元素？如何让绝对定位的 div 居中？

如果需要居中的元素为常规流中 inline 元素，为父元素设置 text-align: center;即可实现

如果需要居中的元素为常规流中 block 元素，1）为元素设置宽度，2）设置左右 margin 为 auto。3）IE6 下需在父元素上设置 text-align: center;,再给子元素恢复需要的值

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        text-align: center; /* 3 */
    }
    .content {
        width: 500px;      /* 1 */
        text-align: left;  /* 3 */
        margin: 0 auto;    /* 2 */

        background: purple;
    }
</style>

如果需要居中的元素为浮动元素，1）为元素设置宽度，2）position: relative;，3）浮动方向偏移量（left 或者 right）设置为 50%，4）浮动方向上的 margin 设置为元素宽度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;         /* 1 */
        float: left;

        position: relative;   /* 2 */
        left: 50%;            /* 3 */
        margin-left: -250px;  /* 4 */

        background-color: purple;
    }
</style>

如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）偏移量设置为 50%，3）偏移方向外边距设置为元素宽度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        left: 50%;
        margin-left: -400px;

        background-color: purple;
    }
</style>

如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）设置左右偏移量都为 0,3）设置左右外边距都为 auto

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;

        background-color: purple;
    }
</style>
如何竖直居中一个元素
  • 绝对定位居中
  • 如果居中的是行内元素，可以设置父级 height 与 line-height 相等
  • 设置 margin/padding 居中
  • 相对位置偏移居中
  • flex 居中 设置 align-items:center 即可
display 有哪些值？说明他们的作用
  • block 象块类型元素一样显示。
  • none 缺省值。象行内元素类型一样显示。
  • inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
  • list-item 象块类型元素一样显示，并添加样式列表标记。
  • table 此元素会作为块级表格来显示
  • inherit 规定应该从父元素继承 display 属性的值
position 有哪些值 relative 和 absolute 定位原点是？
  • absolute 生成绝对定位的元素，相对于值不为 static 的第一个父元素进行定位。
  • fixed （老 IE 不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。
  • relative 生成相对定位的元素，相对于其正常位置进行定位。
  • static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right - z-index 声明）。
  • inherit 规定从父元素继承 position 属性的值
CSS3 有哪些新特性？
  • 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
  • 弹性盒模型 display: flex;
  • 多列布局 column-count: 5;
  • 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
  • 个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
  • 颜色透明度 color: rgba(255, 0, 0, 0.75);
  • 圆角 border-radius: 5px;
  • 渐变 background:linear-gradient(red, green, blue);
  • 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
  • 倒影 box-reflect: below 2px;
  • 文字装饰 text-stroke-color: red;
  • 文字溢出 text-overflow:ellipsis;
  • 背景效果 background-size: 100px 100px;
  • 边框效果 border-image:url(bt_blue.png) 0 10;
  • 平滑过渡 transition: all .3s ease-in .1s;
  • 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
  • 转换
    • 旋转 transform: rotate(20deg);
    • 倾斜 transform: skew(150deg, -10deg);
    • 位移 transform: translate(20px, 20px);
    • 缩放 transform: scale(.5);
用纯 CSS 创建一个三角形的原理是什么？
/* 把上、左、右三条边隐藏掉（颜色设为 transparent）*/
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}
一个满屏品字布局如何设计?

简单的方式：

  • 上面的 div 宽 100%，
  • 下面的两个 div 分别宽 50%，
  • 然后用 float 或者 inline 使其不换行即可
经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧 ？
  • png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8.
  • 浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一
  • IE 下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute()获取自定义属性;
  • Firefox 下,只能使用 getAttribute()获取自定义属性。解决方法:统一通过 getAttribute()获取自定义属性
  • IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性
  • Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性
li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？(也称幽灵字符)

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为 0，就没有空格了

display:inline-block 间隙问题怎么解决？(携程)

移除空格、使用 margin 负值、使用 font-size:0、letter-spacing、word-spacing

display:inline-block 什么时候会显示间隙？
  • 相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
  • 非 inline-block 水平元素设置为 inline-block 也会有水平间距
  • 可以借助 vertical-align:top; 消除垂直间隙
  • 可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
  • 把 li 标签写到同一行可以消除垂直间隙，但代码可读性差
css 定义的权重

网上有声称诸如id权重100，class权重10等计算方法，这是不正确的。
实际上应该如下：

  1. 如果一个声明来自style属性而不是选择器，计作1或者a=1（在一个html文档中，元素“style”的值是样式表规则，这个规则中没有选择器，所以a=1, b=0, c=0, and d=0）
  2. 选择器中id属性的个数,计作b
  3. 选择器中其他属性以及伪类的个数，计作c
  4. 选择器中元素及伪元素的个数，计作d

一些例子：

* {}     /* a=0 b=0 c=0 d=0 -> 优先级= 0,0,0,0 */
li {}     /* a=0 b=0 c=0 d=1 -> 优先级 = 0,0,0,1 */
li:first-line {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
ul li {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
ul ol+li {}     /* a=0 b=0 c=0 d=3 -> 优先级 = 0,0,0,3 */
h1 + *[rel=up]{}     /* a=0 b=0 c=1 d=1 -> 优先级 = 0,0,1,1 */
ul ol li.red {}     /* a=0 b=0 c=1 d=3 -> 优先级 = 0,0,1,3 */
li.red.level {}     /* a=0 b=0 c=2 d=1 -> 优先级 = 0,0,2,1 */
#x34y {}     /* a=0 b=1 c=0 d=0 -> 优先级 = 0,1,0,0 */
style=""     /* a=1 b=0 c=0 d=0 -> 优先级 = 1,0,0,0 */

[备注]
　　:first-line 伪元素
　　[rel=up] 其他属性

优先级只基与选择器的形式，特殊的，一个“[id=p33]“形式的选择器是按照属性选择器来计算的（a=0, b=0, c=1, d=0），即使用定义中包含ID。

了解了这些 你应该不会再对”11个class与一个id”谁的优先级高“这类的问题有疑问了吧，因为a,b,c,d只是在各自位置数字的累加，而不会越级。

当然权重最高的是!important，会覆盖以上所有。行内样式也高不过它。

有一幅生动的图可以展示这个规则：
大鱼吃小鱼

CSS 优先级算法如何计算？
  • 优先级就近原则，同权重情况下样式定义最近者为准
  • 载入样式以最后载入的为准
  • 优先级为: !important > id > class > tag important 比 内联优先级高
谈谈浮动和清除浮动

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上

解决方法

  1. 父级 div 定义伪类：after 和 zoom (推荐使用，建议定义公共类，以减少 CSS 代码)
   .clearfloat:after{
       display:block;
       clear:both;
       content:"";
       visibility:hidden;
       height:0}

   .clearfloat{zoom:1}
  1. 在结尾处添加空 div 标签 clear:both
<div class="parent">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>

<style>
    .left {float:left}
    .clearfloat{clear:both}
</style>
  1. 父级 div 定义 height
  2. 父级 div 定义 overflow:auto
  3. 父级 div 定义 overflow:hidden
  4. 父级 div 也一起浮动
  5. 父级 div 定义 display:table
  6. 结尾处加 br 标签 clear:both

参考链接几种常用的清除浮动方法

box-sizing 常用的属性有哪些？分别有什么作用？
  • box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
  • box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
  • box-sizing: inherit; // 继承父元素 box-sizing 属性的值
请列举几种隐藏元素的方法
  • visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
  • opacity: 0; CSS3 属性，设置 0 可以使一个元素完全透明
  • position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
  • display: none; 元素会变得不可见，并且不会再占用文档的空间。
  • transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
  • <div hidden=“hidden”> HTML5 属性,效果和 display:none;相同，但这个属性用于记录一个元素的状态
  • height: 0; 将元素高度设为 0 ，并消除边框
  • filter: blur(0); CSS3 属性，将一个元素的模糊度设置为 0，从而使这个
rgba() 和 opacity 的透明效果有什么不同？
  • opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
  • rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果
css 属性 content 有什么作用？

content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式

请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景？

Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局

请写出多种等高布局
  • 在列的父元素上使用这个背景图进行 Y 轴的铺放，从而实现一种等高列的假像
  • 模仿表格布局等高列效果：兼容性不好，在 ie6-7 无法正常运行
  • css3 flexbox 布局： .container{display: flex; align-items: stretch;}
圣杯布局的实现原理？

要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽

好处：重要的内容放在文档流前面可以优先渲染

原理：利用相对定位、浮动、负边距布局，而不添加额外标签

  .container {
      padding-left: 150px;
      padding-right: 190px;
  }
  .main {
      float: left;
      width: 100%;
  }
  .left {
      float: left;
      width: 190px;
      margin-left: -100%;
      position: relative;
      left: -150px;
  }
  .right {
      float: left;
      width: 190px;
      margin-left: -190px;
      position: relative;
      right: -190px;
  }
什么是双飞翼布局？实现原理？

双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局

原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。

.container {
    /*padding-left:150px;*/
    /*padding-right:190px;*/
}
.main-wrap {
    width: 100%;
    float: left;
}
.main {
    margin-left: 150px;
    margin-right: 190px;
}
.left {
    float: left;
    width: 150px;
    margin-left: -100%;
    /*position: relative;*/
    /*left:-150px;*/
}
.right {
    float: left;
    width: 190px;
    margin-left: -190px;
    /*position:relative;*/
    /*right:-190px;*/
}
在 CSS 样式中常使用 px、em 在表现上有什么区别？
  • px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能
  • em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级 font-size
为什么要初始化 CSS 样式？
  • 不同浏览器对有些标签样式的默认值解析不同
  • 不初始化 CSS 会造成各现浏览器之间的页面显示差异
  • 可以使用 reset.css 或 Normalize.css 做 CSS 初始化
reset.css 和 Normalize.css 理解

reset.css 意为重置默认样式。HTML 中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式

Eric Meyer（CSS Reset）推荐

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Normalize.css 只是一个很小的 css 文件,但它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 css reset，Normalize.css 是一种现代的，为 HTML5 准备的优质替代方案。

Normalize.css 是一种 CSS reset 的替代方案。经过@necolas 和@jon neal 花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。

我们创造 normalize.css 有下几个目的：

  • 保护有用的浏览器默认样式而不是完全去掉它们
  • 一般化的样式：为大部分 HTML 元素提供
  • 修复浏览器自身的 bug 并保证各浏览器的一致性
  • 优化 CSS 可用性：用一些小技巧
  • 解释代码：用注释和详细的文档来
什么是 FOUC(Flash of Unstyled Content)？ 如何来避免 FOUC？
  • 当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象： 没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效”，简称为 FOUC
  • 产生原因：当样式表晚于结构性 html 加载时，加载到此样式表时，页面将停止之前的渲染。
  • 等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。
  • 解决方法：使用 link 标签将样式表放在文档 head
介绍使用过的 CSS 预处理器？
  • CSS 预处理器基本思想：为 CSS 增加了一些编程的特性（变量、逻辑判断、函数等）
  • 开发者使用这种语言进行进行 Web 页面样式设计，再编译成正常的 CSS 文件使用
  • 使用 CSS 预处理器，可以使 CSS 更加简洁、适应性更强、可读性更佳，无需考虑兼容性
  • 最常用的 CSS 预处理器语言包括：Sass（SCSS）和 LESS
CSS 优化、提高性能的方法有哪些？
  • 多个 css 合并，尽量减少 HTTP 请求
  • 将 css 文件放在页面最上面
  • 移除空的 css 规则
  • 避免使用 CSS 表达式
  • 选择器优化嵌套，尽量避免层级过深
  • 充分利用 css 继承属性，减少代码量
  • 抽象提取公共样式，减少代码量
  • 属性值为 0 时，不加单位
  • 属性值为小于 1 的小数时，省略小数点前面的 0
  • css 雪碧图
浏览器是怎样解析 CSS 选择器的？

浏览器解析 CSS 选择器的方式是从右到左

在网页中的应该使用奇数还是偶数的字体？

在网页中的应该使用“偶数”字体：

  • 偶数字号相对更容易和 web 设计的其他部分构成比例关系
  • 使用奇数号字体时文本段落无法对齐
  • 宋体的中文网页排布中使用最多的就是 12 和 14
margin 和 padding 分别适合什么场景使用？
  • 需要在 border 外侧添加空白，且空白处不需要背景（色）时，使用 margin
  • 需要在 border 内测添加空白，且空白处需要背景（色）时，使用 padding
抽离样式模块怎么写，说出思路？

CSS 可以拆分成 2 部分：公共 CSS 和 业务 CSS：

  • 网站的配色，字体，交互提取出为公共 CSS。这部分 CSS 命名不应涉及具体的业务
  • 对于业务 CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的 CSS
元素竖向的百分比设定是相对于容器的高度吗？

元素竖向的百分比设定是相对于容器的宽度，而不是高度

全屏滚动的原理是什么？ 用到了 CSS 的那些属性？
  • 原理类似图片轮播原理，超出隐藏部分，滚动时显示
  • 可能用到的 CSS 属性：overflow:hidden; transform:translate(100%, 100%); display:none;
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？
  • 响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
  • 基本原理是利用 CSS3 媒体查询，为不同尺寸的设备适配不同样式
  • 对于低版本的 IE，可采用 JS 获取屏幕宽度，然后通过 resize 方法来实现兼容：
$(window).resize(function () {
    screenRespond();
});

screenRespond();

function screenRespond(){

    var screenWidth = $(window).width();

    if(screenWidth <= 1800){
        $("body").attr("class", "w1800");
    }

    if(screenWidth <= 1400){
        $("body").attr("class", "w1400");
    }

    if(screenWidth > 1800){
        $("body").attr("class", "");
    }
}
什么是视差滚动效果，如何给每页做不同的动画？
  • 视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验
  • 一般把网页解剖为：背景层、内容层和悬浮层。当滚动鼠标滚轮时，各图层以不同速度移动，形成视差的

实现原理

  • 以 “页面滚动条” 作为 “视差动画进度条”
  • 以 “滚轮刻度” 当作 “动画帧度” 去播放动画的
  • 监听 mousewheel 事件，事件被触发即播放动画，实现“翻页”效果
a 标签上四个伪类的执行顺序是怎么样的？

link > visited > hover > active

伪元素和伪类的区别和作用？

伪元素:在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

伪类: 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}
::before 和 :after 中双冒号和单冒号有什么区别？
  • 在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
  • 伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after
  • 后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
  • 由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
  • 综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容 IE 的老语法
如何修改 Chrome 记住密码后自动填充表单的黄色背景？
  • 产生原因：由于 Chrome 默认会给自动填充的 input 表单加上 input:-webkit-autofill 私有属性造成的
  • 解决方案 1：在 form 标签上直接关闭了表单的自动填充：autocomplete=“off”
  • 解决方案 2：input:-webkit-autofill { background-color: transparent; }

input [type=search] 搜索框右侧小图标如何美化？

input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;
  background-size: 15px 15px;
}
网站图片文件，如何点击下载？而非点击预览？
<a href="logo.jpg" download>下载</a> <a href="logo.jpg" download="网站LOGO" >下载</a>
iOS safari 如何阻止“橡皮筋效果”？
  $(document).ready(function(){
      var stopScrolling = function(event) {
          event.preventDefault();
      }
      document.addEventListener('touchstart', stopScrolling, false);
      document.addEventListener('touchmove', stopScrolling, false);
  });
你对 line-height 是如何理解的？
  • line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
  • 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
  • 一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
  • 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
  • line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会
line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）
  • 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
  • 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
  • 百分比：将计算后的值传递给后代
设置元素浮动后，该元素的 display 值会如何变化？

设置元素浮动后，该元素的 display 值自动变成 block

怎么让 Chrome 支持小于 12px 的文字？
  .shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }
让页面里的字体变清晰，变细用 CSS 怎么做？（IOS 手机浏览器字体齿轮设置）
  -webkit-font-smoothing: antialiased;
font-style 属性 oblique 是什么意思？

font-style: oblique; 使没有 italic 属性的文字实现倾斜

如果需要手动写动画，你认为最小时间间隔是多久？

16.7ms 多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔: 1s / 60 * 1000 ＝ 16.7ms

overflow: scroll 时不能平滑滚动的问题怎么处理？

监听滚轮事件，然后滚动到一定距离时用 jquery 的 animate 实现平滑效果。

一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度
  • 方案 1： .sub { height: calc(100%-100px); }
  • 方案 2： .container { position:relative; } .sub { position: absolute; top: 100px; bottom: 0; }
  • 方案 3： .container { display:flex; flex-direction:column; } .sub { flex:1; }
CSS 中类 class 和 id 的区别

对于 CSS 而言，id 和 class 都是选择器，唯一不同的地方在于权重不同。如果只说 CSS，上面那一句话就讲完了。拓展出来，对于 html 而言，id 和 class 都是 dom 元素的属性值。不同的地方在于 id 属性的值是唯一的，而 class 属性值可以重复。id 还一个老特性是锚点功能，当浏览器地址栏有一个#xxx，页面会自动滚动到 id=xxx 的元素上面。

更直接的：id 给 js 用，class 给 css 用（趋势）

如何优化网页的打印样式
<link rel="stylesheet" type="text/css" media="screen" href="xxx.css" />

其中 media 指定的属性就是设备，显示器上就是 screen，打印机则是 print，电视是 tv，投影仪是 projection。

 <link rel="stylesheet" type="text/css" media="print" href="yyy.css" />

但打印样式表也应有些注意事项：

  • 打印样式表中最好不要用背景图片，因为打印机不能打印 CSS 中的背景。如要显示图片，请使用 html 插入到页面中。
  • 最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用 pt 和 cm。
  • 隐藏掉不必要的内容。（@print div{display:none;}）
  • 打印样式表中最好少用浮动属性，因为它们会消失。
请问为何要使用 transform 而非 absolute positioning，或反之的理由？为什么？
  • 使用 transform 或 position 实现动画效果时是有很大差别。
  • 使用 transform 时，可以让 GPU 参与运算，动画的 FPS 更高。
  • 使用 position 时，最小的动画变化的单位是 1px，而使用 transform 参与时，可以做到更小（动画效果更加平滑）
  • 功能都一样。但是 translate 不会引起浏览器的重绘和重排，这就相当 nice 了。

反之

请解释 CSS sprites，以及你要如何在页面或网站中实现它
  • CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。
  • CSS Sprites 为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片。
你熟悉 SVG 样式的书写吗？
SVG 等效的 CSS
fill background-color 或 color
fill-opacity background-color 或 color 设置 rgba/hsla
opacity opacity
stroke border-color
stroke-width border-thickness
stroke-opacity border-color 设置 rgba
rx, ry border-radius

下面的属性在 SVG 和 CSS 中是一样的，只是在 SVG 的 transformations 和 dimensions 中稍有区别：

  • font-family, font-size, font-style, font-variant 和 font-weight
  • width 和 height
  • scale, rotate, skew

参考链接： 基本的 SVG 样式属性

如果设计中使用了非标准的字体，你该如何去实现？
  • 用图片代替
  • web fonts 在线字库
  • @font-face

参考链接：如果设计中使用了非标准的字体，你该如何去实现？

CodeFarmer___
发布了64 篇原创文章 · 获赞 15 · 访问量 1万+
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_44317018/article/details/105672970
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022