css3笔记(一）

css3

css31、css3是css1 css2 的升级版，是对css的扩展2、css3主要新特性：3、css3不是属于浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀4、css3选择器5、css3文本6、css3边框7、css3背景8、css3颜色9、opacity10、css3线性渐变11、box-sizing12、盒子的变形13、css3布局14、响应式布局15、媒体查询

1、css3是css1 css2 的升级版，是对css的扩展

2、css3主要新特性：

1. 选择器

2. 阴影

3. 形状转换（2D-3D）

4. 变形

5. 动画（过渡动画、帧动画）

6. 边框

7. 多重背景

8. 反射

9. 文字

10. 颜色（rgba/hsl/hsla)

11. 滤镜（filter)

12. 弹性布局

13. 多列布局

14. 盒模型

15. web字体

16. 媒体查询

3、css3不是属于浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀

1. 主流浏览器内核（面试点）

   • Trident：IE内核

   • Webkit：chrome和Safari内核

   • Gecko：Firefox内核

   • Blink：chrome和Opera内核

   tip：目前国内绝大多数浏览器都是双核的（IE+chrome内核）

2. 厂商前缀

   IE：-ms-

   chorme&Safari： -webkit-

   Firefox：-moz-

   Opera：-o-

4、css3选择器

丰富选择的目的：在标签中减少class和id的使用

1. 属性选择器

   [属性名]

   [属性名=属性值]

   [属性名^=属性值]

   [属性名$=属性值]

   [属性名*=属性值]

2. 结构性伪类

3. 目标伪类

   :target

4. UI元素状态伪类

   :checked :disabled/:enabled ::selection

5. 否定伪类

   :not()

6. 通用兄弟元素伪类

5、css3文本

1. 文本阴影（IE9以上，主流浏览器支持）

text-shadow：水平偏移 垂直偏移 （模糊距离)（阴影尺寸）（颜色）（inset）;

1. 文本自动换行（主流浏览器支持）

word-wrap:nromal/break-word;

1. 单词拆分（主流浏览器支持）

word-break: normal|break-all|keep-all;

1. 文本拆分（主流浏览器都不支持）

text-wrap: normal|none|unrestricted|suppress;

1. 文本溢出（text-overflow）

text-overflow: clip|ellipsis|string;

clip ：修剪文本。

ellipsis : 显示省略符号来代表被修剪的文本。

string ：使用给定的字符串来代表被修剪的文本。

1. 单行文本溢出（重要）

div {
    width: 宽度;
    overflow: hidden; 
    white-space: nowrap; /*不允许换行*/
    -ms-text-overflow: ellipsis;/*处理IE兼容*/
    text-overflow: ellipsis; 
}

1. 多行文本溢出（IE9以下不支持，主要是谷歌支持）

div { 
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 行数; 
    width: 宽度;
    white-space: normal /*允许换行*/
}

6、css3边框

1. 圆角边框（掌握） border-radius: 1-4 length|% / 1-4 length|%;

   length ：定义圆角的形状。

   % : 以百分比定义圆角的形状。

2. 边框阴影（IE9以上） box-shadow: h-shadow v-shadow blur spread color inset;

   水平偏移 垂直偏移 （模糊距离)（阴影尺寸）（颜色）（inset）

3. 边框图片（IE11以上） border-image：source slice width outset repeat

   source {string} ：用在边框的图片的路径。

   slice {number} ：图片边框向内偏移。

   width {number} ：图片边框的宽度。

   outset {number} ：边框图像区域超出边框的量。

   repeat {string} ：图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。

7、css3背景

1. 多重背景

   background：背景色 背景图 平铺方式 位置，背景色 背景图 平铺方式 位置...

2. background-size：属性规定背景图像的尺寸

   语法：background-size: length固定长度|percentage百分比值|cover|contain;

