整合营销服务商

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

免费咨询热线：

为什么要学习HTML？HTML会过时吗？

编程有没有必要学 HTML 呢？这是编程初学者中非常普遍的问题，而且在网上意见分歧很大。关于初学者在学习 HTML 前的一些常见问题，编程狮W3Cschool整理了以下资料希望对你有所帮助：

学编程不需要学习HTML？

那些说不需要 HTML 知识的人要么不了解 Web 设计，要么别有用心。虽然现在哪怕不会 HTML 也有其他方法可以解决 web 设计相关问题，但绝大多数资深前端开发者还是会建议你最好还是要学习它的。

没有时间学习HTML？

通常了解基本知识只需要20到40分钟。花几个小时学习 w3cschool官网 的《HTML 教程 》和《HTML 微课 》，你就可以制作一个简单而完整的网页。如果你愿意每周花几个小时，学习几个月的 《前端开发体系课程 _ 》，那么您将对网站的工作方式有一个很好的了解。这种时间上的投资将获得很大的回报比。试想下，如果你本周花在学习上一小时，未来的工作上每个月都将永远节省一个小时。尽管投资回收期在开始时比较缓慢，但你最终可以只需要花费一小部分时间用来完成工作，你觉得值得吗？

编写HTML太慢？

这是劝退很多人的一个原因，但实际上这个问题是不存在的。因为大多数情况下我们不需要编写 HTML 代码，只需了解它即可。

我有一个很好的所见即所得编辑器，所以我不需要HTML

市面上有很多可视化的工具如 WYSIWYG 、Dreamweaver及现在越来越多的”低代码“云开发工具等，它可以帮助你更高效地工作。如前所述，你并不是要手动输入 HTML 代码，而是要了解 HTML 的工作原理。

例如：射钉枪能比锤子更快地帮助您建造房屋，但是如果你不知道如何搭建框架以及将钉子钉在何处，造出来的房屋很可能会倒塌。我们需要了解如何手动构造 HTML，然后使用所见即所得工具更快地工作。

PS：所见即所得的编辑器永远不会是完美的，总有时候是需要我们手动来调整 HTML。。

我不擅长学习计算机语言

放心，虽然我们时常把它称为语言，但其实 HTML 并不是一种编程语言（从技术上讲，HTML 被称为“mark up”语言，也就是标记语言，英文全称是“HyperText Markup Language”。）。从难度上讲，它就像是小孩子们的“密码”游戏。真正难点在于要学习的东西太多了，但是请记住，你不必全部都学会！只要按照自己的步调学习尽可能多的知识即可。

不要将费时与困难混淆。HTML 很耗时，但是并不难。另外，你不需要学会全部知识点，即使只花费几个小时来学习基本结构也将极大地帮助你。

HTML会过时吗？

不会。其他编程语言一直在发展中，并且很可能最终会取代 HTML，但是 HTML 将在很长一段时间内继续作为几乎所有网站的基础。在任何情况下，HTML 都会为您提供坚实的基础，然后再采用 XML 等新语言。

HTML对我而言太过局限了

如果您的目的是创建网页，那么很抱歉告诉你，无论你喜不喜欢，你只能选择 HTML，因为他是构成网络构成的基础。如果你真的想以其他格式（例如PDF）来传送，请注意，它并不是一个网页，所以它不能实现我们在网页中的一些常见功能。

以上就是编程狮W3Cschool为你整理的关于《为什么要学习HTML？HTML会过时吗？》的全部内容，现在你要开始学习 HTML 了吗？

多朋友想学一下网页制作，上网一看，只要涉及到网页制作，都离不开HTML这个词语，HTML是HyperText Markup Language的简称，想学习HTML语言，先得了解一些基本知识，今天这边内容可以作为学习HTML的菜鸟教程第一课。

HTML是什么？

一般我们说HTML是指超文本标记语言，英文名称为HyperText Markup Language，简称HTML，它是目前互联网上应用最广泛的语言。

如何查看HTML？

拿最常见的网页为例，如果用大家熟悉的IE浏览器的话，直接在网页上点右键，选择“查看源”即可查看当前网页的HTML源码；如果是其他浏览器的话，多数情况下点击右键，选择“查看源码”或者类似“查看网页源代码”这样的选项即可查看。

当然也可以通过专业的网页制作软件以及各种文本编辑器来查看。

HTML有什么用？

HTML语言可以方便地将网络上存储于不同位置的文字、图片、声音、视频等内容组织起来，方便用户浏览。对于我们来说，HTML是学习网页制作的基本功，熟练掌握HTML这项基本功，可以为以后的学习和工作打下良好的基础。

