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 混合名（实际参数列表）
默认参数只能放在最后
网友评论