3. background-origin：属性指定了背景图像的位置区域

   语法： background-origin: padding-box|border-box|content-box;

   属性值： padding-box ： 背景图像相对于内边距框来定位。

   border-box : 背景图像相对于边框盒来定位。

   content-box ： 背景图像相对于内容框来定位。

4. background-clip：属性规定背景的绘制区域。

   语法： background-clip: border-box|padding-box|content-box;

   属性值： border-box ：背景被裁剪到边框盒。

   padding-box ：背景被裁剪到内边距框。

   content-box ：背景被裁剪到内容框。

5. 渐变背景

8、css3颜色

1. RGBA(r,g,b,a)

   r：红色 取值范围：0-255/0-100%

   g：绿色 取值范围：0-255/0-100%

   b：蓝色 取值范围：0-255/0-100%

   a：不透明度 取值范围：0-1的小数

2. HSL(h,s,l)

   h：色调 取值范围：0-360

   s：饱和度 取值范围：0-100%

   l：亮度 取值范围：0-100%

3. HSLA(h,s,l,a)

   h：色调 取值范围：0-360

   s：饱和度 取值范围：0-100%

   l：亮度 取值范围：0-100%

   a：不透明度 取值范围：0-1的小数

9、opacity

调整元素的不透明度，大多数做元素遮罩效果，取值范围0-1

IE8及以下版本不支持，处理兼容：再添加一行代码

filter:alpha(opacity=数值) 数值：0-100

10、css3线性渐变

渐变主要用来设置背景或三维图

1. 线性渐变

   语法： background: linear-gradient(direction方向或角度, color-stop1（百分比）, color-stop2（百分比）, ...);

   方向：to left：从右向左渐变 to right：从左向右渐变 to top：从下向上渐变 to bottom：从上向下渐变 to top left：从右下角向左上角渐变 to top right：从左下角向右上角渐变 to bottom left：从右上角向左下角渐变 to bottom right：从左上角向右下角渐变

   角度：比如45度角，应该表示为：45deg

   颜色取值： 1）表示颜色的单词 2）16进制颜色 3）表示颜色的函数（rgb()/rgba()/hsl()/hsla()...)

2. 径向渐变（沿半径方向渐变）

语法： background: radial-gradient(形状, shape size渐变大小, 位置, start-color, ..., last-color);

形状：

​ ellipse：椭圆径向渐变（默认）

​ circle：圆径向渐变

渐变大小：

​ farthest-corner：渐变的半径长度为从圆心到离圆心最远的角（默认）

​ closest-side：渐变的半径长度为从圆心到离圆心最近的边

​ closest-corner：渐变的半径长度为从圆心到离圆心最近的角

​ farthest-side：渐变的半径长度为从圆心到离圆心最远的边

位置：

​ center：设置圆心在中心位置（默认）

​ top：设置圆心在顶部位置

​ bottom：设置圆心在底部位置

​ at：圆心橫坐标 圆心纵坐标: 设定圆心的位置在指定的（橫坐标，纵坐标）处

1. 文字渐变

background-image: 线性渐变或径向渐变; ​ background-clip: text; ​ -webkit-background-clip: text;

        `color: transparent;`

11、box-sizing

允许你以某种方式定义某些元素，以适应指定的区域。

box-sizing: content-box/border-box （火狐和谷歌低版本需要厂商前缀）

12、盒子的变形

css3 2D变形

1. transform

   位移效果

   • translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。

   • translateX(n) 定义 2D 转换，沿着 X 轴移动元素。

   • translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。

     缩放效果

   • scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。

   • scaleX(n) 定义 2D 缩放转换，改变元素的宽度。

   • scaleY(n) 定义 2D 缩放转换，改变元素的高度。

     旋转效果

   • rotate(angle：-360deg——360deg) 定义 2D 旋转，在参数中规定角度。

     扭曲变形效果

   • skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。

   • skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。

   • skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

   • matrix(a,b,c,d,e,f)定义 2D 转换，使用六个值的矩阵。 表示：a c e

     b d f

     0 0 1

     matrix用一个3×3矩阵表示，ab列表示x轴，cd列表示y轴，ef列表示z轴

     ab表示缩放（如果没有缩放，值为1）

     cd表示扭曲（如果没有扭曲，值为0）

     ef表示扭曲（如果没有位移，值为0）

     如果旋转角度为θ，它会影响abcd值

     a = cosθ ​ b = sinθ ​ c = -sinθ ​ d = cosθ 如果扭曲skew(θ1,θ2)，会影响到b和c的值： ​ b = tanθ1 ​ c = tanθ2