HTML如何入门？

要学习任何编程语言，都不好好高骛远，HTML的入门很简单，但是也要遵循学习的基本步骤，选择一本入门书籍，循序渐进地去学习每一张的内容。一边学习，一边查看网页代码对照来学，提升入门速度。

HTML案例

下面就是最基本的HTML案例，在这个案例中，用的是HTML5，

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  • <title> 描述了网页的标题
  • <body> 元素包含了可见的页面内容，因为下面是最简单的案例，所以只有几行，实际网页一般都有很多行。
  • <h1> 定义一个大标题
  • <p> 元素定义一个段落，也就是大家常说的分段。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

如何编辑HTML?

这个就很多了 ，比如最出名的Dreamweaver，当然如果熟练之后，可以选择任意自己喜欢的编辑器，一些小的改动或者一小段代码的话，也可以用各种常见的文本编辑器来处理，比如我们在wodows系统上常见的记事本，总之只要自己觉得方便就好。

总结

以上是学习HTML菜鸟教程的第一课，首先保持一个良好的心态来学习，有好的心态，知识方面只要循序渐进，学会就是水到渠成的事情了 。

.CSS盒模型，在不同浏览器的差异

css 标准盒子模型

css盒子模型 又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图：

图中的内层是content依次是padding border margin。通常我们设置背景时就是内容、内边距、边框这三部分，如果border设置颜色的时候会显示boder颜色当boder颜色是透明时会显示background-color的颜色。而该元素的子元素的是从content开始的。而外边距是透明的，不会遮挡其他元素。

元素框的总宽度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right;

元素框的总高度=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom;

IE盒子模型

IE盒子模型如下图：

图中的内层是content依次是content padding border。通常我们设置背景时就是内容、内边距、边框这三部分。而外边距是透明的，不会遮挡其他元素。

元素框的总宽度=width（padding-left+padding-right+border-left+border-right)；

元素框的总高度=height（padding-top+padding-bottom+border-top+border-bottom）;

两个模型宽度和高度的计算（是不一样的）

w3c中的盒子模型的宽:包括margin+border+padding+width; width:margin*2+border*2+padding*2+width; height:margin*2+border*2+padding*2+height;

iE中的盒子模型的width:包括border+padding+width;

上面的两个宽度相加的属性是一样的。因此我们应该选择标准盒子模型，在网页的顶部加上 DOCTYPE 声明。

2.CSS所有选择器及其优先级、使用场景，哪些可以继承，如何运用at规则

css选择器种类有：

通用选择器：*

id选择器：#header{}

class选择器：.header{}

元素选择器：div{}

子选择器：ul > li{}

后代选择器：div p{}

伪类选择器：:hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等,例如a:hover{}

伪元素选择器: :after、:before等,例如：li:after

属性选择器: input[type="text"]

组合选择器：E,F/E F（后代选择器）/E>F（子元素选择器）/E+F（直接相邻元素选择器----匹配之后的相邻同级元素）/E~F（普通相邻元素选择器----匹配之后的同级元素）

层次选择器：p~ul 选择前面有p元素的每个ul元素

css选择器优先级：

  • 选择器优先级由高到低分别为：
    !important > 作为style属性写在元素标签上的内联样式 >id选择器>类选择器>伪类选择器>属性选择器>标签选择器> 通配符选择器（* 应少用）>浏览器自定义；
  • 当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
    1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
    2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
    3、第三级的优先属性由<link/>标签所引入的样式表定义。
    4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
    5、第五级优先的样式有用户设定。
    6、最低级的优先权由浏览器默认。

使用场景：

  • class使用场景：需要某些特定样式的标签则放在同一个class中，需要此样式的标签可再添加此类。（class不可被javascript中的GetElementByID函数所调用）
  • id使用场景：1、根据提供的唯一id号快速获取标签对象，如：document.getElementById(id) ；2、用于充当label标签for属性的值：示例：<label for='userid'>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点

CSS哪些属性可以继承？css继承特性主要是指文本方面的继承(比如字体、颜色、字体大小等)，盒模型相关的属性基本没有继承特性。

不可继承的：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

所有元素可继承的：
visibility和cursor

终极块级元素可继承的：
text-indent和text-align

内联元素可继承的：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

列表元素可继承的：
list-style、list-style-type、list-style-position、list-style-image


常用at规则及使用示例：

  • @charset
  • @import
  • @namespace
  • @document
  • @font-face
  • @keyframes
  • @media
  • @page
  • @supports
