布局的传统方案，基于盒装模型，依赖display属性+position属性+float属性。他对于那些特殊的布局非常不方便，比如，垂直居中就不容易实现。　　2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持 ...

　一、概述 　　CSS盒模型是定义元素周围的间隔、尺寸、外边距、边框以及文本内容和边框之间内边距的一组属性的集合。 　　示例代码： 　　 　　效果图： 　　 　　由此可见：外边距margin是不可见的，如果设置了父元素的背景，就可以看到；背景色 ...

一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器，其包含的子元素是伸缩项目。 flex是一个复合属性。Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义。 由多个伸缩项目组成其具体的布局方式。 是为了呈现复杂的应用与页面而设计出来的。 display ...

盒模型（内容（content）,内边距（padding）,边框（border）,外边距（margin）） 这里做个比喻：content:比喻在网上买了几个鸡蛋； 　　　　　　　padding：比喻快递员包装鸡蛋用的防撞纸的距离，把鸡蛋牢牢的包裹起来，以免碰撞； 　　　　　　　border ...

　　学一点前端很有必要，简单总结下。 　　在我们网页上的每一个元素，一个按钮，一段文本，一张图片等等，浏览器都将它们当做一个“盒子”看待，并把这样的盒子称为盒模型（box model）。既然是模型，必定有矩可循，如果各不相同就不能叫模型了。 　　使用Chrome（当然FireFox也行）的右键 ...

flex-direction： flex-wrap： justify-content: align-items： align-content： ...

盒子模型 主要有两种，w3c标准盒模型，IE下的怪异盒模型，其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为：标准w3c盒模型、IE盒模型、以及css中的伸缩盒模型 当我们使用编辑器创建一个html页面时，我们一定会发现最顶上的DOCTYPE标签 ...

标准盒模型 　　标准盒模型：是由盒子内容，盒子填充（padding），盒子边框(border)，盒子边距(margin)组成。 如图可见蓝色为内容区，浅蓝为边距（padding）区，红色为边框，最外的是边距。标准的盒模型添加属性会使元素本身变大，要想元素本身不变，就要减去边距（padding. ...