2. transform-origin：调整元素的原点。 transform-origin: x-axis y-axis z-axis; 属性值： x-axis ：定义视图被置于 X 轴的何处。可能的值：left，center，right，length，%。 y-axis ：定义视图被置于 Y 轴的何处。可能的值：top，center，bottom，length，%。 z-axis ：定义视图被置于 Z 轴的何处。可能的值：length。

css3 3D变形

1. perspective（用于父元素）

   让子元素获得透视效果

   perspective:length|none;

   主流浏览器都不支持，谷歌要加-webkit-，或在长度后加单位。

2. transform-style（用于父元素）

   在3D空间中呈现被嵌套的元素(必须与 transform 属性一同使用)。

   transform-style: flat（默认）|preserve-3d;

3. transition 过渡动画

1）常规用法：

​ transition-property

​ transition-duration

​ transition-timing-function

​ transition-delay

2）简洁（复合）用法：

​ transition: property-name-list|all duration timing-function delay;

​ a）可以使用的属性有：

​ i）颜色：

​ color background-color border-color outline-color

​ ii）位置：

​ background-position left right top bottom

​ iii）长度：

​ max-height min-height max-width min-width height width border-width margin padding outline- width outline-offset font-size line-height text-indent vertical-align border-spacing letter-spacing word-spacing

​ iv）数字：

​ opacity visibility z-index font-weight zoom

​ v）组合：

​ text-shadow transform box-shadow clip

​ vi）其它

​ gradient

​ b）duration:动画持续时间，一般以秒(s)或毫秒(ms)为单位

​ c）timing-function:动画函数

​ i）linear:匀速

​ ii）ease:变速（先慢后快，最后再慢）

​ iii）ease-in:变速（由慢到快）

​ iv）ease-out:变速（由快到慢）

​ v）ease-in-out:变速（慢速开始，慢速结束）

​ vi）cubic-bezier(n,n,n,n):自行设定变速，n的值在0-1之间

d）delay:动画延时时间，一般以秒(s)或毫秒(ms)为单位

1. 关键帧动画

步骤：

​ 1）设置关键帧

​ a）如果只有两个关键帧：

​ @keyframes 动画名{

​ 0%：{样式表}

​ 100%：{样式表}

​ }

​ 或：

​ @keyframes 动画名{

​ from：{样式表}

​ to：{样式表}

​ }

​ b）如果是多个关键帧

​ @keyframes 动画名{

​ 0%：{样式表}

​ 10%：{样式表}

​ 35%：{样式表}

​ ...

​ 100%：{样式表}

​ }

​ 注意：这里的百分比一般是升序，可以是0-100%任意值

​ 2）实施动画

​ a）常规用法

​ animation-name：来自于@keyframes定义的动画名

​ animation-duration：动画持续时间，一般以秒(s)或毫秒(ms)为单位（默认为0）

​ animation-timing-function：动画函数

​ linear:匀速（默认值）

​ ease:变速（先慢后快，最后再慢）

​ ease-in:变速（由慢到快）

​ ease-out:变速（由快到慢）

​ ease-in-out:变速（慢速开始，慢速结束）

​ cubic-bezier(n,n,n,n):自行设定变速，n的值在0-1之间

​ animation-delay：动画延时时间，一般以秒(s)或毫秒(ms)为单位

​ animation-iteration-count：动画循环播放的次数

​ 1）number：设定循环播放次数（默认次数为1次）