/*定义字符集*/
@charset "utf-8"
/*导入css文件*/
@import "base.css"
/*自定义字体*/
@font-face {}
/*声明CSS3 animation动画关键帧*/
@keyframes fadeIn {}
/*媒体查询*/
@media{}

3.CSS伪类和伪元素有哪些，它们的区别和实际应用

伪类的例子有：

:hover

:active

:first-child

:visited

等。

伪元素的例子有：

:first-line

:first-letter

:after

:before

伪类和伪元素的根本区别在于：

它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。

伪元素在一个选择器里只能出现一次，并且只能出现在末尾;

伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上。

实际使用：

伪类用一个冒号表示 :first-child
伪元素则使用两个冒号表示 ::first-line

4.CSS几种定位的规则、定位参照物、对文档流的影响，如何选择最好的定位方式，雪碧图实现原理

1）、static定位(普通流定位) -------------- 默认定位

2）、float定位(浮动定位) 例：float:left;

有两个取值：left(左浮动)和right(右浮动)。浮动元素会在没有浮动元素的上方，效果上看是遮挡住了没有浮动的元素，有float样式规则的元素是脱离文档流的，它的父元素的高度并不能有它撑开。

3）、relative定位(相对定位) position:relative;

相对本元素的左上角进行定位，top,left,bottom,right都可以有值。虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间。可以设置z-index。使本元素相对于文档流中的元素，或者脱离文档流但是z-index的值比本元素的值要小的元素更加靠近用户的视线。

相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置position为relative。

4）、absolute定位(绝对定位) position:absolute;

相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有relative定位的，就默认相对于body进行定位。

绝对定位是脱离文档流的，与浮动定位是一样的效果，会压在非定位元素的上方。可以设置z-index属性。

雪碧图实现原理：

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。

5.写出尽可能多的水平垂直居中的方案并对比它们的优缺点

行内元素水平居中：

首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;

如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;

块级元素水平居中(定宽度)：

1）需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）

2) 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；

设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);

块级元素水平居中(不宽度)：

1) 默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;

2) 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；

利用css3新增属性transform: translateX(-50%);

使用flexbox布局实现水平居中（宽度定不定都可以）:

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

单行的行内元素垂直居中:

只需要设置单行行内元素的"行高等于盒子的高"即可；

多行的行内元素垂直居中:

使用给父元素设置display:table-cell;和vertical-align: middle;属即可；

块级元素垂直居中方法一：使用定位

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；

定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

不定高度：利用css3新增属性transform: translateY(-50%);

块级元素垂直居中方法二：使用flexbox布局实现（高度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

水平垂直居中-已知高度和宽度的元素：

方法一：

设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

方法二：

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

水平垂直居中-未知高度和宽度的元素：

方法一：使用定位属性

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

方案二：使用flex布局实现

设置父元素为flex定位，justify-content: center; align-items: center;

6.BFC的布局规则，实现原理，可以解决的问题

BFC直译为块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与外部毫不相干。注意：可以把BFC理解为一个大的盒子，其内部是由Block-level box组成的

BFC布局规则：

  1. 内部的Box会在垂直方向，一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时，浮动元素也参与计算

BFC的作用及原理：

1. 自适应两栏布局

2. 清除内部浮动

3. 防止垂直 margin 重叠

BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

7.CSS函数有哪些？

根据w3cplus中可以划分为以下几类：

属性函数：attr()；

背景图片函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()

颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；

图形函数：circle()、ellipse()、inset()、polygon()、path()

滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；

转换函数：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；

数学函数：calc()、min()、max()、mixmax()、repeat()；

缓动函数：cubic-bezier()、steps()；

其他函数：counter()、counters()、toggle()、var()、 symbols()。

8.PostCSS、Sass、Less的异同，以及使用配置，至少掌握一种

● 编译环境不一样，Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中；

● 变量符号不一样，Less是@，而Scss是$；

● 输出设置，Less没有输出设置，Sass提供4种输出选项：nested, compact, compressed 和 expanded；

● 处理条件语句，Sass支持条件语句，可以使用if{}else{},for{}循环等等。LESS的条件语句使用有些另类，他不是我们常见的关键词if和else if之类，而其实现方式是利用关键词“when”；

● 引用外部文件，文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件，ess引用外部文件和css中的@import没什么差异；

● 工具库的不同，Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass在Sass的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。

● PostCSS介绍：

PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二个就是调用插件来处理 AST 并得到结果。因此，不能简单的把 PostCSS 归类成 CSS 预处理或后处理工具。PostCSS 所能执行的任务非常多，同时涵盖了传统意义上的预处理和后处理。

