weixin_39607865
weixin_39607865

java前端div浮动靠左_前端硬核面试专题之 CSS 55 问

前言

本文讲解前端面试的 CSS 的内容。

复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！

注意：文章的题与题之间用下划线分隔开，答案仅供参考。

笔者技术博客首发地址  GitHub，欢迎关注。

CSS

盒子模型的理解 ?

  • 标准模式和混杂模式(IE)。

  • 在标准模式下浏览器按照规范呈现页面；

  • 在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。

  • 混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

CSS 盒子模型具有内容 (content)、填充 (padding)、边框 (border)、边界 (margin)这些属性。

我们所说的 width，height 指的是内容 (content) 的宽高。

一个盒子模型的中：

  • 宽度 = width+ pdding(宽) + border(宽)。

  • 高度 = height + padding(高) + border(高)。

如何在页面上实现一个圆形的可点击区域 ？

  • 1、map+area 或者 svg

  • 2、border-radius

  • 3、纯 js 实现，需要求一个点在不在圆上简单算法、获取鼠标坐标等等

实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

div>

CSS 中哪些属性可以同父元素继承 ?

继承：(X)HTML 元素可以从其父元素那里继承部分 CSS 属性，即使当前元素并没有定义该属性，比如：color，font-size。

box-sizing 常用的属性有哪些 ？分别有什么作用 ？

常用的属性：content-box、 border-box 、inherit

作用

  • content-box(默认)：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

  • border-box：元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

页面导入样式时，使用 link 和 @import 有什么区别 ？

  • link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS(是一种描述和同步网站内容的格式，是使用最广泛的 XML 应用), 定义 rel 连接属性等作用；

  • 而 @import 是 CSS 提供的，只能用于加载 CSS;

  • 页面被加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载;

  • import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题。

  • 总之，link 要优于 @import。

常见兼容性问题？

  • 浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的 *{margin: 0; padding: 0;} 来统一。

  • IE下 event 对象有 event.x，event.y 属性，而 Firefox 下没有。Firefox 下有 event.pageX，event.PageY 属性，而 IE 下没有。解决办法：var mx = event.x ? event.x : event.pageX;

  • Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

  • 超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active 了，解决方法是改变 CSS 属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法 ？

一个块级元素如果没有设置 height，那么其高度就是由里面的子元素撑开，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，如果不清除浮动，父元素会出现高度不够，那样如果设置 border 或者 background 都得不到正确的解析。

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为 0(高度塌陷)。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

清除浮动的方式

  • 父级 div 定义 height，原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。

  • 结尾处加空 div 标签 clear: both，原理：添加一个空 div，利用 css 提高的 clear: both 清除浮动，让父级 div 能自动获取到高度。

  • 父级 div 定义 overflow: hidden，  原理：必须定义 width 或 zoom: 1，同时不能定义 height，使用 overflow: hidden 时，浏览器会自动检查浮动区域的高度

  • 父级 div 也一起浮动 。

  • 父级 div 定义 display: table 。

  • 父级 div 定义 伪类 :after 和 zoom 。

  • 结尾处加 br 标签 clear: both， 原理：父级 div 定义 zoom: 1 来解决 IE 浮动问题，结尾处加 br 标签 clear: both。

总结：比较好的是倒数第 2 种方式，简洁方便。

如何保持浮层水平垂直居中 ？

一、水平居中

(1)行内元素解决方案

只需要把行内元素包裹在一个属性 display 为 block 的父层元素中，并且把父层元素添加如下属性即可。

.parent {
      
text-align: center;
}

(2)块状元素解决方案

.item {
      
/* 这里可以设置顶端外边距 */
margin: 10px auto;
}

(3)多个块状元素解决方案将元素的 display 属性设置为 inline-block，并且把父元素的 text-align 属性设置为 center 即可:

.parent {
      
text-align:center;
}

(4)多个块状元素解决方案

使用 flexbox 布局，只需要把待处理的块状元素的父元素添加属性 display: flex 及 justify-content: center 即可。

.parent {
      
display: flex;
justify-content: center;
}

二、垂直居中

(1)单行的行内元素解决方案

.parent {
      
background: #222;
height: 200px;
}

/* 以下代码中，将 a 元素的 height 和 line-height 设置的和父元素一样高度即可实现垂直居中 */
a {
      
height: 200px;
line-height:200px;
color: #FFF;
}

(2)多行的行内元素解决方案组合

使用 display: table-cell 和 vertical-align: middle 属性来定义需要居中的元素的父容器元素生成效果，如下：

.parent {
      
background: #222;
width: 300px;
height: 300px;
/* 以下属性垂直居中 */
display: table-cell;
vertical-align: middle;
}