​ 2）infinite：一直循环播放

​ animation-direction：动画播放完后是否反向播放

​ 1）normal:不反向（默认值）

​ 2）alternate:反向

​ animation-play-state：动画播放或停止播放

​ 1）paused:停止播放

​ 2）running:播放（默认值）

​ b）简洁用法

​ animation:name动画名 duration动画持续时间 timing-function动画函数 delay动画延时时间 iteration-count动画循环播放的次数 direction动画播放完后是否反向播放;

13、css3布局

1. 多列（分栏）

   1. column-count 规定元素应该被分隔的列数。

      column-count：number|auto；

   2. column-gap 规定列之间的间隔（栏间距）

      column-gap：length|normal；

   3. column-rule 设置所有 column-rule-* 属性的简写属性。

      1. column-rule-style：设置线型

         none 隐藏线

         hidden 隐藏线

         dotted 点线

         dashed 虚线

         solid 实线

         double 双线

         groove 3D沟槽效果，该效果取决于宽度和颜色值。

         ridge 3D脊状效果，该效果取决于宽度和颜色值。

         inset 左上角阴影效果，该效果取决于宽度和颜色值。

         outset 右下角阴影效果，该效果取决于宽度和颜色值。

         注意：与column-rule-width和column-rule-color结合使用

         复合写法：column-rule：width style color；

   4. column-width 规定列的宽度。

      column-width：length|auto；

   5. columns 规定设置 column-width 和 column-count 的简写属性。

2. 弹性布局

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

   弹性容器常用的属性：

   1）flex-direction（应用于父元素）

   flex-direction 指定了弹性子元素在父容器中的位置。此属性作用于父容器。

   语法： flex-direction: row | row-reverse | column | column-reverse

   参数：

   row ：横向从左到右排列（左对齐），默认的排列方式。

   row-reverse ：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

   column ：纵向排列。

   column-reverse ：反转纵向排列，从后往前排，最后一项排在最上面。

   2）justify-content （应用于父元素）

   justify-content属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。此属性作用于父容器。

   语法： justify-content: flex-start | flex-end | center | space-between | space-around

   参数：flex-start：紧凑方式左对齐

   flex-end：紧凑方式右对齐

   center：紧凑方式居中对齐

   space-between：除了第一个和最后一个子元素外，其他子元素等分空白区域

   space-around：所有子元素等分空白区域

   3）align-items（应用于父元素）

   align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。此属性作用于父容器。

   语法： align-items: flex-start | flex-end | center | baseline | stretch

   参数：

   flex-start ：沿纵轴顶端对齐（默认）

   flex-end ：沿纵轴底端对齐

   center ：沿纵轴垂直居中对齐

   baseline ：沿纵轴基线对齐

   stretch ：纵向拉伸对齐

   4）flex-grow（应用于子元素）

   flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。此属性作用于子元素。

   语法： flex-grow： number；

   5）flex（应用于子元素）

   flex 属性用于指定弹性子元素如何分配空间。

   语法： flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

   参数：

   auto : 等价于 1 1 auto。

   initial : 等价于 0 1 auto。

   none ：等价于 0 0 auto。

   inherit ：从父元素继承。

   [ flex-grow ] ：定义弹性盒子元素的扩展比率。

   [ flex-shrink ] ：定义弹性盒子元素的收缩比率。

   [ flex-basis ] ：定义弹性盒子元素的默认基准值。

   tips：flex可以带1-3个参数

   1）带1个参数

   a）无单位，这个数值会被当作flex-grow（放大）的值

   b）带单位，这个数值会被当作flex-basis（基本宽度）的值

   c）auto（自动宽度）|initial（初始宽度）|none（无）

   2）带2个参数

   第1个参数必须是一个无单位的数值，它会被当作flex-grow的值。

   第2个参数：

   a）无单位，这个数值会被当作flex-shrink（收缩比率）的值

   b）带单位，这个数值会被当作flex-basis（基本宽度）的值

   3）带3个参数

   第1个参数必须是一个无单位的数值，它会被当作flex-grow的值。

   第2个参数也必须是一个无单位的数值，它会被当作flex-shrink（收缩比率）的值。

   第3个参数必须是一个有效的宽度值（带单位）它会被当作flex-basis（默认基准宽度值）的值

