AIMing_byte的博客

弹性盒（ Flexible Box 或 Flexbox） 布局是CSS3提供的一种新的布局模式，是一种当页面需要适应不同的屏幕大小及设备类型时，确保元素拥有恰当行为的一种布局方式。

类似于美颜相机、美图秀秀这样的美颜工具，能够让我们轻松地应用多种特效，例如转换为黑白照片、复古风格化、调整亮度等。在之前仅凭CSS几乎很难做到这些效果。但在CSS3的语法中，所有的这些视觉特效都是通过“”属性来快速实现的。

在CSS3之前，想要设计类似报纸那样的多列布局，有两种方式可以实现：一种是"浮动布局"，另一种是“定位布局”。为了解决这多列布局的难题，CSS3新增了一种布局方式-多列布局。多列布局提供了一种多列组织内容的方式，可以简单的实现类似报纸格式的布局。

在CSS3中，animation属性用于实现元素的动画。animation属性跟transition属性在功能实现上是非常相似的，都是通过改变元素的属性值来实现动画效果。但是，这两者实际上有着本质的区别。CSS3中的animation属性就是为了解决这些问题而提出的。animation属性可以通过控制关键帧来控制动画的每一步，从而实现更为复杂的动画效果。使用animation属性实现CSS3动画需要两步。

概念：在CSS3中，我们可以使用transition属性将元素的某一个属性从“”在指定的时间内平滑地过渡到“”，从而实现动画效果。CSS3变形（transform)呈现的仅仅是一个结果，而CSS过渡（transition）呈现的是一个过程。这个所谓的过程，通俗来说就是一种动画变化过程，如渐渐显示，渐渐隐藏，动画快慢等实例：指定单个属性

在实际开发中，有时需要实现元素的各种变形效果，如平移，缩放，旋转，倾斜等。在CSS3中，可以使用transform属性来实现元素的变形效果属性值使用transform属性实现元素的2D变形，2D变形主要有平移、缩放、旋转和倾斜4种变形效果。transform属性一般配合以下方法来实现各种变形效果注意：transform无法作用于行内元素。

在CSS3中，新增了3个背景属性。

概念:在CSS3中，针对元素边框增加了丰富的修饰属性。常见的边框样式属性有以下。

在网页设计中，经常会需要在一个背景上重复应用渐变方式的情况，这时就需要使用重复渐变。

圆心位置用于定义径向渐变的“中心位置"，可以使用“at"加上关键词或参数值来定义径向渐变的圆心位置。径向渐变是圆形渐变或椭圆渐变，颜色不再是沿着一条直线渐变，而是起始颜色会从一个中心点开始向所有方向渐变。此外，径向渐变可以接收一个值列表，可以同时定义多种颜色的径向渐变，各颜色值之间用英文逗号（参数开始颜色用于定义径向渐变的开始颜色，而参数结束颜色用于定义径向渐变的结束颜色。概念：径向渐变，指的是颜色从内到外进行的圆形渐变（从中间往外拉，像圆一样）。概念：线性渐变，指的是在一条直线上进行的渐变。

概念：RGB是一种色彩标准，由红（red）、绿（green）、蓝（blue）3种颜色变化来得到各种颜色。概念:用#RRGGBB规定十六进制颜色，如需增加透明度，可以在#RRGGBB后面添加两个额外的数字。概念:HSLA颜色值是带有Alpha通道的HSL颜色值的扩展-指定了颜色的不透明度。RR(红色)，GG（绿色），BB（蓝色）为十六进制整数指定颜色的成分（分量）。/* 第一个li,透明度为1.0 *//* 第二个li,透明度为0.5 *//* 第三个li,透明度为0.1 *//* 第一个li红色 */

text-shadow属性可以定义多个阴影，这时，text-shadow属性是一个以英文逗号(,)隔开的值列表。最重要的一点是，该属性首先尝试挪到下一行，看看下一行的宽度够不够，不够的话再进行单词内的断句。数学坐标系一般用于数学形式上的应用，而在前端开发中几乎所有涉及坐标系的技术使用的都是W3C坐标系，这些技术包括CSS3，Canvas和SVG等。属性应用到一个段落上面，可以实现溢出处理从左到右的文本和从右到左的文本上的效果。-webkit-text-stroke是一个复合属性，是由两个子属性组成的。

概念：可以通过file类型的input控件或者拖放的方式选择文件进行操作语法格式：属性multiple：表示是否选择多个文件accept：用于设置文件的过滤类型（MIME类型）如果想要同时设置多个过滤类型，可以用英文逗号（,）隔开常见的acept属性取值/MIME类型属性值说明image/jepgJEPG图片image/pngPNG图片image/gifGIF图片text/plainTXT文件text/htmlHTML文件text/cssCSS文件JS文件。

