目录

目录

一、关于一些显示隐藏类型的相关元素

        1.display：定义元素使如何显示的

        2.visibility：可见性

二、透明度相关

        1.rbga元素（red，green， blue，不透明度）

        2.opacity：不透明度（该元素会继承至子元素，子元素需重新设置透明度）

三、元素的溢出属性

overflow：当元素溢出时，如何进行显示

修改滚动条样式:

四、居中相关

1.文本水平居中：

2.文字的垂直居中：

3.图片的垂直居中对齐：

4.盒子的水平居中：

5.盒子的垂直居中：

6.水平垂直居中：

五、CSS3的部分补充：CSS3被拆分为“模块”。旧规范已经拆分为小块，还增加了新的（在CSS2的基础上新增了部分属性）

1.边框属性：        

2.盒子阴影

        box-shadow：给盒子设置阴影 

可以设置多个阴影，属性使用逗号隔开

3.背景新增的属性 

        background-origin：定义背景图的定位区域

        background-clip：定义背景的绘制区域

4.CSS3渐变（该属性是基于background-image属性）

5.CSS3自定义字体

        @font-face：定义自定义字体

字体图标的使用：（基于自定义字体而实现）

六、伪元素

七、text-overflow（规定当文本溢出元素时如何显示）                

        单行文本溢出显示省略号

        

        多行文本溢出显示省略号

八、CSS3的转换（2D或3D效果）

transform  应用于元素的2D和3D的转换

旋转

缩放

移动

倾斜/斜切

transform-origin：用来改变转换元素的位置/轴

嵌套的元素在三维空间中呈现：（transform-style）

3D效果相关:

        1.perspective:规定 3D 元素的透视效果。

        2.   perspective-origin    规定 3D 元素的底部位置。

        3.   backface-visibility    定义元素在不面对屏幕时是否可见。

九、CSS3的过渡属性

transition属性：给元素添加过渡效果  简写

        property duration timing-function delay（ 多个样式时间不一致：width 2s,height 5s   使用,隔开）

        transition-delay：什么时候们开始过渡  默认0  

        transition-duration：过渡所需要的时间  默认0

        transition-property：用于过渡的属性

        transition-timing-function：过渡效果的时间曲线

十、CSS的动画（创建动画，取代网页中动图，flash动画以及js实现的效果）

animation属性：调用动画

   1.animation-name：规定 @keyframes 动画的名称

  2.animation-duration：规定动画完成一个周期所花费的秒或毫秒

   3.animation-timing-function：规定动画的速度曲线

      4.animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式

        5.animation-delay：规定动画何时开始

        6.animation-iteration-count：规定动画被播放的次数

        7. animation-direction：规定动画是否在下一周期逆向地播放

        8.alternate

        9.animation-play-state    规定动画是否正在运行或暂停（默认为running）

---

一、关于一些显示隐藏类型的相关元素

        1.display：定义元素使如何显示的

                block：显示元素

                none：隐藏（不占位，会导致文本内容出现格式变化）

        常用于创建绝对定位下的下拉菜单或蒙版。

        2.visibility：可见性

                visible：元素是可见的（默认值）

                hidden：元素不可见（占位，隐藏时不会导致文档出现内容变化，相当于将元素设置为透明）

二、透明度相关

        1.rbga元素（red，green， blue，不透明度）

        作为元素的颜色属性值进行使用，常用于color或bgcolor属性中。

        该元素不会继承至子元素，且较多用于蒙版。

        2.opacity：不透明度（该元素会继承至子元素，子元素需重新设置透明度）

        value：0到1（0为完全透明，1为完全不透明）

三、元素的溢出属性

overflow：当元素溢出时，如何进行显示

visible（默认值）	内容不被修剪，呈现在元素框之外
hidden（隐藏）	内容被裁剪，并且多余的内容不可见
scroll（滚动条）	内容会被修剪，浏览器会显示滚动条以便查询其余的内容，且不管是否被修剪都会显示滚动条
auto	如果内容被修剪，浏览器则会显示滚动条

修改滚动条样式:

 1.webkit-scrollbar 滚动条整体部分

 2.webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂       直滚动条还是水平滚动条）

 3.webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）

 4.webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。

 5.webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）

 6.webkit-scrollbar-corner 边角，即两个滚动条的交汇处

 7.webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 

四、居中相关

1.文本水平居中：

        1.text-align：center        给盒子（父元素）/块级元素设置，图片也属于文本

        2.padding：设置导航，按钮，菜单等类的内边距

2.文字的垂直居中：

        line-height:数值，将文字的行高设置为当前父元素的高

        margin：不占背景色

        padding：占背景色

