一个前端攻城狮的成长之路

一、转换transformtransform字面上就是变形，转换的意思，在CSS3中转换主要包括移动、旋转、缩放和扭曲。（1）移动translate（）translate（x，y）translateX（X）translateY（Y）（2）旋转rotate（）正数表示顺时针旋转，负数则表示逆时针旋转（3）缩放scale（）scale（x，y）scaleX（X）scaleY（Y）（4）扭曲skew（）skew（x，y）skewX（X）skewY（Y）（5）矩阵matrix（）将

Flex弹性布局将容器的displays属性设置为flex之后，容器内的元素，无论是块级元素还是行内元素，都一视同仁，成为弹性布局的元素。同时，设置浮动和vertical-align也会失效。Flex弹性布局默认主轴为横向（flex-direction:row）默认从左到右纵向：flex-direction:column默认从上到下顺序反转：row-reversecolumn-reverseflex布局中父项相关设置主轴的内容分布：使用justify-content属性之前必须清楚主轴是哪个

【HTML5】多媒体标签HTML5中新增的多媒体标签主要包括音频（audio）标签和视频（video）标签音频标签：HTML5在不使用插件的情况下可支持有限数量的原生音频格式文件播放，具体支持情况如下表格：格式：<audio src = "文件地址" controls="controls" ></audio>常见属性：视频标签：格式：<vedio src = "文件地址" controls="controls" ></vedio>

【HTML5】常用语义化标签HTML5 是 HTML 标准的最新演进版本。 这个术语代表了两个不同的概念：它是一个新的 HTML 语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。 这套技术往往被称作 *HTML5 和它的朋友们，*通常简称为 HTML5。从要对全部所有的 Web 开发人员有用这一点出发，这个参考页面链接了有关 HTML5 技术的大量资源，并且基于它们各自的功能，把它们归类成了若干组。语义：能够让你更恰当地描述你的内容

BFC、IFC、GFC、FFCCSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。那么到底什么是BFC、IFC、GFC和FFC呢？What’s FC?一定不是KFC，FC的全称是: Formatting Contexts，是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFCBFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatt

CSS Sprite：又称为CSS精灵或者雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。能很好地减少网页的http请求，从而大大的提高页面的性能。SVG Sprite：与CSS Sprite类似。另外一种实现思路 + 。用于定义可复用的形状，定义的现状不会展示出来，而是通过use元素引用来显示。Icon font：图标字体，也叫字体图标，就是字体做的图标。能自由变化大小，且不会模糊。

一、无继承性的属性1、display：规定元素应该生成的框的类型2、文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、borde

三种方法均可隐藏元素。不同在于以下几点:一、空间占据display:none 的元素不会占据，但是设置display:none 会引发回流和重绘opacity:0和visibility:hidden 的元素会占据位置，但是改变这属性时只会触发重绘二、子元素继承display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了。visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出opacity: 0 也会