要解决Firefox下的拖放问题，必须设置 setData()方法，才可以拖放除图片之外的其他标签。概念：在HTML5中，拖放是一种常见的特性，可以抓取元素并拖入不同的位置。// 要想触发drag事件，就必须在dragover事件中阻止默认行为。在HTML5的拖放操作中，首先要明确拖拽元素和目标元素。拖放事件主要分成两个部分：拖拽元素事件和目标元素事件。// 设置图片源为拖拽的数据（即图片的URL）// 将图片添加到目标元素中。// 设置数据类型和数据。// 在目标元素中释放。// 拖拽到目标元素。

embed元素可以插入多种格式的多媒体文件，常见的格式有JPG、WMV、WAV、AIFF、MP3等。概念:由于不同的浏览器对HTML5的视频格式各不相同，为满足需求，可能需要为视频文件提供多种不同的解码器，所以HTML5提供了一个新的元素source元素。如果浏览器不支持video元素，就会显示标签中的内容“你的浏览器不支持video标签，请升级到最新版本”。这个提示文字可加可不加.HTML5的音频/视频方法用于实现音频/视频的某些功能，如音频/视频的加载，播放，暂停播放等。

xyz]：字符集合，匹配所包含的任意一个字符，例如[abc]可能匹配"plain"中的a,也可以匹配"boy"中的b,可以匹配"cat"中的c。电子邮件:^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$ 或者\w+@\w+.\w+身份证号: ^\d{17}(\d|X|x)$ 或 [1-9]\d{17}|[1-9]\d{16}[Xx]:\/\/\w+.\w+[a-z]：字符范围 匹配指定范围内的任意字符，例如[a-z]：匹配a-z中的任意一个字符。

在新增表单元素那节当中介绍过，email,url,tel这3个类型的input 元素，本质上都内置了pattern属性，因此它们会自动进行相关匹配验证。表示开启，浏览器会尝试自动完成输入框中的输入，以提供对以前输入过的值的可能匹配。概念：required属性来定义文本框输入内容不能为空，如果文本框为空，则不允许提交。概念：novalidate属性就是来禁用form元素的所有文本框内置的验证功能。是否启用表单的自动完成功能，取值：on（默认）、off。是否启用该表单元素的自动完成功能，跟上面表单属性一样。

轮廓outline，用于在元素周围绘制一个轮廓，位于border的外围，可以突出显示元素。

介绍：项目中将多张小图片，合并成一张大图片，这张大图片称为精灵图。优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度。

通过position属性实现对元素的定位，有四种定位方式常用取值：取值含义说明static默认值按照常规文档流进行显示relative相对定位相对于标签原来的位置进行的定位absolute绝对定位相对于第一个非static定位的父标签的定位fixed固定定位相对于浏览器窗口进行定位。

如果找不到用户指定的字体，浏览器将使用默认的字体来显示文本。简写属性：font:font-­style | font­-weight | font­-size | font-­family。含义：将网页中许多非常小的图标/图片整合到一张大图中，当访问该页面时只需要下载一次，可以减少访问服务器的次数，提高性能。取值：underline（下划线）、overline（上划线）、line­-through（穿越线）取值：repeat（默认）、repeat-­x、repeat­-y、no-­repeat。

原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优。使用自定义名称，以 # 号作为前缀，然后通过HTML标签的id属性进行名称匹配。原因：首先加载标签选择器，再加载类选择器，然后加载ID选择器，最后加载行内样式。行内样式>ID选择器>类选择器>标签选择器。标签选择器和类选择器、标签选择器和ID选择器，一起使用。只有满足层次关系最里层的选择器所对应的标签才会应用样式。以标签的id属性作为样式应用依据，一对一的关系。后加载的会覆盖先加载的同名样式。

层叠样式表是一组样式设置规则，用于控制页面的外观样式。

使用 可以将其他网页的内容以嵌入的方式显示在当前网页中。

表单是一个包含若干表单元素的区域，用于获取不同类型的用户信息 表单元素是允许用户在表单中输入信息的元素，如：文本框、密码框、单选按钮、复选框、下拉列表、按钮等。

标签开始。每个自定义列表标题以 开始。每个自定义列表项的描述以 开始。dl:全称是definition listdt: 全称是definition titledd: 全称是definition description用法：标题描述标题描述......水果梨子西瓜

，通过都是成对出现的，如