黑马程序员：移动web

一、盒子宽度calc函数

​ width: calc(100% - 20px);
​ 表示宽度为父元素的100%-20px。

二、3D移动

​

transform: translateX(100px);
	transform: translateY(100px);
	transform: translateZ(100px);
	transform: translate3d(x,y,z);

​ 需要有一个透视效果才能有效果：
​ perspective: 1000px;推荐800到1200px，是指人和屏幕的距离(给父元素加)
​ 当视距等于y轴唯一的距离是，盒子就相当于和眼睛一个位置，所以就会消失

三、3d旋转

	transform: rotateX();
	transform: rotateY();
	transform: rotateZ();默认的就是Z轴
	transform: rotate3d(s,y,z,角度度数);

四、立体呈现

​ transform-preserve-3d添加在父元素

五、渐变背景

	background-image: linear-gradient(
		pink,
		green,
		更多的颜色...可以是transparent，rgba()
	);

六、动画

​

	@keyframes change {
	0% {
		width: 200px;
	}
	50% {
		width: 500px;
		height: 300px;
	}
	100% {
		width: 800px;
		height: 500px;
	}
}
	.box {
			width: 200px;
			height: 100px;
			background-color: pink;
		/* 使用动画 */
		animation: change 1s liner(动画正放一次后倒放) forwords(截止在动画结束时，默认动画开始时);
	}

七、flex布局

​ 给父元素添加display: flex;改变盒子显示模式
​ 主轴对齐方式：justify-content: space-xxx;属性使盒子可以延主轴均匀分布在一行。
​

.box {
			width: 100%;
			height: 200px;
			border: 1px solid #ccc;
			/*改变盒子显示模式*/
			display: flex;
			/* 两边顶头中间平均分布  */
			justify-content: space-between;
			/* 子盒子两边都有相同边距 */
			justify-content: space-around;
			/* 顶头和中间的边距都一样 */
			justify-content: space-evenly;
		}
	.box div {
			width: 100px;
			height: 100px;
			background-color: pink;
	}
	侧轴对齐方式
	.box {
			display: flex;		
		/* 居中 */
		/* align-items: center; */

		/* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
		/* align-items: stretch; */

		height: 300px;
		margin: auto;
		border: 1px solid #000;
	}
	
	.box div {
		/* width: 100px; */
		/* height: 100px; */
		background-color: pink;
	}

	/* 单独设置某个弹性盒子的侧轴对齐方式 */
	.box div:nth-child(2) {
		align-self: center;
	}
flex布局中如果弹性盒子没有宽高则默认宽度为内容宽度高度为弹性容器的高度。
	当侧轴有属性时高度为弹性盒子内容的高度。
伸缩比：
弹性盒子没有宽度时，给弹性盒子加flex：整数;可以给弹性盒子等比宽度	

改变主轴方向：

主轴方向改变后，align_items、justify-content方向也会反

	display: flex;
	/*改变主轴为Y轴*/
	flex-direction: column;
	/* 视觉效果: 实现盒子水平居中 */
    align-items: center;
    /* 视觉效果: 垂直居中 */
    justify-content: center;

弹性盒子换行：

弹性盒子在使用了flex布局后不会换行，因此需要给他加一个属性

	flex-wrap: wrap;

八、移动适配

​ 1rem=1html标签字号大小

九、媒体查询

1. 使用媒体查询，根据不同的视口宽度设置不同的根字号

​ 当视口宽度为375px时html根字号为40px

	@media (width:375px) {
		html {
		font-size: 40px;
		}
	}	
	@media (width:320px) {
		html {
		font-size: 20px;
		}
	}	

​ 下面的media不会层叠上面的。

2. 通常html根字号为视口宽度的1/10。

3. 在查看设计稿时一般都是px单位，所以我们需要计算出rem
   一般设计稿都是视口宽度都是375px
   因此rem=元素px/37.5

4. 我们不可能每个尺寸都给媒体查询
   flexible.js用来帮助我们给不同视口宽度媒体查询
   引用方法：

   <script src="js/flexible.js"></script>
   

