学习前端的第十七天——属性扩充

今天对3d属性和动画属性进行学习，然后放个端午的假期后，就准备进入js的学习了

一、3D属性

transform:translate3d(值1, 值2, 值3);

• 值1表示水平（左右）的位置
• 值2表示垂直（上下）的位置
• 值3表示前后的位置

transform:rotate3d(值1, 值2, 值3, 值4);

• 前三个值，0 or 1
• 0表示不沿着该轴进行旋转，1表示旋转
• 值4表示度数（deg）

transform:scaleZ();

• 表示元素在Z轴进行缩放
• Z轴上进行缩放其实表示的是厚度

二、动画属性

animation动画属性

• 不需要事件去触发，可以自执行
• 可以控制动画执行的过程
• 动画执行三要素：
  动画名称
  动画时间
  动画执行体

属性和语法：

/*动画名称*/
animation-name:;					自己命名，，配合@keyframes使用

/*动画执行体*/
@keyframes name{
	/*开始执行*/
	from{}
	/*到这里结束*/
	to{}
}

/*也可以根据百分比*/
@keyframes name{
	0%{}
	25%{}
	50%{}
	75%{}
	100%{}
}
			
/*动画时间*/
animation-duration:;      			动画持续时间，完成时间

/*动画延迟时间*/
animation-delay	:;					动画过多久后开始执行

/*动画执行次数*/
animation-iteration-count: 			infinite:无限循环； number:循环次数

/*动画执行方向*/
animation-direction:;				normal:正常方向，默认值
									reverse:反方向运行
									alternate:动画先正常运行再反方向运行，并持续交替运行
									alternate-reverse:动画先反运行再正方向运行，并持续交替运行
									
/*动画类型*/
animation-timing-function:			linear:匀速
									ease:逐渐减速
									ease-in:加速
									ease-out:减速
									ease-in-out:先加速后减速
									step-start:马上跳到动画每一结束桢的状态
									
/*停止动画执行*/
animation-play-state: paused;		当鼠标经过时动画停止，鼠标移开动画继续执行

/*动画缩写形式*/
animation: name duration function delay direction count;		没有先后顺序，不过要注意duration在delay前面

animation和transition的区别：

• 相同点：都是随着时间改变元素的属性值。

• 不同点：
  transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；
  animation不需要触发任何事件，也可以显示随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

三、BFC（Block formatting context）

• 块级格式上下文
• 网页布局规则中的一个渲染区域
• 格式上下文，代码执行的一个环境
• FC其实指的是就是一些规则，标准流、浮动流、定位流
• BFC其实就是之前学习的一些规则的总结和应用

BFC布局规则（特性）

• 内部的 box 会在垂直方向一个接一个的排列
• box 垂直方向的距离由 margin 决定，同一个 BFC 中相邻的两个 box 的 margin 会发生重叠
• 每个元素的 margin-left 与包含块的 border-left 相接触
• BFC 区域不会与 float box 重叠
• 计算 BFC 高度时，浮动元素会参与计算
• 容器内元素布局不影响外部元素，反之亦然

如何触发 BFC

• 根元素，即 html 元素
• float 的值不为 none
• overflow 的值不为 visible
• display 的值为 inline-block、table-cell、table-caption
• position 的值为 absolute 或 fixed

BFC的应用

• 解决浮动塌陷问题
• 自适应两栏布局（可以运用BFC阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。
  方法：给没有浮动的元素加overflow：hidden。）
• 解决设置margin值重叠问题。

总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。它规定了元
素与其他元素的关系和相互作用。其实就是规则的总结

四、补充

calc

• 计算属性 ，可以在里面进行加减乘除，避免计算的麻烦
• 例如：width: calc(120px * 16);
• 注意：运算符号左右需要空格

text-transform大小写转换：

• capitalize： 英文单词以大写开头
• uppercase： 把小写转成大写
• lowercase： 把大写转成小写

font-variant

• 把文本设置为小型大写字母字体
• normal ：默认值。浏览器会显示一个标准的字体。
• small-caps：把小写转成大写，然后以小型字体显示

粘性定位

• 一个定位有两种定位属性的特点，相对定位，固定定位
• position: sticky;
  top: 20px;
  开始时是相对定位，距离浏览器顶部20px的时候就变成固定定位,做成吸顶效果

background-size

• cover： 可以根据图的比例把背景拉伸到容器完全覆盖，图的有些区域显示不完整
• contain： 可以根据图的比例把背景图按着合理的比例进行拉伸，背景图可以完整的显示出来
• 设值，值1宽度，值2高度  比较常用

background-origin

• 背景图从什么区域开始显示
• border-box： 以border区域开始显示
• padding-box： 以padding区域开始显示
• content-box： 以content区域开始显示

background-clip

• 背景裁剪属性
• border-box： 将border之外的区域裁剪，只显示border里的区域
• padding-box： 将padding之外的区域裁剪，只显示padding里的区域
• content-box： 将content之外的区域裁剪，只显示content里的区域

多重背景

• background:url(图一) no-repeat, url(图2) no-repeat;
• 注意：前面的图会把后面的图给覆盖掉
• 不建议使用，存在许多问题，例如无法控制大小

清除浮动

• 万能清除法，可以兼容所有的浏览器
• 原理也是利于了空盒子的方法

.clear{
	/*zoom在平时可以起到缩放效果，不过宽高不会有变化*/
	zoom: 1; 				兼容IE地板的浏览器的，可以触发IE浏览器的机制让其支持clear属性
}
.clear::after{
	content: "";
	display: block;
	clear: both;
	visibility: hidden;		为了防止content里有内容
	height: 0;				可以不加，不过IE低版本下有问题，不写高的时候会默认有大概18px的高
}