3.图片的垂直居中对齐：

        margin-top:设置数值

        图文对齐：

        vertical-align：middle 图片和文字的中线对齐，可以通过line-height调整文字的行高

        float：给图文设置浮动，同时给文字设置行高为图片的高度。

4.盒子的水平居中：

        1.margin：0 auto；        0可以设置为自己需要的数字，进行上下调整，auto为自动计算使文本居中

        2.定位：给子元素绝对定位，数值设置为left：50%；margin-left：自身宽的负50%

5.盒子的垂直居中：

        1.margin：数值；        通过计算来设置具体数值进行居中

        2.定位：给子元素绝对定位，数值设置为top：50%；margin-left：自身高的负50%

6.水平垂直居中：

        子元素相当于父元素的绝对定位：

           top:0;

           left:0;

           right:0;

           bottm:0;

           margin:auto;

五、CSS3的部分补充：CSS3被拆分为“模块”。旧规范已经拆分为小块，还增加了新的（在CSS2的基础上新增了部分属性）

1.边框属性：        

        1)border-radius：设置元素的圆角

        2) border-image：设置所有边框图像

border-image-source	指定用于边框图片的路径
border-image-slice	图像边界向内偏移 number（像素） %相对于图片大小的百分比
border-image-width	图像边界的宽度 number（border-width的倍数） %相对于图片大小的百分比
border-image-outset	指定边框外部绘制图像的面积 length：px rem em  边框与边框图像的距离 number：border-width的倍数
border-image-repeat	用于设置图像边界是否重复

                

        3）border-image-repeat：                

                tretch    默认值。拉伸图像来填充区域

                repeat    平铺（repeated）图像来填充区域 

                round    类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域 

               space    类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围

2.盒子阴影

        box-shadow：给盒子设置阴影 

           h-shadow：水平阴影位置  必需  可以是负值

           v-shadow：垂直阴影位置  必需  可以是负值

           blur：模糊范围/距离

           spread：阴影的大小

           color：阴影的颜色

           inset：内侧阴影

可以设置多个阴影，属性使用逗号隔开

3.背景新增的属性 

        background-image：插入背景图片

        background-size：设置背景图的大小

        background-origin：定义背景图的定位区域

padding-box	默认的  从padding开始填充
border-box	从边框开始填充
content-box	只填充在内容区域

        background-clip：定义背景的绘制区域

padding-box	默认的  从padding开始填充
border-box	从边框开始填充
content-box	只填充在内容区域

4.CSS3渐变（该属性是基于background-image属性）

        1） 线性渐变：linear-gradient  从点到点：

                linear-gradient(direction/angle,color-stop1,color-stop2,...) 创建一个线性渐变的图像

                direction：方向  默认自上而下  to  bottom/left /right/top

                angle：角度  deg单位 

        2） 径向渐变：radial-gradient  从点到四周

                radial-gradient(shape size at position,start-color,...last-color) 创建一个径向渐变的图像(center 同edges)

                 shape：定义形状  circle(圆形)  ellipse(默认 椭圆)

                 size：大小                

                position：位置 top  bottom  left  right center（默认）  

                 坐标：

                 farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角

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

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

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

        

                3）重复渐变

                 repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...)创建

重复的线性渐变图像

                 repeating-radial-gradient()  创建重复的径向渐变图像

        

5.CSS3自定义字体

        使用除自带字体以外的字体

        字体图标库

        @font-face：定义自定义字体

        @font-face

        {

       font-family:必需  定义字体名称

       src:必需  定义字体的路径 

       font-style:设置字体的样式

       font-weight:设置字体的粗细

       font-stretch:设置字体如何拉伸

      }

字体图标的使用：（基于自定义字体而实现）

1.下载自定义字体库 ==》2.引用字体库 ==》3.使用自定义字体

2.下载自定义字体库：阿里矢量图标库（选择自己需要的图标，添加购物车，下载代码，包含字体库）

3.引用字体库（阿里矢量图标库，@font-face{font-family:字体库名字;src:字体库地址}）

4.使用自定义字体（html标签中使用）

六、伪元素

        1.before：在元素之前插入内容，给元素添加子元素

        2.after：在元素之后插入内容

<code>:after/before

{

content:"";

disable:block/inline;

...

}

插入伪元素时可以添加各种属性，且插入该元素可以清除浮动，常用于字体图标库

七、text-overflow（规定当文本溢出元素时如何显示）                

initial	设置为默认值
clip	裁剪文本
ellipsis	显示省略号 ，代替被修剪的文本
string	使用特定的字符串代表被修剪的文本（只针对火狐浏览器）

        单行文本溢出显示省略号

<code>.text

{

white-space: nowrap;

/* 文本不换行 */

overflow: hidden;

/* 溢出隐藏 */

text-overflow: ellipsis;

/* 文本溢出部分被省略号代替 */

}

        

        多行文本溢出显示省略号

