1.设置弹性盒
任何元素都可以设置
display:flex;
display:inline-flex //给行内元素设置弹性盒子
display:-webkit-flex; //webkit(是浏览器的内核,是谷歌浏览器和safari(苹果浏览器)的内核)
display:-webkit-flex //谷歌浏览器和safari(苹果浏览器)的内核
display:-moz-flex 火狐浏览器的内核
display:-ms-flex IE浏览器的内核
display:-o-flex 欧朋浏览器的内核
2.设置Flex布局以后,子元素的float、clear、vertical-align属性将失效
二、给容器设置的属性(6个)
1.flex-direction //设置弹性盒里面子元素的方向,默认是水平排列的
row(默认值:水平) row-reverse(水平方向的翻转) column(垂直) column-reverse(垂直方向的翻转)
2.flex-wrap //设置换行
nowrap(默认值:不换行) wrap wrap-reverse
3.flex-flow //复合属性 包括direction,wrap 默认值:row nowrap
4.justify-content //水平方向的排列方式
flex-start(默认值 左对齐) flex-end右对齐 center居中 space-between两端对齐 space-around 每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍
5.align-items //垂直方向的排列方式
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 项目的第一行文字的基线对齐
stretch(默认值)如果项目未设置高度或设为auto,将占满整个容器的高度
6.align-content //多根轴线的对齐方式
stretch(默认值) 轴线占满整个交叉轴
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
space-between 两端对齐
space-around 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
强制让文字在一行显示 white-space:nowrap;
设为 Flex 布局以后,子元素的()、()和()属性将失效? float clear vertical-align
所有网站内容在一屏高度显示,页面中不出现滚动条的页面形式叫做 单屏网页
三、项目的属性(子元素)
1.order //定义每一个项目的排列顺序,数值越小,排列越靠前,默认为0
2.flex-grow //定义项目的放大比例,默认为0
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
3.flex-shrink //定义项目的缩小比列,默认为1 负值对该属性无效
如果所有项目的flex-shrink属性都为1,当空间不足时,都将比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
4.flex-basis //定义了在分配多余空间之前,项目占据的主轴空间(main size)
5.flex //复合属性(flex-grow,flex-shrink,flex-basis) 默认值:0 1 auto
该属性有两个快捷值:auto(1 1 auto)和none(0 0 auto)
建议优先使用这个属性,而不是单独写三个分离的属性
6.align-self //允许单个项目有与其他项目不一样的对齐方式,可覆盖
align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
auto flex-start flex-end center baseline stretch
--------------SASS--------------
1.scss/less都是css的预处理器,scss比less更强大。
2.编译风格
nested:嵌套缩进的css代码,默认值
expanded:没有缩进的。扩展的css代码
compact: 简洁格式的css代码
compressed:压缩后的css代码
3.变量 $开头
$height:100%
div{
height:$height;
}
计算
4.标签嵌套
div{
h1{
height:$height
}
}
属性嵌套 &引用父元素
div{
border:{
radius:5px;
}
}
5.注释
//单行注释 不会编译到css文件里面,只在scss源文件里面
/多行注释/ 会编译到css文件里面
6.继承
@extend class1;
7.@mixin 名字{
重复的样式
}
调用:@include 名字
@mixin 强大之处在于可以设置参数和缺省值
@mixin justify($justify:center){
justify-content:$justify;
}
@include justify; //默认值
@include justify(flex-end) //传过来的参数
8.@import “_minxin.scss” //引入外部文件
9.自定义函数(转为rem)
@function 名字pxTorem($px){
//$px为需要转换的字号
@return $px / 37.5px * 1rem; 37.5px //浏览器默认字体
}
调用:div{
width:名字(30px);
}
em rem px
rem //相对于html(根元素)
em //相对于父元素,有继承性
1.引入flexble.js //用来做适配用的
2.在自己的scss文件里面,引入common.scss._mixin.scss
3.在自己的scss文件写的时候,需要调用pxTorem(20px),用来把px转成rem
rem布局(自适应布局): 一套代码适配不同的终端
//线(1像素)的缩放
height:1px;
transform:translatesY(0.5);
background:
-------关于设备-------
一、关于设备
1.三个需要了解的概念
PPI:可以理解为屏幕的显示宽度
DPR:设备像素比:物理像素/逻辑像素
Resolution:就是我们常说的分辨率
二、像素
像素分为三种:
1.设备像素
设备像素也称为物理像素
2.设备独立像素
3.css像素
在没有缩放的情况下,1个css像素等同于一个设备独立像素
4.获取当前设备的dpr(设备像素比)
window.devicePixRatio
三、viewport
移动端讲师口划分为三类 布局视口 视觉视口 完美视口
1.布局视口
怎么获取布局视口的宽度
①document.documentElement.clientWidth ②document.documentElement.clientHright
2.视觉视口
用户正在看到的网页的区域
window.innerWidth //视口的宽度
window.innerHeight //视口的高度
3 .完美视口 (布局视口等于视觉视口的宽度) css像素等于设备独立像素
将布局视口的宽度设置为设备独立像素的宽度
screen.width //设备独立像素的宽度
screen.height //设备独立像素的高度
1个css像素=4个物理像素
4.viewport默认有6个属性
width:设置viewport的宽度,这里可以为一个整数,又或是字符串"width-device"
inital-scale:页面初始的缩放值,为数字,可以是小数
minimum-scale:允许用户的最小缩放值,为数字,可以是小数
maximum-scale:允许用户的最大缩放值,为数字,可以是小数
height:设置viewport的高度
user-scalable:是否允许用户进行缩放,'no’为
5.判断当前设备是一个安卓设备还是iphone设备
window.navigation.appVersion.match(/设备/gi);
四、iconfont
1.下载
a.我的图标 点击需要的图标 添加到购物车
b.点击购物车 点击添加至项目
c.如果已经创建过项目,那就直接点击项目。如果没有创建过项目,点击右边的加号,新创建一个项目