整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS常考知识点

章介绍一下CSS的知识点,CSS的东西很多,下面这些是比较高频的考点,希望对你有所帮助:

2.1 常用选择器

面试官:请介绍一下常用的选择器及其优先级吧(基础题)

在CSS中,选择器是一种模式,用于选择需要添加样式的元素。常用的选择器按优先级从高往低分别是:

  • ID选择器(优先级最高,一般用于定义容器骨架,很少用于样式选择)
  • 类选择器(class selectors) (例如.example)、属性选择器(attributes selectors)(例如[type="radio"])、伪类(pseudo-classes)(例如:hover
  • 类型选择器(type selectors)(例如 h1)和 伪元素(pseudo-elements)(例如::before
  • 通配选择符(universal selector)()、*关系选择符(combinators) (+, >, ~, ' ') 和 **否定伪类(negation pseudo-class)(:not()) 对优先级没有影响(但是,在 :not()内部声明的选择器是会影响优先级)

当然,除了以上这些。给元素添加的内联样式 (例如 style="font-weight:bold") 总会覆盖外部样式表的任何样式 ,因此可看作是具有最高的优先级

面试官:复杂的项目里往往会遇到样式给覆盖的问题,解决此类问题行之有效方法有哪些呢?(拓展题)

最简单的方法是给这个样式后面增加 !important,这样该样式的声明将覆盖任何其他声明,但是使用 !important 是一个坏习惯,应该尽量避免,因为这破坏了样式表中固有的级联规则使得调试找bug变得更加困难了。当两条相互冲突的带有!important规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用,因此我推荐的方法有2个:

  1. 利用CSS级联属性,给该元素声明一个优先级更高的选择器,如:.example span {}span加个 .text的类: .example .text {}
  2. 增加一个或多个其他元素,使选择器变得更加具体,并获得更高的优先级,如 .example .text {} 改成 .example > div > .text {}

面试官:刚提到了!important的弊端,那我们什么时候可以使用!important呢?(发散题)

这个题目是个发散题,一般人很难答得全,其实有两种情况我们可以使用 !important

  1. 一种情况是你的网站上有一个设定了全站样式的CSS文件,同时你(或是你同事)写了一些很差的内联样式。在这种情况下,你就可以在你全局的CSS文件中写一些!important的样式来覆盖掉那些直接写在元素上的行内样式。
  2. 第二种情况是已经给某个样式加持了优先级非常高的选择器,在无法改HTML结构的情况下,可以使用 !important来做覆盖。

2.2 布局常用单位

面试官:请列举一下我们css布局常用的单位及区别(基础题)

  • px:绝对单位,页面按精确像素展示
  • %:相对单位,根据父容器进行百分比计算
  • em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值
  • rem:相对单位,可理解为 root em, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持

2.3 块级和行内元素

面试官:请简单介绍一下块级元素和行内元素的区别,并分别举例5个(基础题)

块级元素与行内元素有几个关键区别:

- 格式:默认情况下,块级元素会新起一行
- 内容模型:一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构

常见的块级元素如 div、header、footer、ul、p标签等;常见的行内元素如 span、strong、input、label、i标签等

2.4 常用定位方式

面试官:css里定位方式有哪几种,它们各有什么用途呢?(基础题)

CSS里共有5种定位方式,它们分别是:

  • static(正常文档流定位): 正常文档流定位,此时 top, right, bottom, leftz-index 属性无效,块级元素从上往下纵向排布,行级元素从左向右排列
  • relative(相对定位): 相对原文档流布局进行偏移,设置了相对定位的元素可以脱离文档流移动。往往我们要微调一些 内联图标的位置时会用到,或需要对该元素做z-index分层
  • absolute(绝对定位): 相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。弹层内一些固定在某处的元素 往往通过绝对定位来实现,比如关闭按钮
  • fixed(固定定位): 相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变,比如那种回到顶部的按钮一般都是用此定位方式
  • sticky(粘性定位):特性近似于relativefixed的合体,经常用于实现垂直滚动 "吸顶" 效果

面试官:元素设置了非static定位后可以用z-index做分层,说一下你对z-index的理解 (发散题)

CSS 中的z-index属性控制重叠元素的垂直叠加顺序,类似PS的图层概念。默认元素的z-index为0,我们可以修改z-index来控制元素的图层位置,而且z-index只能影响设置了position值的元素,我们可以设置z-index为负数去隐藏某个图层

面试官:上面提到如果要微调一个行内元素的垂直位置,会使用relative布局,除此之外还有别的方法吗?(基础题)

这个问题很好回答,CSS3提供了transform属性让我们很方便对一个元素进行缩放、旋转和平移,我们可以使用 translate(x, y)来对元素的位置进行微调。

面试官:相比较relative,为什么现在更推荐使用translate来改变位置呢?

答案是改变transformopacity不会触发浏览器重新布局(reflow)或重绘(repaint),只会触发复合(compositions)。而改变绝对定位会触发重新布局,进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层,但改变绝对定位会使用到 CPU。 因此translate()更高效,可以缩短平滑动画的绘制时间。

2.5 常用布局方案

面试官:介绍一下你经常使用的一些布局方案吧(基础题)

常用布局方案有 静态布局浮动布局百分比流式布局inline-block水平布局flex弹性布局响应式布局rem布局等。现在最常用的是 flex弹性布局 和 rem布局。

面试官:实现垂直居中你一般有哪几种方案?(基础题)

最简单的方法是用使用 flex布局:

<div class="container">
  <div class="content">内容</div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

或者利用定位:

.container {
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

或者采用BFC + transform:

.container {
  width: 500px;
  height: 500px;
  overflow: hidden; /*使容器成为一个BFC*/
}

.content {
  width: 100px;
  height: 100px;
  margin-top: 50%;
  transform: translateY(-50%);
}

2.6 层叠上下文(BFC)

面试官:正常流式布局下,我们如果给2个相邻的块级元素同时设置margin-topmargin-bottom10px,他们实际会产生多少margin呢?(基础题)

这个是日常做布局时经常会遇到的问题,答案当然是 10px,不过很多人是知其然却不知其所以然,所以就算这个答对了,面试官往往也不会“罢休”

面试官:OK,回答正确。可以继续讲一下出现这个边距折叠的原因和如何避免这个问题吗?(拓展题)

常规流布局时,盒子都是垂直排列,两者之间的间距由各自的外边距所决定,但不是二者外边距之和。在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算:

  • 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时,折叠结果是两者的相加的和。

至于如何避免这个问题,就需要引出 块级格式化上下文(Block Formatting Context,BFC) 的概念,外边距折叠(Margin collapsing)只会发生在属于同一BFC的块级元素之间,因此我们只需把两个块级元素设置为单独的BFC,就能解决这个问题,最简单的方式是给两个区块设置 overflow: hidden;

面试官:OK,回答正确,不过除了解决外边距塌陷, 你知道BFC还有其他的用途吗?(发散题)

除了解决外边距塌陷,应用BFC还能让 浮动元素的容器也能被撑开 :浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。如果一个没有高度或者heightauto的容器的子元素是浮动元素,则该容器的高度是不会被撑开的。我们可以给容器加一个 overflow: hidden; 来解决这个问题:

.container {
  height: auto;
  border: 1px solid #ddd;
  overflow: hidden;   /*使容器成为一个BFC*/
}

.child {
  float: right;
  width: 200px;
  height: 100px;
  background: #f0f0f0;
}

不过现在浮动不常用了,利用BFC还有其他2个常用的用途:

  • 两栏布局,防止文字环绕等
  • 防止元素塌陷

拓展:BFC的触发条件

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。下面这些条件会触发BFC:

  • 根元素(<html>)
  • 浮动元素(元素的 float 不是 none
  • 绝对定位元素(元素的 positionabsolutefixed
  • 行内块元素(元素的 displayinline-block
  • 表格单元格(元素的 displaytable-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 displaytable-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 displaytabletable-rowtable-row-grouptable-header-grouptable-footer-group(分别是HTML tablerowtbodytheadtfoot的默认属性)或 inline-table
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为layoutcontentpaint 的元素
  • 弹性元素(displayflexinline-flex元素的直接子元素)
  • 网格元素(displaygridinline-grid 元素的直接子元素)
  • 多列容器(元素的 column-countcolumn-width 不为 auto,包括 column-count 为 1)
  • column-spanall 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中。

更多BFC的知识欢迎点击这个 传送门 进行查看

2.7 媒体查询

面试官:请讲一下你对媒体查询的理解以及它的作用(基础题)

媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度、高度和颜色。媒体查询,添加自CSS3,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身, 非常适合web网页应对不同型号的设备而做出对应的响应适配(即响应式布局)

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

2.8 盒模型

面试官:请简单介绍一下你对盒模型的理解(基础题)

当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)。CSS 决定这些盒子的大小、位置以及属性(例如颜色、背景、边框尺寸…)。盒模型由 content(内容)、padding(内边距)、border(边框)、margin(外边距)组成:

2.9 伪类和伪元素

面试官:请介绍一下什么是伪类和伪元素,并介绍一下他们的区别(基础题)

  • 伪类(pseudo-class) 是一个以冒号(:)作为前缀,被添加到一个选择器末尾的关键字,当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类
  • 伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过::before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中

他们的区别可以概括为:伪类是通过在元素选择器上加入伪类改变元素状态,而伪元素通过对元素的操作进行对元素的改变

2.10 动画与过渡

面试官:CSS动画和过渡有什么区别吗?(基础题)

  • 过渡 Transition:
    • 需要事件触发,比如 hoverfocuschecked , js修改等
    • 过渡效果是一次性的,无法循环
    • 只能定义开始和结束状态,不能定义中间状态
    • 控制粒度比较粗糙,
    • 动画 Animation:
      • 不需要事件触发
      • 显示地随着时间的流逝,周期性的改变元素的css属性值。区别于一次性
      • 通过百分比来定义过程中的不同形态,可以很细腻

总得来说,transition更加粗一点,比如过渡的速度进行了封装,可以控制是匀速改变还是贝塞尔曲线之类的。而animation提供的keyframe方法,可以手动去指定每个阶段的属性。此外animation还封装了循环次数,动画延迟等功能,配置自由且功能强大。

面试官:CSS3如何实现逐帧动画吗?(拓展题)

CSS3 可以使用 animation-timing-function 的阶梯函数 steps(number_of_steps, direction) 来实现逐帧动画的连续播放。并配合雪碧图,通过更改 background-image 的值实现帧的切换。

本文由博客一文多发平台 OpenWrite 发布!

文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一样长。

作为一个技术人员,手上备上两款富文本编辑器还是很有用的,指不定那个项目就要集成一个进去。

到时候现找现用那可就费功夫了,毕竟从开发上讲,每个富文本编辑器的用法都是有区别的。

下面是我收集的一些业界比较受欢迎的富文本编辑器,喜欢的朋友、用过的朋友可以一起看看,一起探讨。

1、wangEditor

网址:http://www.wangeditor.com/

基于JavaScript和css开发的 Web富文本编辑器, 轻量、简洁、界面美观、易用、开源免费。

兼容性

  • 兼容主流的 PC 浏览器,如 Chrome Firefox Safari Edge 等
  • 暂不支持移动端编辑(支持移动端查看)
  • 不再支持 IE 浏览器

2、TinyMCE

网址:https://www.tiny.cloud/docs/demo/full-featured/

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。

功能齐全,界面美观,就是文档是英文的,对开发人员英文水平有一定要求。

3、百度ueditor

网址:https://github.com/fex-team/ueditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,功能齐全,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码,缺点是已经没有更新了。

4、kindeditor

网址:http://kindeditor.net/demo.php

KindEditor 是一套开源的在线html编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、php、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

主要特点

快速:体积小,加载速度快

开源:开放源代码,高水平,高品质

底层:内置自定义 DOM 类库,精确操作 DOM

扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能

风格:修改编辑器风格非常容易,只需修改一个 CSS 文件

兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera

5、Textbox

网址:https://www.textbox.io/

Textbox是一款极简但功能强大的在线文本编辑器,支持桌面设备和移动设备。主要功能包含内置的图像处理和存储、文件拖放、拼写检查和自动更正。

此外,该工具还实现了屏幕阅读器等辅助技术,并符合WAI-ARIA可访问性标准。

6、CKEditor

网址:https://ckeditor.com/ckeditor-5/demo/

CKEditor官方版是一款专业专业的在线文字编辑器,软件支持各种不同的浏览器,可以让用户们轻松在线编辑,CKEditor5官方版软件体积非常小巧,使用起来也十分方便快捷,还能与不同的编程语言相结合,是大家编辑网页代码的必备工具。

7、quill

网址:https://quilljs.com/

Quill是轻型的编辑器,样式一般(黑白风),功能中等,它的代码高亮功能比较强,同样支持行内编辑模式,工具条可自定义。

开源免费,项目活跃,一直有人维护。

8、simditor

网址:https://simditor.tower.im/

simditor是Tower平台使用的富文本编辑器,是一款轻量化的编辑器,界面简约,功能实用,插件不是很多,功能要求不高的可以使用。

虽然是国内出品,但文档是英文的。开源免费。

9、summernote

网址:https://summernote.org/

summernote是一款轻量级的富文本编辑器,比较容易上手,使用体验流畅,支持各种主流浏览器。

summernote开源免费,该项目一直比较活跃,一直都有人在维护。summernote同样依赖于jquery和bootstrap,使用前先引入这两项。

10、jodit

网址:https://xdsoft.net/jodit/

Jodit是一款使用纯TypeScript编写的(无需使用其他库),美观实用的所见即所得(WYSIWYG)开源富文本编辑器,支持中文,超强自定义。

11、Editor.md

网址:https://pandao.github.io/editor.md/

功能非常丰富的编辑器,左端编辑,右端预览,非常方便,完全免费。

主要特性

  • 支持“标准”Markdown / CommonMark和Github风格的语法,也可变身为代码编辑器;
  • 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
  • 支持ToC(Table of Contents)、Emoji表情、Task lists、@链接等Markdown扩展语法;
  • 支持TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
  • 支持识别和解析HTML标签,并且支持自定义过滤标签解析,具有可靠的安全性和几乎无限的扩展性;
  • 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
  • 兼容主流的浏览器(IE8+)和Zepto.js,且支持iPad等平板设备;

12、froala Editor

网址:https://www.froala.com/wysiwyg-editor

界面非常好看,功能非常强大,非常好用(非免费,可破解)

13、eWebEditor

网址:http://www.ewebeditor.net/

eWebEditor外观和使用风格都和微软 Word很类似,功能很多。工具条可以定制,运行速度很快。

导入文件接口很多,支持word、excel、pdf、ppt直接导入,目前版本不支持代码高亮,不适合纯技术平台使用,适合内容编辑人员使用。

eWebEditor有很长的历史了,是典型的传统富文本编辑器,不论是界面,还是功能都比较传统。eWebEditor是收费的,但也有免费的精简版,精简版没有后台功能。

14、dhtmlxEditor

网址:https://dhtmlx.com/docs/products/dhtmlxRichText/

DHTMLX组件是一整套基于js的UI库,功能强大,其中包含编辑器dhtmlxEditor。

该编辑器可以直接集成到Angular,react和vue.js框架中,该编辑器还同时支持Markdown和富文本。

支持普通视图和类似word一样的页面视图,支持全屏幕,工具支持自定义,包括工具条颜色和样式等。

dhtmlxEditor分为免费版和收费版,免费版具有绝大多数功能,而且免费版是开源的你可以在代码级别随便扩充。

最后

富文本编辑器产品真的非常多,以上只是本人接触过的一些,相信还有很多很好的富文本存在,其实也没必要全都试一遍,只有最适合自己的,才是最好的。

种3D盒子收起来的动画效果是怎么实现的?1分钟就可以教会你。

经过前两节课的学习,大家应该都知道给容器设置3D属性是编写3D动画的前提。

·首先给容器body设置3D动画属性。

·接下来肯定就是要写盒子了,盒子一般有6个面,聪明的各位肯定能够想到先写6个面用来展示盒子的6个平面,这种思路肯定是没有错的。借助动画的3D旋转、3D位移等等属性,肯定可以将6个面去组合组装成一个盒子。但是想要让6个DIV组成盒子进行立体旋转,没有一个平面的支撑其实是白费力气。

·如果先写一个div作为立方体盒子的参考平面,让平面带动6个面进行旋转位移,就变得非常简单了。首先在盒子容器中添加6个div作为盒子6个面,但是记得把盒子的最后两个面用同一个div包裹起来。至于为什么,一会来详细讲解。先看一下实现的效果,好像还不错。

·然后去拆解刚才的动画动作,通过代码的旋转位移实现一个正方体。利用动画属性将组成正方体的平面位移旋转动作进行拆解,利用@keyframes进行逐帧延迟调用,这样就能实现一个完整的动画的演示。

·一个正方体的动画折叠动作就已经写完了,回顾一下最后两个面的折叠。如果想要让两个面变成一个协调的整体,是需要将最后两个面一起产生折叠动作的,拆分开来去写两个平面,无法实现这种合并动画的效果。

·最后给整个平面添加上随机的角度旋转和刚才的折叠动画进行组合,一个完整的盒子折叠动画就完成了。

点赞&关注AUVWEB。