.text{

overflow: hidden;

/* 溢出隐藏 */

display: -webkit-box;

/* 兼容到使用webkit内核的浏览器 */

-webkit-line-clamp: ;

/* 显示的最大行数 */

-webkit-box-orient: vertical;

/* 设置垂直方向上排列 */

text-overflow: ellipsis;

/* 文本溢出部分被省略号代替 */

}

八、CSS3的转换（2D或3D效果）

transform  应用于元素的2D和3D的转换

旋转

rotate()：定义2D的旋转  单位deg

 rotateX()：沿X轴旋转

 rotateY()：沿Y轴旋转

 rotateZ()：沿Z轴旋转

 rotate3d(x,y,z,deg)：定义3D的旋转 0/1,0/1,0/1,角度

   

缩放

 scale() 定义2D的缩放

 scaleX() 沿着X轴的缩放

 scaleY() 沿着Y轴的缩放

 scaleZ() 沿着Z轴的缩放

 scale3d(x,y,z) 定义3D的缩放

  

移动

 translate()  定义2D的移动

 translateX()  沿着X轴移动

translateY()  沿着Y轴移动

translateZ()  沿着Z轴移动

 translate3d()  定义3D的移动

倾斜/斜切

skew()：定义2D的倾斜

skewX()：沿着X轴倾斜

skewY()：沿着Y轴倾斜

transform-origin：用来改变转换元素的位置/轴

x：left right center px %

y：top bottom center px %

z：px

嵌套的元素在三维空间中呈现：（transform-style）

   flat：所有子元素在2D平面中呈现

 preserve-3d：所有子元素在3D空间中呈现

3D效果相关:

        1.perspective:规定 3D 元素的透视效果。

                none：默认值 不设置透视  0

                 number：元素距离透视的距离，像素

        2.   perspective-origin    规定 3D 元素的底部位置。

                x：left center right px %

                y：top center bottom px %

        3.   backface-visibility    定义元素在不面对屏幕时是否可见。

                 visible：背面可见

                 hidden：背面不可见

   

九、CSS3的过渡属性

 给元素添加一个效果，从一个样式过渡到另一个样式，是使用css的方式来实现某些js的效果

transition属性：给元素添加过渡效果  简写

        property duration timing-function delay（ 多个样式时间不一致：width 2s,height 5s   使用,隔开）

        transition-delay：什么时候们开始过渡  默认0  

        transition-duration：过渡所需要的时间  默认0

        transition-property：用于过渡的属性

                none：默认

                property：具体的属性

                all：所有的属性 

        transition-timing-function：过渡效果的时间曲线

                linear    规定以相同速度开始至结束的过渡效果。

                ease    规定慢速开始，然后变快，然后慢速结束的过渡效果。

                ease-in    规定以慢速开始的过渡效果。

                ease-out    规定以慢速结束的过渡效果。

                ease-in-out    规定以慢速开始和结束的过渡效果。

十、CSS的动画（创建动画，取代网页中动图，flash动画以及js实现的效果）

@keyframes name

{

0%{

width:;

color:;

}

10%{

width:;

color:;

}

20%{

width:;

color:;

}

100%{

width:;

color:;

}

}

name：动画的名称（必需的）

0%-100%设置帧（from=0%，to=100%）

在其中设置css样式即可创建关键帧动画

animation属性：调用动画

        属性排列：animation: name duration timing-function delay iteration-count direction fill-mode play-state

   1.animation-name：规定 @keyframes 动画的名称

        none：没有动画

        keyframename：调用动画的名称  

  2.animation-duration：规定动画完成一个周期所花费的秒或毫秒

        number   设置数值 ，默认是 0。

   3.animation-timing-function：规定动画的速度曲线

        linear    规定以相同速度开始至结束的过渡效果。

        ease（默认）    规定慢速开始，然后变快，然后慢速结束的过渡效果。

        ease-in    规定以慢速开始的过渡效果。

        ease-out    规定以慢速结束的过渡效果。

        ease-in-out    规定以慢速开始和结束的过渡效果。

        4.animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式

         none    默认值。动画在动画执行之前和之后不会应用任何样式到目标素。         

        forwards    在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。

         backwards    动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。

        both    动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

 

        5.animation-delay：规定动画何时开始

                默认是 0

        6.animation-iteration-count：规定动画被播放的次数

                默认是 1

                number：动画执行的次数

                infinite：无限循环

        

        7. animation-direction：规定动画是否在下一周期逆向地播放

                默认是 "normal"。效果为正常播放

                reverse    动画反向播放。

 

        8.alternate

        该行代码表示动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放

        alternate-reverse    动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放

        9.animation-play-state    规定动画是否正在运行或暂停（默认为running）

                 pasued：指定暂停动画