流式布局
只管宽度,不管高度
flex布局
父元素属性
flex-direction
设置主轴的方向
flex-direction: row; //从左到右排列
flex-direction: row-reverse; //从右到左
flex-direction: column; //从上到下
flex-direction: column-reverse; //从下到上
**justify-content
**设置主轴上的元素排列方式
使用之前必须确定好主轴的方向
属性值 | 作用 |
---|---|
flex-start | 默认值 从头部开始 如果是x轴,则从左到右 |
flex-end | 从尾部开始 |
center | 在主轴上居中对齐 |
space-around | 平分剩余空间 |
space-between | 先两边贴边,再平分剩余空间 |
**flex-wrap
**设置子元素是否换行
特点:flex布局中,子元素默认是不会换行的,而是压缩盒子大小
flex-wrap: wrap; //换行
**align-items
**设置侧轴上的子元素排列方式(单行)
控制子项在侧轴(默认是y轴)上的排列方式,在子项为1单项(单行)的时候使用
属性值 | 作用 |
---|---|
flex-start | 从上而下 |
flex-end | 从下而上 |
center | 挤在一起居中 |
stretch | 拉伸(默认值) |
**align-content
**设置侧轴上的子元素排列方式(多行)
属性值 | 作用 |
---|---|
flex-start | 默认值,从侧轴的头部开始排列 |
flex-end | 从侧轴的尾部开始排列 |
center | 在侧轴上居中显示 |
space-around | 子项子侧轴平分剩余空间 |
space-between | 子项在侧轴先分布在两头,再平分剩余的空间 |
stretch | 拉伸(默认值) |
**flex-flow
**是flex-direction和flex-wrap的结合
flex-flow: row wrap;
子元素属性
flex
子项目占用的份数
align-self
控制子项自己在侧轴上的排列方式
align-self允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto, 表示继承父元素的align-items属性,如果没有父元素等同于stretch。
order
属性定义子项的排列顺序
数值越小,排列越靠前,默认为0。
rem布局
em和rem
em:是相对于父元素的字体大小来改变的。
rem:是相对于html元素的字体大小来改变的。
媒体查询
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype(媒体类型): all , print (打印机) ,screen(手机电脑和ipad屏幕)
元素取值算法
1.页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
2.屏幕宽度/划分的份数就是html中 font-size的值
3.页面元素的rem值=页面元素值(px)/html font-size 字体大小
vw,vh布局
vw,vh为视口布局,vw为视口的宽度,vh为视口的高度。
1vw为视口宽度的100分之一
1vh为视口高度的100分之一
查看属性的兼容: https://caniuse.com
常用的效果插件:
swiper https://www.swiper.com.cn/
SuperSlide http://www.superslide2.com/
isScroll http://caibaojian.com/iscroll-5/gettingstart.html
视频样式统一个插件:zy.media.js
https://github.com/ireaderlab/zyMedia
fastclick.js
清楚移动端默认的点击300ms延迟。
https://github.com/ftlabs/fastclick