1.移动web开发之流式布局
1.1 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视 口和理想视口 1.1.1理想视口 ideal viewport 需要手动添加Meta视口标签同时浏览器操作 1.2 二倍图1.2.1 物理像素&物理像素比 · PC端页面，1个px等于1个物理像素，但是移动的就不尽相同 · 一个px的能显示的物理像素点的个数，成为物理像素比或屏幕像素比
2.2 css3盒子模型 Box-sizing · 传统模式宽度计算：盒子的宽度 = css中设置的width + border + padding · css3盒子模型： 盒子的宽度 = css中设置的宽度width里面包含了border和padding 也就是说，我们的css3中的盒子模型，padding和border不会撑大盒子了
4.flex布局 4.1 flex布局原理 flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 · 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。 · 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
justify-content属性
flex-wrap 属性
flex-wrap:wrap 设置自动换行
align-items属性
align-content 属性 设置侧轴上的子元素的排列方式（多行） 设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
flex-flow 属性 是flex-direction 和flex-wrap 属性的符合属性 flex-flow：row wrap;
4.3 flex布局子项常见属性 · flex子项占的份数 · align-self 控制子项自己在侧轴的排列方式 · order属性定义子项的排列顺序（前后顺序）
4.3.1 flex属性 flex属性定义子项目分配剩余空间，用flex来表示占多少份数 .item{ flex:<number>;默认是0 }
4.3.2 align-self 控制子项自己在侧轴上的排列方式 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