● PostCSS使用

PostCSS 一般不单独使用，而是与已有的构建工具进行集成。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。现在经常用到的是基于PostCSS的Autoprefixer插件，使用方式可以在官网的插件库进行查询。下面是官网地址：

PostCSS官网地址

9.CSS模块化方案有哪些？

css的模块化方案可能和js的一样多，下面简单介绍几种主要的模块方案。

oocss

面对对象的规则，主要的原则是两种：分离结构和外观，分离容器和内容。

名词解释

分离结构和外观：增加可重复的设计单元，同时去推进产品和ui对这方面的思考，比如下面的css使用时对象模式的命名和模块化规则。

分离容器和内容：指的是样式的使用不与元素位置唯一匹配，在任何位置你都可以使用这个样式，如果你不适用这个样式，会保持默认的样式。

实例

// dom结构<div class="toogle simple">  <div class="toogle-control open">    <div class="toogle-tittle">标题</div>  </div>  <div class="toogle-details "></div></div>

// 模块的标记 唯一标识.toggle{}// 皮肤样式的写法，如果基本结构是一样的，你可以用complex的一个辅助样式.toggle.simple{}// 是否做嵌套写法 相信很多预处理器的部分会支持嵌套 然后很多人会这样写,不被推荐的.toogle{ .toogle-control{ } .toogle-details{ }}// 其实你会这样组织么 不是很建议 这样会降低查询效率 如果能确认唯一性的时候 其实直接写子即可.toogle{}.toogle-control{}.toogle-details{}复制代码

smacss

sma和oocss有很多类似之处，但区分的地方有很多，主要是对样式的分类。分别是：基础、布局、模块、状态、主题

基础

可以适用于任何位置，我也称全局样式

布局

主要是用来实现不同的特色布局，提高布局的复用率，

模块

设计中的模块化，可重复使用的一个单元，一般是dom+css的耦合绑定。

状态

描述在特定状态下的布局或者模块的特殊化表现，这里我觉得要推荐下《css禅意花园》，在dom结构不变的情况下，可以通过css的皮肤化实现样式的改版。

主题

与状态相比更加定制的是，我们会针对有些特殊的模块，进行主题的设置，包括一系列的颜色、尺寸、交互等进行重度设计，参数化设计。

案例

// dom结构<div class="toogle toogle-simple">  <div class="toogle-control is-active">    <div class="toogle-tittle">标题</div>  </div>  <div class="toogle-details "></div></div>复制代码

与oocss相比，其实大部分设计思路是一样的，以一个类作为css的作用域（作用域就是两个限制，1 不符合场景时限制禁止使用 2 符合场景时要正确的使用），另外的区别就是针对皮肤和状态的不同书写规则。

bem

bem就是块、元素、修饰符的思维去写样式。它不涉及具体的css结构，只是建议你如何命名css.

案例

// dom结构<div class="toogle toogle--simple">  <div class="toogle_control toogs="toogle_details "></div></div>s="toogle_details "></div></div>

解释

  • 块级：所属组件的名称
  • 元素：元素在组件里的名称
  • 修饰符：任何与元素修饰相关的类

style-components

彻底抛弃 CSS，用 JavaScript 写 CSS 规则,点击style-components进入github的主页。

CSS Modules

使用JS编译原生的CSS文件，使其具备模块化的能力，点击CSS Modules进入github主页。

这些模块化方案都是各有优缺点，如命名约定：命名复杂、缺乏扩展、 CSS Modules当然也有一些缺点(你得先学会它再去谈优劣)。在众多解决方案中，没有绝对的优劣。还是要结合自己的场景来决定。

10.CSS如何配置按需加载

● 使用require.js按需加载CSS

//模块test.js
define(['css!../css/test.css'], function() { //先加载依赖样式
    var test = {};
    return test;
});

//配置
require.config({
    map: { //map告诉RequireJS在任何模块之前，都先载入这个模块
        '*': {
            css: 'lib/css'
        }
    },
    paths: {
        test: 'lib/test',
    }
});

//调用
require(['test'])

webpack配置CSS的按需加载

这里以ant desgin css 为例：

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    plugins: [
      ["import",{libraryName: "antd", style: 'css'}],   //只需加一行，手动划重点antd按需加载
      [
        require.resolve('babel-plugin-named-asset-import'),
        {
          loaderMap: {
            svg: {
              ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
            },
          },
        },
      ],
    ],
    cacheDirectory: true,
    cacheCompression: isEnvProduction,
    compact: isEnvProduction,
  },
}