14、响应式布局

1. 响应式布局概念

   responsive design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在平板和电脑上更好地浏览阅读

2. 响应式布局和自适应布局区别（面试点）

   响应式布局只开发一套代码，通过检测视口的分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容

   自适应需要开发多套界面，通过检测视口的分辨率，来判断当前访问的设备是PC端、平板、手机等，从而请求服务层返回不同的页面。

   响应式布局等同于流动网格布局，而自适应等同于使用固定分割点来进行布局

   自适应布局给出了更多地设计空间，只用考虑几种不同的状态就可以了；而自适应布局要考虑成千上百的状态

3. 响应式开发实现方法

   1. 媒体查询

   2. 百分比布局

   3. rem布局（相当于根节点HTML中字号布局）

   4. 视口单位布局（vw/vh）

4. 响应式设计步骤

   1. 设置meta标签

   2. 通过媒体查询设置样式

   3. 设置多种视图的宽度

      宽度需要百分比/rem/vw/vh等

      处理图片缩放

      其他属性处理：如pre/iframe/video等，都要缩放大小，table建议不要增加padding属性，低分辨率下要内容居中

15、媒体查询

1. 设置meta标签

   说明：以上标签的内容只能被移动设备（诸如手提电脑 和 智能手机）识别

   viewport：视口（移动端）通俗的讲，移动设备上的viewport就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域

   width：可视区域的宽度，值可为数字或关键词device-width

   height：同width

   initial-scale：页面首次被显示可视区域的缩放级别，取值1.0（默认）则页面按实际尺寸显示，无任何缩放

   maximum-scale=1.0, minimum-scale=1.0：可视区域的缩放级别，

   maximum-scale：用户可将页面放大的程序，1.0（默认）将禁止用户放大到实际尺寸之上。

   user-scalable：是否可对页面进行缩放，no（默认） 禁止缩放

2. 设置IE渲染方式默认为最高版本

   如果安装了GCF（谷歌内嵌浏览器框架），则使用GCF来渲染页面；如果未安装GCF，则使用最高版本的IE内核进行渲染

3. 引入兼容js文件

说明：因为IE8及以下版本既不支持HTML5也不支持css3中的媒体查询，所以我们需要加载js文件处理兼容。上面的代码是一个注释语句，也就是说，IE9以上不会编译这几行代码

1. 进入css3提供的媒体查询

   1. 引入外部css文件时使用

      设备：all：所有设备

      screen：PC端显示器

      print：打印机或打印预览图

      Handeld：便携设备

      TV：电视

      speech：音频合成器

      Braille：盲人点触设备

      embossed：盲人打印机

      projection：投影设备

      TTY：固定密度字母栅格设备

      only：用来排除不支持媒体查询的浏览器

   2. 在style标签中用@media定义

2. web字体

   开发者引入外部字体

   语法：

   @font-face{

   font-family: 字体名；

   src: url（“字体文件”）format（“字体文件格式以处理浏览器兼容”）,url（...） format（...）,...;

   }

   实例：

   @font-face {

   font-family: myFirstFont;

   src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ }

3. iconfont的使用

   由阿里巴巴提供的一种图标字体，矢量图官网iconfont-阿里巴巴矢量图标库

   步骤：

   1. 创建一个项目

   2. 添加图标到购物车

   3. 将购物车的图标添加到项目中

   4. 下载iconfont文件，解压后，将部分文件复制到我的网页项目中

   5. 使用字体图标前，先引入iconfont.css文件

   6. 使用字体图标方法：

   7. 用类名

   8. 用Unicode值

      