一、怪异盒模型 怪异盒模型的属性是box-sizing，他有两个属性值： 1、content-box 　　这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 　　简而言之就是，一般的盒子都是属于这种，最显著的特点 ...

伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想： 让容器有能力让其子项目能够改变其宽度，高度，以最佳方式填充可用空间。 特点： display: flex; 只能控制其子元素 浮动无法影响伸缩容器，但是如果内联伸缩容器 设置了浮动，元素将会以块级伸缩容器显示 ...

1.等分布局： 中间固定两边自适应： 固定两个，一个自适应 2.流式布局： 模仿float浮动布局 3.圣杯布局：（自适应布局） 先来看一下结构布局： ...

　　这是一个常见的页面布局，Header→Body→Footer，中间Body包含两到三列，重要内容放置在html靠前位置，优先加载，html代码如下： 　　如果使用传统的CSS来实现，比较麻烦，得使用float，margin负值，但是采用CSS3一个新增属性——display ...

双飞翼布局，左右两边，中间自适应拉伸。 父盒子 display: flex; justify-content: space-between; 中间搜索框 width:100% 也可以直接父盒子给弹性盒，中间搜索框直接flex ...

注：一些理论知识来源于CSS3-菜鸟联盟 弹性盒布局(Flex Box) 一、概念 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性 ...

在flex弹性盒模型体系中，flex-grow和flex都有对子元素进行放大的作用，但是这两个属性在放大时的计算方法不同，在使用时候要注意，使用正确的放大属性，从而达到自己想要的效果。 先来看下两个属性的不同之处吧~ 这是一个宽600px的弹性盒子，其中每个子元素的宽度都为100px。我们分别 ...

由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求，所以一直以来对css3的弹性布局不是很感冒。 近日有幸在一篇文章中领略了flex的魅力--简洁优雅。随试之。 以上就是flex相关的所有属性。详情可以参考 阮一峰大神的博文，很详细哦！ 现在 ...