7.26
less设置变量
@变量名:变量值(用于设置版心较多)
绝对定位的水平垂直居中
垂直:top 0; bottom 0; margin: auto 0
水平:left 0; right 0; margin:0 auto
条件:自身宽高确定
绝对定位元素的宽高百分比基于当前定位的祖先元素,祖先没有开启定位时基于根元素。
7.27
flex布局(弹性布局)
1.以容器单位,开启了flex布局的容器叫弹性盒子
2.开启flex,容器内元素是默认水平排列
3.flex容器中有主轴(默认是x轴)和y轴
4.主轴方向长度默认丢失,y轴方向长度是默认100%;
5.不脱离文档流
6.felx容器中:块、行内块、行内元素都会变为不独占一行
7.元素溢出默认压缩,不会换行
设置在父容器的属性
flex-direction 设置方向
row 行排列 默认值 从左到右排列 column 列排列 y轴 从上往下
row-reverse 从右到左排列 column-reverse 从下到上
justify-content 设置对齐方式
flex-start 默认值 开始位置 flex-end 结束位置 centenr 居中
space-around 环绕对其,空白区域在元素左右平均分布,两端有间隙
space-between 环绕对其,空白区域在元素左右平均分布,两端没有间隙
space-evenly 空白区域在元素间隙平均分,包括左右端
felx-wrap
nowrap 默认值,不换行,溢出挤压
wrap 换行,当元素有确定高度时,默认在父元素空白区域居中换行,没有高度则直接换。
wrap-reverse 往反(上)方向换行
align-content:设置侧轴方向排列方式,把所有行当行
stretch 默认值 行拉伸以占据剩余空间。
center 朝着弹性容器的中央对行打包。
flex-start 朝着弹性容器的开头对行打包。
flex-end 朝着弹性容器的结尾对行打包。
space-between 行均匀分布在弹性容器中。
space-around 行均匀分布在弹性容器中,两端各占一半。
align-items设置侧轴方向排列方式把每行当作一个整体对齐
center:位于容器的中心。弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
flex-start :位于容器的开头。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end:位于容器的结尾。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
baseline: 位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
设置在子容器的属性
flex:0-1 设置元素对于空白区域的占比,所有子元素都设置flex时平分
align-self: 单独设置元素侧轴方式的对齐方式
flex-grow: 默认是0,设置元素的扩张比原宽度+(空白区域宽/份数)*所占的份数
flex-shrink:设置元素的缩小比默认是1,0时表示不缩小
order:设置元素排列顺序,默认都是0,默认标签书写顺序排列值越大越后
缺点
1.占带宽 2.不兼容ie9以下(一般不考虑)
3.flex容器中的子元素设置float:clear无效
7.28
移动端适配
单位:em、rem、%、px vw vh:view with(视口宽度)view height 0~100vw 0~100 vh
计算属性calc可以计算不同单位,逗号隔开
动态计算字体大小 (100vw*16)/390(视口)
wiewport:视口,配置视口 width:视口宽度=bevice-width(设备宽度),不设置时,不同设备的默认值视口不一样
设备宽度/视口宽度
initial:缩放比,不配置视口,缩放比默认是设备宽度/视口宽度
maximun-scale:设置最大缩放比 优先高于initial-scale
minimun-scale:设置最小缩放比 优先高于initial-scale
user-scale:yes/no 1/0设置允许用户缩放
视觉视口
不同设备的默认视口不一样,苹果系列一般都是980视口的缩放比:
缩放比=设备宽度/视口宽度 390/980=0.4 100px===100*0.4
媒体查询
媒体:手机、平板、电脑屏幕、打印机
作用:当屏幕宽度在某些范围,样式的变化
写法:@media 媒体/all(所有媒体)
关键字:and并且、not非、ohly(基本不用)
媒体特性:with 宽度、min-width 最小、max-width最大 移动设备的屏幕适配区间
其他的css样式:
变形:transform
位移:2d x轴 y轴 3d x轴 y轴 z轴 translateX translateY translateZ
旋转:旋转角度 角度单位(deg) 缩放:scale
过渡:transition
过渡样式 持续时间 速度曲线
动画:animation
1.设置关键帧 @keyfromes
关键帧:记录动画开始到结束中间各比样式
至少有:开始位置(form%)结束位置(to%)
中间阶段:百分比
2.开启动画
aimation:关键帧名 持续时间 速度曲线 循环次数 是否反向