css高效开发实战学习札记

• web发展有四个主要的趋势，去Adobe化，基础功能集成，客户端执行更多的逻辑和渲染任务，适应移动设备的发展
• 将css应用到html文档中三种方法：使用style属性，使用 < style> 标签，使用< link>标签
• 一个块级元素包括内容，外边距（margin），边框，内边距（padding）4个组成部分，不设定时，内外边距边框是没有的，外边距默认是透明的不会遮挡其后的任何元素
• 可通过条件注释让不同的浏览器加载不同的css
• 对多数css3效果来说，考虑到兼容性，往往需要将所有的前缀属性都写上去
• 基础选择器包括标签选择器（其命名只要和对应的html标签相同即可），class选择器（在class名称前加上点）,id选择器（在id名称前加上#号），通配符用一个符号代替某些字符，*表示任意字符，通配符选择器的级别是最低的，只要有其他的定义，使用通配符选择器进行的定义就会被覆盖
• 子元素选择器>（表示特定的HTML嵌套关系的演示展示）,后代元素选择器为空格（只要为后代元素即可），相邻元素选择器+（二者必须拥有同一个父元素，二者相邻，实际应用中往往会和其他·选择器配合使用）
• 可以通过判断某些属性是否存在或者通过属性的值来选取html元素，属性选择器[]
  属性选择器可以进行链式调用，从而缩小范围
• 通配符^:以…开头，$:以,,,结尾，*，通配任意字符
• 若果要对多个元素定义相同的样式，则可以用主选择器来缩减重复代码：，
• 如果安装了font-family中定义的字体，就会使用指定的字体（优先使用定义时顺序靠前的），如果没有定义字或者定义的字体客户端没有安装就会显示默认字体。
• @font-face属性可以加载服务器端的字体文件，让客户端显示没有安装的字体
• box-reflect{<方向><间距><渐变效果>}
• background-size来规定背景图片的尺寸，可以在不同环境之中重复使用背景图片两个可选项cover contain不会造成图象比例失真。cover相当于宽度等于元素宽度，高度设为auto的情况，contain相当于高度设置为元素高度，宽度设置为auto的情况
• 背景的显示范围在元素的内边距之内的，是从内边距左上角开始延伸的，background-origin可以指定从边框左上角（border-box）。内边距左上角（padding-box），内容左上角（content-box）开始延伸。
• RGBA实际上就是在RGB基础上添加了一个Alpha透明通道，一般用作透明度参数0%为完全透明，100%完全不透明；
• HLSA也是一种色彩模式，分别代表色调hue，饱和度saturation，亮度light，透明通道Alpha
• 渐变效果可以分为线性渐变（linear-gradient）和放射渐变（radial-gradient）接受3个参数，方向，起始颜色，结束颜色，若两个颜色参数，默认从元素顶部到底部，方向可以用left/to right表示从左向右渐变，也接受角度来表示0deg，90deg等
• 边框阴影box-shadow{color,水平偏移，垂直偏移，模糊距离，阴影尺寸，inset}
• 对于像< textarea >这样可以设置overflow属性的元素，resize可以让用户通过拖拽来改变框体的大小：none（无法改变），both（可以调整宽高），horizontal(可以调整宽度)，vertical（可以调整高度）
  transform属性rotate旋转变换传入j角度值作为参数，元素将沿着中轴线顺时针偏转这个角度值，rotateX表示沿着X轴方向旋转，rotateY表示沿着Y轴方向进行旋转
• rotate()等效于rotateZ();
• transfoem的skew属性用于设置元素的扭曲变换，scale属性用于比例缩放，translate定义可元素的位移
• 弹性盒子在默认情况下实现的是横向布局，可以在父元素中定义box-oreint属性来确定子元素的排列方向，inline-axis与horizontal横向布局，vertical与block-axis实现纵向布局。inherit继承父元素
• box-align决定了垂直方向的对齐方式，可选参数star，end，center，baseline，stretch（默认值，表示拉伸，如果不指定子元素高度，子元素将和父i元素高度一致）
• box-direction属性来确定子元素的排列顺序，normal（从左向右，从上到下），reverse（反转），inherit（继承父元素的排列顺序）
• prefix就是一个能将css3代码自动的生成跨浏览器css代码的在线应用，可以将prefixfree.js文件下载后放在项目中然后再引入这个文件即可，也可以使用Github提供的远程连接。
• 使用normalize统一不同浏览器的样式，下载后在css文件之前引入即可，或者将内容复制到css代码的最前端即可。
• 应用Grunt进行JS/CSS的自动压缩
• 可直接使用CDN链接引入远程的960gs文件，引入·Foundation框架快速构建样式
• -