学习方法前应了解的知识
已有的几种布局方式
-
固定布局
- 用像素单位将尺寸写死，只设计一套尺寸
- 可切换的固定布局：设计几套尺寸，通过识别浏览器宽度，选择合适的尺寸
-
响应布局
- 对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计
- 要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化，发生布局改变的临界点称之为断点
-
弹性布局
- 以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度
-
混合布局
- 为了实际需要，有时需要兼用百分比和像素单位，以达到最好的效果
弹性盒使用问题
-
应用flex属性后，子元素的float，clear，vertical-align设定会失效
-
兼容问题
-
无前缀的flex写法得要 Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ 才能支持
-
兼容写法（全部都要写）
-
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ -
display: -moz-box; /* Firefox 17- */ -
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ -
display: -moz-flex; /* Firefox 18+ */ -
display: -ms-flexbox; /* IE 10 */ -
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-
-
移动端布局
-
移动端应出现晚，更新快，少了pc端很多老版本的兼容问题，使用弹性盒可快速布局
-
在移动端使用box-sizing：border-box（content-box为默认值），可减少计算量，此时width就包含了内边距和边框区
-
媒体查询@media
-
@media all and （min-width: 500px）and （max-width：1000px） {---}
-
通过获得设备窗口宽度，比例，横纵向等设定不同的css样式，如以上是为设备宽度在500px~1000px之间时才会生效的样式设定
-
媒体查询应写在基本样式的后面
-
link标签的media属性，可以实现在需要的时候再载入对应的css样式，加快页面加载时间
-
meda标签，在head中自动生成，内容不足，笔记需补充
-
缺点
- 兼容各种设备工作量大
- 大量隐藏代码，代码赘余，加载时间长
- 只是折中的解决方法，无法达到最佳效果
-
-
尺寸单位rem
-
常用的尺寸单位有px像素，em当前元素字体宽度，vw浏览器窗口宽度百分之，vh浏览器窗口高度百分之，%常表示为父元素的百分比，pt固定长度的绝对单位常用于印刷业
-
1rem相当于根元素html设定的字体尺寸
-
优点
- 页面根元素设定的字体大小可根据获得的浏览器宽度作出响应进行调整
- 只和根元素设定字体有关，和页面其他元素设定无关，则修改尺寸时只需要改变根元素字体大小
-
-
了解ppi，dpi和dpr
-
ppi pixels per inch 也叫像素密度，每英寸所拥有的像素密度，ppi越高，拟真度越高，大于300后人眼无法看到单颗的像素，有苹果公司先提出
-
dpi类型于ppi，安卓和其他设备的说法
-
dpr设备像素比 ，物理像素/图像像素
- 物理像素：设备能够控制的最小单位
- 图像像素：图像能够控制的最小单位，
- dpr：2，代表4颗设备像素只能显示同一种颜色，3代表9颗设备像素只能显示一种颜色
- 移动端网页设计图一般尺寸为750px，对应如iphone6/7/8对的图像像素宽度375px
-
-
使用插件布局
- 使用js插件可直接设计图对应像素尺寸除以一百倍后用rem单位表示，能完美设配不同尺寸的移动端页面都呈现最佳的效果
- 原理:设计图上量出的尺寸（px）应先除以设备dpr，再除以根元素html设定的字体大小得到对应的rem尺寸，而插件可以获得浏览器窗口的宽度和设备的dpr信息，经过运算设定一个根元素字体大小使得最终的rem尺寸和图像尺寸刚好是一百倍关系，极大的简化运算
弹性盒相关方法
display:flex/inline-flex
特点
- 弹性盒里的子元素，都是按照主轴的顺序排列
- 弹性盒中的子元素可直接添加宽高
- 子元素水平垂直居中只需要给子元素设置margin：auto；
相关属性
-
给父元素设置
-
主轴方向flex-direction
- row从左往右，默认值
- column从上往下
- row-reverse从右往左
- column-reverse从下往上
-
主轴的排列方式justify-content
- flex-start从顶端对齐，默认值；
- center中间对齐
- flex-end末尾对齐
- space-between平分剩余空间，两端没有空间
- space-around 平分剩余空间，中间的空间是两端的两倍
- space-evenly 平分剩余空间，空间全部相同
-
侧轴的排列方式align-items
- flex-start侧轴的顶端对齐
- center侧轴的中间对齐
- flex-end侧轴的末尾对齐
- 各子元素的第一行的基线
- stretch如果子元素没有加高度时，子元素会撑满侧轴，默认值
-
主轴换行flex-wrap
- nowrap不换行，默认值
- wrap换行
- wrap-reverse 换行而且改变侧轴方向
-
align-content行与行的对齐方式
- flex-start侧轴顶端对齐
- flex-end侧轴居中对齐
- center侧轴居中对齐
- space-around平分侧轴剩余空间，中间的空间是两边的两倍
- space-between平分侧轴剩余空间，两端没有空间
- space-evenly平分侧轴剩余空间，空间全部相同
- 允许换行 前提下设置该属性，align-items的设定将被失效
-
-
给子元素加
-
改变子元素排列顺序order
- 属性值为整数
- 可以加负数，越大越后面，默认是0
-
单个元素的侧轴排列方式align-self
- flex-start
- flex-end
- center
- baseline
- stretch
-
子元素放大比例flex-grow
- 整数，默认为0，数越大，占的剩余空间比例越大
- 前提是元素所在行还有剩余空间，再对剩余空间进行比例放大（只能放大不会缩小）
-
子元素的缩小比例flex-shrink
- 1 进行挤压 默认值
- 0 不进行挤压，会超出
- 其他值，和放大比列类似，将需要缩小的空间按比例分配
- 若设置了过大的值，因内容不能被压缩或导致无法得到预期的结果
-
分配剩余空间前，子元素占据的主轴空间flex-basis
- 设置 了该属性后width会失效，
-
简写flex
- flex：flex-grow（必写）【flex-shrink】【flex-basis】（可选项）
-
基础决定未来，一步一个脚印
