css-移动端web注意点复习

转换有哪些转换效果？取值分别是什么？

• 属性名：transform
• 属性值：
  • 平移：translate
  • 旋转：rotate
  • 缩放：scale

转换中：transform:translateX(100%); 中的百分比相对于谁？

• 相对于自己宽度的100%，表示向右平移自己宽度的100%

perspective 和 transform-style: preserve-3d 的区别？哪个是真3D？

• perspective: (1000px); 视距，设置在父元素，给子元素有一种近大远小的视觉效果，实际上还是平面。
• transform-style: preserve-3d; 设置在父元素，让所有子元素成为真正的3D立体元素

动画和过渡的区别

• 动画：
  • 不需要触发条件，一打开网页即可
  • 可以一直动
  • 可以控制多个状态
• 过渡：
  • 需要触发条件 :hover
  • 最终会结束
  • 只能控制两个状态

使用动画的步骤

• 定义动画

  @keyframes 动画名 {
    from {开始状态的样式}
    to {结束状态的样式}
  }
  或者
  @keyframes 动画名 {
    0% {状态样式}
    50% {状态样式}
    ...
    100% {状态样式}
  }
  

• 调用动画

  选择器 {
    animation: 动画名 动画持续时间...
  }
  

视口的完整写法是什么？各自是什么含义？

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">

• width=device-width; 设置视口的宽度为设备宽度
• initial-scale=1.0; 默认缩放为1倍
• user-scalable=1.0; 禁止用户缩放
• maximum-scale=1.0; 最大缩放为1倍
• minimum-scale=1.0; 最小缩放为1倍

flex布局的相关属性有哪些？

给父元素设置的相关属性：
1.display:flex; 弹性盒子

2.flex-direction; 主轴方向
	取值：
		row; 水平向右
		row-reverse; 水平向左
		column; 垂直向下
		column-reverse; 垂直向上

3.justify-content; 主轴对齐方式
	取值：
		flex-start; 向开始方向对齐
		flex-end; 向结束方向对齐
		center; 居中对齐
		space-around; 1 2 2 1 空白环绕
		space-between; 0 1 1 0 空白只在盒子之间显示
		space-evenly; 1 1 1 1 空白均分

4.align-items; 单行侧轴对齐方式
	取值：
		flex-start; 向开始方向对齐
		flex-end; 向结束方向对齐
		center; 居中对齐
		stretch; 拉伸（默认值），如果不设置子元素高度，就能看到拉伸效果

5.align-content; 多行侧轴对齐方式
	取值：
		flex-start; 向开始方向对齐
		flex-end; 向结束方向对齐
		center; 居中对齐
		stretch; 拉伸（默认值）
		space-around; 1 2 2 1 空白环绕
		space-between; 0 1 1 0 空白只在盒子之间显示
		space-evenly; 1 1 1 1 空白均分

6.flex-wrap; 设置子元素换行
	取值：
		no-wrap; 不换行
		wrap; 换行


给子元素设置的属性：
1.flex; 分配子元素空间，是剩下的空间才按份数进行分配。
2.order; 子元素排序，数字，数字越小排名越靠前
3.align-self; 单个子元素的对齐方式，取值和align-items一样

圣杯布局用flex布局如何实现？

圣杯布局（双飞翼布局）：左右两侧固定宽度，中间自适应
<div class="box">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

<style>
  .box {
    height: 300px;
    border: 1px solid #333;
    display: flex;
  }
  .left {
    width: 100px;
    background: pink;
  }
  .right {
    width: 100px;
    background: red;
  }
  .center {
    flex: 1;
    background: yellow;
  }
</style>

less中声明变量和函数的语法分别是什么？

声明变量：
@变量名: 变量值;
例: @mainColor: #eee;

声明函数：
.函数名() {样式}
例：
.box(@color) {
  width: 100px;
  height: 100px;
  background: @color;
}

调用函数：
.father {
  .box(@mainColor)
}

em 和 rem 的区别？

• em：相对于当前标签的font-size，1em = 1当前标签的font-size
• rem：相对于根元素html的font-size，1rem = 1html的font-size

媒体查询的语法和条件分别是什么？

语法：
@media screen and (条件) {
  选择器 {样式}
}

条件：
	1.min-width 样式生效的最小宽，当屏幕大于或等于min-width时，样式生效
	2.max-width 样式生效的最大宽，当屏幕小于或等于max-width时，样式生效
	3.width 样式生效的宽度，屏幕正好等于width时样式生效

bootstrap 中的布局容器有哪些？

• container 响应式布局容器
• container-fluid 流式布局容器

bootstrap 中的栅格系统如何使用？

语法：
	.col-取值1-取值2
例：.col-lg-6

取值1：
	1.lg：大屏及以上屏幕生效
	2.md：中屏及以上屏幕生效
	3.sm：小屏及以上屏幕生效
	4.xs：超小屏及以上屏幕生效

取值2：0~12份数