回炉重造十二

勿

夜

1.3D转换模块

1.什么是2d和什么是3d

2d就是一个平面，只有高度和宽度，没有厚度

3d就是一个立体，有高度和宽度，还有厚度

默认情况下所有的元素都是呈2d展示的

2.如何让某个元素呈3d展现

和透视一样，想看到某个元素的3d属性效果：只要给他的父元素添加一个transform-style属性

然后设置prescrve-3d即可

3.在企业开发中(正方体) 3D设置面的顺序是 上后下正左右

transfrom:rotateX(90deg/180deg/270deg/360deg) translateZ(一半的长度);

要做(长方体)的话可以 做好正方体然后属性后面设置scale(x倍数,y的倍数);

注意点：

只要父元素被拉伸了，子元素也会被拉伸

2. 3D播放器

填满整个网页

background-size:cover;

注意点：动画中如果有和默认样式同名的属性，会覆盖

默认样式中同名的属性

2.在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面

3. background-size 背景尺寸

默认值

具体像素

第一个参数:宽度

第二个参数:高度

百分比

第一个参数:宽度

第二个参数:高度

宽度等比拉伸/高度等比拉伸

第一个参数:宽度

第二个参数:高度

哪个属性要等比拉伸就设置为auto就ok了

cover

cover含义:

1.告诉系统图片需要等比拉伸

2.告诉系统图片需要拉伸到宽度和高度都填满元素

contain

contain含义:

1.告诉系统图片需要等比拉伸

2.告诉系统图片需要拉伸到宽度或高度都填满元素

4.背景图片定位区域属性 background-origin

background-origin作用:

告诉系统背景图片从什么区域开始显示,

默认情况下就是从padding区域开始显示

padding-box

border-box

content-box

5.背景绘制区域属性 background-clip

背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景

padding-box

border-box

content-box

6.多重背景图片

多张背景图片之间用逗号隔开即可

注意点:

先添加的背景图片会盖住后添加的背景图片

建议在编写多重背景时拆开编写

如:

background-image:(方便告诉别人这里放置了多少张图片),(图片)....;

background-repeat:no-repeat, no-repeat(有多少张写多少次)....;

background-position:(图片有多少张写多少次),...;

7.css书写格式

1.行内样式

第一个位置，可以直接将css代码写在开始标签中

2.内嵌样式

可以在一对head标签当中写上一对style标签，然后再style标签总编写css代码

3.外链样式--企业开发中一般都用外链样式

可以单独新建一个.css的文件，把CSS代码写到这个文件中，然后通过link标签把.html文件关联起来

4.导入样式

可以单独新建一个.css的文件，把CSS代码写到这个文件中，然后通过

@import把.html文件关联起来

外链样式和导入样式区别：

1.外链样式是通过link标签关联而导入样式是通过@import关联

而@import是css2.1推出的，所以有兼容问题

2.外链样式在显示界面的时候，会先加载css样式，再加载结构，所以用户看到界面时

一定已经设置了样式

导入样式在显示界面的时候，会先加载结构，再加载样式，所以用户看到界面的时不一定

已经设置了样式。

8.开发一个静态页面要做的事情

1.编写网站要做的第一件事情

创建站点文件夹，并且创建一些子文件夹和子文件

注意点：

创建站点文件夹可以是中文

但是站点文件夹下面的子文件夹和子文件不能出现中文

2.重置所有默认的样式和设置一些全局样式，并且将伸直样式的css文件

和对应的界面关联起来。

清空默认的样式

http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

设置全局属性

9.边框圆角的作用:

将原始的直角变为圆角

格式:

border-radius: 100px 0px 0px 0px;

第一个参数: 指定左上角的半径

按照左上/右上/右下/左下的顺序

border-radius: 0px 0px 0px 100px;

如果省略一个参数, 会变成对角的值

border-radius: 100px 80px 40px;

如果省略两个参数, 会变成对角的值

border-radius: 100px 80px;

如果省略三个参数, 其它角会和它一样

border-radius: 100px;

如果指定的半径是当前元素宽高的一半, 那么就是一个圆形

border-radius: 100px;

border-radius: 50%;