弹性盒布局

● 怪异盒模型（ie7以下）
● 新版盒模型
○ display:flex设置为弹性盒
○ flex-direction顺序指定了弹性子元素在父容器中的位置。
■ row默认在一行内排列
■ row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
■ column：纵向排列。
■ column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
○ justify-content 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
■ flex-start默认，顶端对齐
■ flex-end末端对齐
■ center居中对齐
■ space-between两端对齐，中间自动分配
■ space-around自动分配距离
○ align-items侧轴对齐方式
■ flex-strat顶端对齐
■ flex-end末端对齐
■ center居中对齐
○ flex-wrap换行处理
■ nowrap不换行（默认）
■ wrap换行
■ wrap-reverse反向换行
○ align-content行间距对齐方式
■ flex-start没有行间距
■ flex-end底对齐没有行间距
■ center居中没有行间距
■ space-between两端对齐，中间自动分配
■ space-around自动分配距离
○ align-self子元素对齐方式（类似align-items）
■ flex-start没有行间距
■ flex-end底对齐没有行间距
■ center居中没有行间距
○ order:number排序优先级，数字越大越往后排，默认为0，支持负数。
○ flex：number子元素所占盒模型比例
○ flex-grow定义弹性盒子元素的扩展比率
● 旧版盒模型
○ display:box(必须加前缀)设置弹性盒
○ box-orient用来确定父容器里子容器的排列方式，是水平还是垂直
■ horizontal水平排列
■ vertical垂直排列
○ box-pack表示父容器里面主轴对齐方式，
■ start 居顶端
■ end 居末端
■ center 居中
■ justify两端对齐，中间自动分配
○ box-align表示父容器里面子容器侧轴对齐方式，
■ start居顶端
■ end居末端
■ center居中
■ baseline两端对齐，中间自动分配
■ stretch自动分配
○ box-direction:reverse反向显示
○ box-flex子元素显示比例
● css多列
● column-count 属性规定元素应该被分隔的列数：
● column-gap 属性规定列之间的间隔大小
● column-rule 属性设置列之间的宽度、样式和颜色规则
○ column-rule-color规定列之间规则的颜色。
○ column-rule-style规定列之间规则的样式。
○ column-rule-width规定列之间规则的宽度。
● column-fill:balance(对列进行协调。浏览器应对列长度的差异进行最小化处理。)/auto(自动排列)规定如何对列进行填充
● column-span规定元素应横跨多少列。
● column-width规定列的宽度。
● columns规定设置 column-width 和 column-count 的简写属性。
注释：Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
● Responsive Web Design 响应式设计布局概念
○ Responsive 设计特点
■ 集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
○ meta标签移动端设置.note
● css3 媒体查询（media queries）
○ @media mediatype and|not|only (media feature) {
CSS-Code;
}
○ mediatype媒体类型
■ all全部
■ screen用于电脑屏幕，平板电脑，智能手机等。
■ print用于打印机和打印预览
○ and|not媒体条件
○ 媒体功能
■ min-width最小宽度
■ min-height最小高度
■ max-width最大宽度
■ max-height最大高度
■ orientation：portrait竖屏状态
■ orientation：landscape横屏状态下
○ link写法
○ <link href="路径" rel="stylesheet" media="all and(min-width:500px;)"/>
○ 扩展，实际工作中媒体查询经常操作的属性
■ display：block；display：none
■ float：none
■ width：100%
■ text-align:center
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

转载于:https://www.cnblogs.com/RuMengkai/articles/6198296.html