(3)已知高度的块状元素解决方案

.item{
      
position: absolute;
top: 50%;
margin-top: -50px;  /* margin-top值为自身高度的一半 */
padding:0;
}

三、水平垂直居中

(1)已知高度和宽度的元素解决方案 1

这是一种不常见的居中方法，可自适应，比方案 2 更智能，如下：

.item{
      
position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
}

(2)已知高度和宽度的元素解决方案 2

.item{
      
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;  /* 设置margin-left / margin-top 为自身高度的一半 */
margin-left: -75px;
}

(3)未知高度和宽度元素解决方案

.item{
      
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);  /* 使用 css3 的 transform 来实现 */
}

(4)使用 flex 布局实现

.parent{
      
display: flex;
justify-content: center;
align-items: center;
/* 注意这里需要设置高度来查看垂直居中效果 */
background: #AAA;
height: 300px;
}

position 、float 和 display 的取值和各自的意思和用法

position

  • position 属性取值：static(默认)、relative、absolute、fixed、inherit、sticky。

  • postision：static；始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让 top，right，bottom，left 的值失效。在切换的时候可以尝试这个方法。

  • 除了 static 值，在其他三个值的设置下，z-index 才会起作用。确切地说 z-index 只在定位元素上有效。

  • position：relative 和 absolute 都可以用于定位，区别在于前者的 div 还属于正常的文档流，后者已经是脱离了正常文档流，不占据空间位置，不会将父类撑开。定位原点 relative 是相对于它在正常流中的默认位置偏移，它原本占据的空间任然保留；absolute 相对于第一个 position 属性值不为 static 的父类。所以设置了 position：absolute，其父类的该属性值要注意，而且 overflow：hidden 也不能乱设置，因为不属于正常文档流，不会占据父类的高度，也就不会有滚动条。

  • fixed 旧版本 IE 不支持，却是很有用，定位原点相对于浏览器窗口，而且不能变。常用于 header，footer 或者一些固定的悬浮 div，随滚动条滚动又稳定又流畅，比 JS 好多了。fixed 可以有很多创造性的布局和作用，兼容性是问题。

  • position：inherit。规定从父类继承 position 属性的值，所以这个属性也是有继承性的，但需要注意的是 IE8 以及往前的版本都不支持 inherit 属性。

  • sticky ：设置了sticky 的元素，在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是 top、left 等属性无效)，当该元素的位置将要移出偏移范围时，定位又会变成 fixed，根据设置的 left、top 等属性成固定位置的效果。

float

  • float：left (或 right)，向左(或右)浮动，直到它的边缘碰到包含框或另一个浮动框为止。且脱离普通的文档流，会被正常文档流内的块框忽略。不占据空间，无法将父类元素撑开。

  • 任何元素都可以浮动，浮动元素会生成一个块级框，不论它本身是何种元素。因此，没有必要为浮动元素设置 display：block。

  • 如果浮动非替换元素，则要指定一个明确的 width，否则它们会尽可能的窄。什么叫替换元素 ？根据元素本身的特点定义的， (X)HTML中的 img、input、textarea、select、object 都是替换元素，这些元素都没有实际的内容。 (X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

display

  • display 属性取值：none、inline、inline-block、block、table 相关属性值、inherit。

  • display 属性规定元素应该生成的框的类型。文档内任何元素都是框，块框或行内框。

  • display：none 和 visiability：hidden 都可以隐藏 div，区别有点像 absolute 和 relative，前者不占据文档的空间，后者还是占据文档的位置。

  • display：inline 和 block，又叫行内元素和块级元素。表现出来的区别就是 block 独占一行，在浏览器中通常垂直布局，可以用 margin 来控制块级元素之间的间距(存在 margin 合并的问题，只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。)；而 inline 以水平方式布局，垂直方向的 margin 和 padding 都是无效的，大小跟内容一样，且无法设置宽高。inline 就像塑料袋，内容怎么样，就长得怎么样；block 就像盒子，有固定的宽和高。

  • inline-block 就介于两者之间。

  • table 相关的属性值可以用来垂直居中，效果一般。

  • flex

定位机制

上面三个属性都属于 CSS 定位属性。CSS 三种基本的定位机制：普通流、浮动、绝对定位。

css3 动画效果属性有哪些 ?

  • animation-name：规定需要绑定到选择器的 keyframe 名称。。

  • animation-duration：规定完成动画所花费的时间，以秒或毫秒计。

  • animation-timing-function：规定动画的速度曲线。

  • animation-delay：规定在动画开始之前的延迟。

  • animation-iteration-count：规定动画应该播放的次数。

  • animation-direction：规定是否应该轮流反向播放动画。

canvas 与 svg 的区别 ？

  • Canvas 是基于像素的即时模式图形系统，最适合较小的表面或较大数量的对象，Canvas 不支持鼠标键盘等事件。

  • SVG 是基于形状的保留模式图形系统，更加适合较大的表面或较小数量的对象。

  • Canvas 和 SVG 在修改方式上还存在着不同。绘制 Canvas 对象后，不能使用脚本和 CSS 对它进行修改。因为 SVG 对象是文档对象模型的一部分，所以可以随时使用脚本和 CSS 修改它们。

现在对两种技术做对比归纳如下：

Canvas

  1. 依赖分辨率

  2. 不支持事件处理器

  3. 弱的文本渲染能力

  4. 能够以 .png 或 .jpg 格式保存结果图像

  5. 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

  1. 不依赖分辨率

  2. 支持事件处理器

  3. 最适合带有大型渲染区域的应用程序(比如谷歌地图)

  4. 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)

  5. 不适合游戏应用

