移动端排版和弹性盒布局以及scss的使用

1.首先meta标签

一.移动端的单位:

绝对单位  px

相对单位  rem  em

浏览器默认的字体大小 16px  那么 1em=16px

em具有继承性  继承自直接父类  所以说在移动端很少用

rem 有一个统一的标准  它继承自html

16px==1rem

用rem来表示20像素

可以给html的字体大小设置为10px  10px==1rem    20px==2rem  30px==3rem

html{

font-size:62.5%;

}

rem能用在任何关于单位的属性上 eg  width  height  padding  margin等

rem与em的区别？

1、em具有继承性  继承自直接父类  最外层的标签继承自 body

2、rem 没有继承性  所有的标签都是继承自html

排移动端的页面是以苹果4为标准  320*480 以320的图为标准

box-sizing:border-box|content-box

border-box:  设置的宽度包含 border  padding  content

content-box:默认值  宽度等于内容宽

3：@import url(**.css); 引入外部样式  效率比link高  减少一次http请求

二、什么是弹性盒？

可以根据某些子元素设置的宽度或者高度自动为其他的子元素设置宽和高

2、将元素设置为弹性盒

display:flex  将此属性设置在父元素上

默认主轴方向是水平轴

3、分配父元素剩余的空间

-webkit-flex-grow:整数  （子元素上）

整数表示占父类剩余空间的份数

如果主轴是水平轴 那么该属性分配的是宽

如果主轴是垂直轴 那么该属性分配的是高

4、设置主轴的方向 （父元素上）

-webkit-flex-direction:row|row-reverse|column|column-reverse

默认值是row

row 水平排列  从左到右

row-reverse  从右到左

column 垂直排列  从上到下

column-reverse  从下到上

5、设置子元素在侧轴上的对齐方式 （父f元素上）

-webkit-align-items:flex-start|flex-end|center

flex-start  侧轴的起始

center  居中

flex-end  侧轴的结束位置

6、设置子元素在主轴上的对齐（父元素）

-webkit-justify-content:flex-start|flex-end|center|space-around|space-between

flex-start:主轴起始位置

flex-end:主轴的结束位置

center:居中

space-around:子元素与两端的距离是子元素与子元素距离的一半

space-between:子元素与两端的距离是0

7、设置子元素的显示顺序（子元素）

order:数字

值越小越靠前  可以为负值

8、设置子元素是否为单行排列（父元素）

flex-wrap:nowrap|wrap|wrap-reverse

nowrap 单行 默认值

wrap  多行

wrap-reverse  多行 反向

9、flex-flow:flex-direction|flex-wrap  设置主轴的方向以及是否10为单行排列

10、flex-shrink 缩小因子  默认值是1

11、flex-basis:设置弹性盒子元素的基准值

12  -webkit-flex:flex-grow|flex-shrink|flex-basis

3、需要知道的概念

主轴  侧轴

在坐标中有两个方向  垂直  水平

如果主轴是水平 那么侧轴是垂直

如果主轴是垂直 那么侧轴就是水平

弹性盒子元素的排列方向永远和主轴的方向一制

浏览器内核：

谷歌 -webkit

火狐 -moz

iE  -ms

欧朋 -o

三：什么是scss？

scss是css的预处理器，css 是标记语言 不可以定义变量 封装 引用等

2、scss的使用

a、在自己的项目目录中新建css文件夹 新建**.scss

b、打开考拉工具  将新键的css文件夹拖进去（路径中不能有中文）

c、在html引入生成的css文件

3、scss中使用变量

$变量名（自己起）：值

变量的使用：

1、在属性值的位置使用变量

属性名：变量

2、在属性名的位置使用变量

#{变量}：值

4、scss中的计算功能

scss中支持算术运算符  + - * / %

5、scss中是支持注释的

//  单行注释  单行注释是不会被编译出来的

/**/多行注释  scss中多行注释能在css文件中被编译出来

如果在scss中使用中文（注释）需要在scss文件的最上方设置中文编码

@charset "UTF-8"

6、scss中的嵌套（选择器）*****

css3中关系选择器

>  子类选择器

空格 后代选择器

+  紧邻的下一个兄弟

~  后边的所有兄弟

属性的嵌套

属性：{

属性：*****；

}

.box{

width:0;

height:0;

border:{

top:20px solid red;

bottom:20px solid #fff;

left:20px solid #fff;

right:20px solid #fff;

}

}

7、scss中的继承

定义：

.继承名（类名）{

公共代码；

}

调用：

@extend 继承名；

特点：在没有被调用的时候就会被解析

自己总结是怎么解析的

8、scss的占位符

定义：

%占位符名{

公共代码；

}

调用：

@extend 占位符；

特点：不调用不解析

9、混合宏 简称混合

定义

@mixin 混合名（形式参数列表）{

公共代码；

}

调用：

@include 混合名（实际参数列表）

默认参数只能放在最后