十、less

1. less是css的预处理器后缀名为.less

   2. 浏览器不识别less我们在使用时还是要引入css

   3. easy less 插件：保存less文件自动生成css文件

   4. 注释

      单行注释：// 快捷键：CTRL+/
      多行注释：/**/ 快捷键：shift+alt+a

   5. 写法

   .box {
   	width: 100 + 10px;
   	width: 100 - 20px;
   	width: 100 * 2px;
   	
   	// 除法需要加()
   	// 68  > rem
   	width: (68 / 37.5rem);
   	// height: 29 ./ 37.5rem;(也可以写./但会报红还是不要这样写的好)
   }
   

   6. 嵌套

   less代码：

   .father {
   	width: 100px;
   	.son {
   		color: pink;
   		// & 表示当前选择器
   		&:hover {
   			color: green;
   		}
   	}
   	&:hover {
   		color: orange;
   	}
   }
   

   转换后css代码：

   转换后css代码：

   .father {
   	width: 100px;
   }
   .father .son {
   	color: pink;
   }
   .father .son:hover {
   	color: green;
   }
   .father:hover {
   	color: orange;
   }
   

   7. 变量

      定义变量
      @变量名：变量;
      使用变量
      .box {
      属性：@变量名;
      }

   8. 导入

      less文件可以相互导入
      导入方式：
      @import ‘xxx.less’; //后缀可以省略

   9. 导出

      less文件自动生成的css文件可以更改导出路径
      在设置中搜索easy—>点击setting.json—>在"less.compile"中添加 “out”: "…/css/"代码
      之后自动生成的css文件都会导出在css文件夹里
      *如果某个less需要单独的导出路径时：
      在less文件里开头写
      // out: …/css/

   10. 禁止导出
       如base等只需要别的less直接引入就可以
       // out: flase

十一、vw/vh

1vw/vh=1/100视口宽度/高度

vw=像素px÷1/100视口宽度一般为3.75

vh=像素px÷1/100视口高度一般为6.67

vw vh不要混用

十二、响应式

根据不同条件改变样式

1.使用媒体查询

/*小于等于700px时背景颜色为red*/
@media (max-width: 700px) {

​	body {
		background-color: red;
	}

}
/*大于于等于900px时背景颜色为green*/
@media (max-width: 900px) {

​	body {
		background-color: green;
	}

}

2.使用媒体查询时注意事项

min-width要从小到大书写

max-width要从大到小书写

3.媒体查询link引入

/*当视口宽度大于等于700px时引用one.css文件样式*/
<link rel="stylesheet" href="./css/one.css" media="(min-width: 700px)">

十三、Bootstrap

1.下载

www.bootcss.com ---->选择3.4.1—>下载第一个使用 (第一个是框架，第二个是源码，第三个是大量sass源码)

2.引用

<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap-theme.min.css">

3.bootstarp栅格系统

bootstrap默认将视口宽度分为12等分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aoq00gEt-1657859048196)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220714170215828.png)]

4.bootstrap中的类名

.container：版心居中自带左右15px的内边距；

.row：左右自带-15px的内边距，用来抵消.container的内边距

.container-fluid：宽度为100%视口宽度，自带15px内边距

5.插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QNnwfUY6-1657859048198)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220714175534516.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EWBTtRvr-1657859048198)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220714175458830.png)]

dist/css/bootstrap-theme.min.css">

3.bootstarp栅格系统

bootstrap默认将视口宽度分为12等分

[外链图片转存中...(img-aoq00gEt-1657859048196)]

4.bootstrap中的类名

.container：版心居中自带左右15px的内边距；

.row：左右自带-15px的内边距，用来抵消.container的内边距

.container-fluid：宽度为100%视口宽度，自带15px内边距

5.插件

[外链图片转存中...(img-QNnwfUY6-1657859048198)]

[外链图片转存中...(img-EWBTtRvr-1657859048198)]