前端：HTML CSS阶段的一些补充

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：在元素之后插入内容

:after/before
{
    content:"";
    disable:block/inline; 
    ...    
}

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

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

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

单行文本溢出显示省略号

.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 的规则。也就是说，动画会在两个方向上扩展动画属性。