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

一、转换transform transform字面上就是变形，转换的意思，在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-reverse column-reverse flex布局中父项相关设置 主轴的内容分布：使用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、FFC CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。 那么到底什么是BFC、IFC、GFC和FFC呢？ What’s FC? 一定不是KFC，FC的全称是: Formatting Contexts，是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC BFC(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 也会