中心主题

移动端与PC端网页

PC端

• 屏幕大，网页固定版心

移动端

• 屏幕小，网页宽度多数为100%，网页开发时，用浏览器（谷歌，火狐，ie等）模拟器进行调试，也能够与PC端一样使用flex布局（弹性布局）开发页面

百分比布局

也叫流式布局，网页宽度自适应，高度固定

布局方式，宽度以百分比书写

flex布局(弹性布局)

优势和特点

• 1.浏览器提倡的布局模型
• 2.页面布局灵活简单
• 3.可以避免浮动脱标问题出现
• 4.兼容性较高，通常不支持低版本浏览器

组成部分

• 弹性容器（父元素），添加display：flex的盒子
• 弹性盒子（子元素）
• 主轴（默认 水平-从左到右）
• 侧轴（默认 垂直-从上到下）

主侧轴对齐方式

• 主轴

  • justify-content

    • flex-start

      • 弹性盒子（子元素）在主轴的开头处依次排列

    • flex-end

      • 弹性盒子（子元素）在主轴的 结尾处依次排列

    • space-around

      • 间距出现在弹性盒子两侧

        • 视觉效果: 子级之间的间距是父级左右两侧间距的2倍

    • space-between

      • 间距出现在弹性盒子之间

    • space-evenly

      • 父子级间距都相同

    • center

      • 弹性盒子（子元素）在主轴上居中依次排列

• 侧轴

  • align-items(控制所有弹性盒子，与justify-content一样添加在弹性容器（父元素）里）

    • flex-start

      • 弹性盒子（子元素）在侧轴的开头处依次排列

    • flex-end

      • 弹性盒子（子元素）在侧轴的 结尾处依次排列

    • center

      • 弹性盒子（子元素）在侧轴上居中依次排列

  • align-self（控制某个弹性盒子，添加在弹性盒子里）

弹性伸缩比

• flex:整数数字；
• 占据弹性容器剩余的尺寸份数