HTML5引入了些新元素来定义页面结构。 新元素用于替换之前的<div>元素（在传统DIV约定俗成的基础进行演进）。 这些元素有： <header> 元素用于表示 ...

html中 <div class="flexLayoutr"> <div class="div_head"></div> <d ...

序上次的提到了H5移动前端完美布局之－margin百分比的使用margin-top（left,right,bottom）的百分比在移动页面布局中对上下左右距离的处理，攻下城外再攘城内,今天看看padding在页面布局中所发挥的的作用。 背景 在 平时的开发中我们可能会遇到说一个150 ...

问题一，分辨率Resolution适配：不同屏幕宽度，html元素宽高比和字体大小，元素之间的距离自适应，使用rem单位。 问题二，单位英寸像素数PPI适配：使用rem单位，文字会发虚。段落文字，使 ...

页面整体布局 1.单列布局 特征：定宽、水平居中 常见的单列布局有两种： 　　1. header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。 .layout{ /*width: 960px ...

1.控制轴方向的方法 display: flex;默认沿着X轴排列 如何方块堆满容器大于容器宽度。会自动压缩 flex-direction决定主轴方向（X轴） 属性值：4个 1：flex-direction: row 默认主轴从左到右，左起点 ...

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

转自阮一峰老师：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一、什么是Flex布局？ Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。 任何一个容器都可以指定 ...