一、今日知识点
1 流式布局
概念
流式布局就是百分比布局，也叫做非固定像素布局
通过盒子的宽度设置为百分比来根据屏幕的宽度来自适应调整，不受固定像素的限制。
二倍精灵图的使用
1、插入背景图
2、将背景图按物理像素比进行等比例缩小（利用background-size属性）
3、利用ps进行缩小后的图片测量，使用background-position进行背景位移即可
2 Flex弹性布局
Flex布局的原理
传统布局和flex布局的区别
传统布局
传统布局的兼容性更好
布局会比较的繁琐
局限性，在移动端中布局的速度相对较慢
flex布局
操作会比较的方便，布局很简单，移动端使用很广泛
PC端的浏览器可能会有兼容性的问题，IE11以下的低版本浏览器对flex支持情况不好
总结
PC端布局主要采用传统方式
移动端布局或者PC端不考虑兼容性的时候，使用flex布局
原理
flex 是弹性布局的意思，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局
当我们的父盒子设置为flex布局之后，子元素里面的float、clear和vertical-align属性都将失效
采用flex布局的父元素叫做flex容器（flex-container），子元素叫做flex项目（flex-item）
Flex布局的父项常见属性
flex-direction
设置主轴方向
常用属性值
row 默认值，子元素沿x轴从左向右排列
row-reverse 子元素沿x轴从右向左进行排列
column 子元素沿y轴从上到下进行排列
column-reverse 子元素沿y轴从下到上进行排列
在flex布局中x轴和y轴分别是水平向右和垂直向下的
x轴是默认的主轴，如果想将y轴设置为主轴，就可以使用flex-direction 属性
justify-content
控制主轴子元素的排列方式
常用属性值
flex-start 默认值，控制子元素沿主轴头部开始排列，如果主轴是x轴，就代表从左到右
flex-end 控制子元素沿主轴的尾部开始排列，如果是y轴，代表从下往上
center 控制子元素沿主轴居中对齐
space-around 控制子元素平分主轴剩余空间
space-between 控制子元素两侧元素先贴边，然后剩余的元素平分主轴剩余空间
flex-wrap
设置子元素是否换行
在flex布局中，子元素超过父元素的宽度默认是不换行，如果需要换行就要用该属性来进行设置
align-items
设置主轴的子元素排列方式（单行）
常用属性值
flex-start 从侧轴头部开始排列
flex-end 从侧轴尾部开始排列
center 沿侧轴居中排列
stretch 拉伸子元素到父级的宽度或高度（和主轴方向相关）
align-content
设置侧轴上的子元素的排列方式（多行）
常用属性值
align-content: flex-start;
默认值：沿侧轴头部开始排列
align-content: flex-end;
沿侧轴尾部开始排列
align-content: center;
沿侧轴居中对齐
align-content: space-around;
侧轴上的多行子元素平分侧轴剩余空间
align-content: space-between;
侧轴上的多行子元素两侧先沿侧轴贴边，剩余的子元素平分侧轴剩余空间
align-content: stretch;
侧轴上的子元素拉伸到平分父级高度或宽度（与主轴方向相关）
aligin-items和align-content的区别
algin-items适用于单行的情况，只有上对齐、下对齐、居中对齐和拉伸。
algin-content 适用于多行的情况，可以设置上对齐、下对齐、居中对齐、拉伸、平分空间等属性值。
flex-flow
是flex-direction flex-wrap的复合属性
属性值：flex-direction flex-wrap
Flex布局的子项常见属性
flex子项占的份数
align-self 控制子项自己在侧轴上的排列方式
可以控制单个子元素和其他的子元素有不同的对齐方式 ，可以覆盖align-items属性。
order 属性来定义子项的排列顺序
默认值是0 数值越小越靠前
3 网页制作思路
技术选择flex布局方式来实现
搭建文件
css
images
font
index.html
书写视口标签
|