px 和 em 的区别 ？

  • px 像素(Pixel)。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

  • em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

  • 任意浏览器的默认字体高都是 16px。所有未经调整的浏览器都符合：1em = 16px。那么12px = 0.75em,10px = 0.625em。为了简化 font-size 的换算，需要在 css 中的 body 选择器中声明 Font-size = 62.5%，这就使 em 值变为 16px*62.5% = 10px, 这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的 px 数值除以 10，然后换上 em 作为单位就行了。

会不会用 ps 扣图，png、jpg、gif 这些图片格式解释一下，分别什么时候用。如何优化图像、图像格式的区别 ?

JPG 的特性

  • 支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。

  • 有损压缩会使图像数据质量下降，并且在编辑和重新保存 JPG 格式图像时，这种下降损失会累积。

  • JPG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。

PNG 的特性

  • 能在保证最不失真的情况下尽可能压缩图像文件的大小。

  • PNG 用来存储灰度图像时，灰度图像的深度可多到 16 位，存储彩色图像时，彩色图像的深度可多到 48 位，并且还可存储多到 16 位的 α 通道数据。

  • 对于需要高保真的较复杂的图像，PNG 虽然能无损压缩，但图片文件较大，不适合应用在 Web 页面上。

  • 另外还有一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用 PNG 格式进行存储，这样才能更好的保证设计品质。而其他一些内容元素，如广告 Banner、商品图片 等对质量要求不是特别苛刻的，则可以用 JPG 去进行存储从而降低文件大小。

GIF格式特点

  • 透明性: Gif 是一种布尔透明类型，既它可以是全透明，也可以是全不透明，但是它并没有半透明(alpha 透明)。

  • 动画：Gif 这种格式支持动画。

  • 无损耗性：Gif 是一种无损耗的图像格式，这也意味着你可以对 gif 图片做任何操作也不会使得图像质量产生损耗。

  • 水平扫描：Gif 是使用了一种叫作 LZW 的算法进行压缩的，当压缩 gif 的过程中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的 gif 图片比竖向的 gif 图片更加小。例如 50010 的图片比 10500 的图片更加小。间隔渐进显示：Gif 支持可选择性的间隔渐进显示

由以上特点看出只有 256 种颜色的 gif 图片不适合作为照片，它适合做对颜色要求不高的图形。

我们知道可以以外链的方式引入 CSS 文件，请谈谈外链引入 CSS 有哪些方式，这些方式的性能有区别吗 ？

CSS 的引入方式最常用的有三种

第一：外链式

这种方法可以说是现在占统治地位的引入方法。

如同 IE 与浏览器。这也是最能体现 CSS 特点的方法；

最能体现 DIV + CSS 中的内容离的思想，也最易改版维护，代码看起来也是最美观的一种。

第二：内部样式表

这种方法的使用情况要少的多，最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。

与第一种方法比起来，优弊端也明显。

优点：速度快，所有的 CSS 控制都是针对本页面标签的，没有多余的 CSS 命令；再者不用外链 CSS 文件。直接在文档中读取样式。

缺点：就是改版麻烦些，单个页面显得臃肿，CSS 不能被其他 HTML 引用造成代码量相对较多，维护也麻烦些采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进行复杂的维护工作。

第三：行内样式

认为 HTML 里不能出现 CSS 命令。其实有时候没有什么大不了。比如通用性差，效果特殊，使用 CSS 命令较少，并且不常改动的地方，使用这种方法反而是很好的选择。

第四、@import 引入方式