11. 如何防止CSS阻塞渲染

默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。请务必精简您的 CSS，并利用媒体类型和查询来解除对渲染的阻塞。

我们可以通过 CSS“媒体类型”和“媒体查询”来解决这类用例：

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

媒体查询由媒体类型以及零个或多个检查特定媒体特征状况的表达式组成。

例如，上面的第一个样式表声明未提供任何媒体类型或查询，因此它适用于所有情况，也就是说，它始终会阻塞渲染。第二个样式表则不然，它只在打印内容时适用---或许您想重新安排布局、更改字体等等，因此在网页首次加载时，该样式表不需要阻塞渲染。最后，最后一个样式表声明提供由浏览器执行的“媒体查询”：符合条件时，浏览器将阻塞渲染，直至样式表下载并处理完毕。

12.熟练使用CSS(3)实现常见动画，如渐变、移动、旋转、缩放等等

我把一些常用的CSS动画效果代码上传到github了，有需要的同学可以点击下载，CSS常用动画；

另外还有一些CSS动画库，比如：animate.css、magic.css、Hover.css、

13.CSS浏览器兼容性写法

1. 浏览器CSS样式初始化

由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显示效果不一样。

*{
 margin: 0;
 padding: 0;
}

关于浏览器CSS样式初始化，经验不丰富的话，可能也不知道该初始化什么，这里给大家推荐一个库，Normalize.css，github star数量接近3.4万，选取展示其中几个样式设置，如下：


html {
 line-height: 1.15; /* Correct the line height in all browsers */
 -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
}

body {
 margin: 0;
}

a {
 background-color: transparent; /* Remove the gray background on active links in IE 10. */
}

img {
 border-style: none; /* Remove the border on images inside links in IE 10. */
}

通过CSS样式初始化，相信能解决不少常规的兼容性问题，接下来再看看浏览器的私有属性。

2. 浏览器私有属性

我们经常会在某个CSS的属性前添加一些前缀，比如-webkit-，-moz- ，-ms-，这些就是浏览器的私有属性。

为什么会出现私有属性呢？这是因为制定HTML和CSS标准的组织W3C动作是很慢的。

通常，有W3C组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但W3C制定标准，要走很复杂的程序，审查等。而浏览器商市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。

但是为避免日后W3C公布标准时有所变更，会加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性。等到日后W3C公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。常用的前缀有：

  • -moz代表firefox浏览器私有属性
  • -ms代表IE浏览器私有属性
  • -webkit代表chrome、safari私有属性
  • -o代表opera私有属性

对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前面

 -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
 -moz-transform:rotate(-3deg); /*为Firefox*/
 -ms-transform:rotate(-3deg); /*为IE*/
 -o-transform:rotate(-3deg); /*为Opera*/
 transform:rotate(-3deg);

每个CSS属性写这么一堆兼容性代码，无疑是对生命最大的浪费，后面我们会讲一下通过自动化插件来处理这块。

3. CSS hack

有时我们需要针对不同的浏览器或不同版本写特定的CSS样式，这种针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

CSS hack的写法大致归纳为3种：条件hack、属性级hack、选择符级hack。

  • 各浏览器常用兼容标记一览表:

以上 .bb 可更换为其它样式名）

4.自动化插件

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

把Autoprefixer添加到资源构建工具（例如Grunt）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置 。

//我们编写的代码
div {
 transform: rotate(30deg);
}

// 自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置
div {
 -ms-transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -o-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 transform: rotate(30deg);
}

目前webpack、gulp、grunt都有相应的插件，如果还没有使用，那就赶紧应用到我们的项目中吧，别再让CSS兼容性浪费你的时间！

14.掌握一套完整的响应式布局方案

比较常用的布局方式有float,position,display,table,flex,grid等。

全屏布局相关方案的兼容性、性能和自适应一览表：

实际项目使用中一般是根据具体场景去选择相应的布局方式。

附两张CSS知识图谱(建议收藏)：


最后送福利了，自己是从事了五年的前端工程师，整理了一份最全面前端学习资料，只要私信：“前端"等3秒后即可获取地址，

里面概括应用网站开发，css，html，JavaScript，jQuery，Ajax，node，angular等。等多个知识点高级进阶干货的相关视频资料，等你来拿


在线咨询
上一篇：华丽！HTML5大型科技公司织梦网站源码（亲测可用）
下一篇：4种方案解决CSS浏览器兼容性问题

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 吉首市 元谋县 盐津县 新源县 昌宁县 塔什库尔干塔吉克自治县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服