css布局经典问题

CSS 定位问题

主要就是经典的绝对定位，相对定位问题。

10个文档学布局：通过十个例子讲解布局，主要涉及相对布局，绝对布局，浮动。

百度前端学院笔记 – 理解绝对定位：文章本身一般，几篇参考文献比较详细

HTML和CSS高级指南之二——定位详解（译文）：介绍浮动的使用，详细介绍定位的技巧，包括如何准确的给元素在 X 轴、Y 轴和 Z 轴定位

三栏式布局

涉及浮动和清除浮动，主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，它们实现的效果是一样的，差别在于其实现的思想。

圣杯布局

圣杯：父盒子包含三个子盒子（左，中，右）

中间盒子的宽度设置为 width: 100%; 独占一行；

使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；

.left {margin-left:-100%;} 把左边的盒子拉上去

.right {margin-left：-右边盒子宽度px;} 把右边的盒子拉上去

父盒子设置左右的 padding 来为左右盒子留位置；

对左右盒子使用相对布局来占据 padding 的空白，避免中间盒子的内容被左右盒子覆盖；

中间弹性区

左边栏

右边栏

用 float 的话，负 margin 元素是不会破坏页面的文档流。所以如果你使用负 margin 上移一个元素，所有跟随的元素都会被上移(而 relative 定位的元素则不同，会保留原位置，影响文档流)。

当 static 元素的 margin-top/margin-left 被赋予负值时，元素将被拉进指定的方向。

如果你设置 margin-bottom/right 为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

当元素不存在 width 属性或者 width: auto 的时候，负 margin 会增加元素的宽度.

margin-top 为负值不会增加高度，只会产生向上位移;margin-bottom 为负值不会产生位移，会减少自身的供 CSS 读取的高度，影响下方的元素位置；上下相邻的元素两者均为负时，效果不叠加，取负值更多的那个效果。

清除浮动

清除浮动主要是为了解决高度塌陷问题。而简单的 clear: both 并不能解决这个问题，所以引出了许多解决方案。

StackOverflow – What methods of ‘clearfix’ can I use?：清除浮动黑科技完整解读

那些年我们一起清除过的浮动：神文，把“清除浮动”定义为“闭合浮动”，把问题由来和解决方案都讲清楚了，并且分析了各种解决方案的优劣。

各种解决方案在上面的链接里有很详细的说明了，这里就不赘述了。大体分为两类：

其一，通过在浮动元素的末尾添加一个空元素，设置 clear: both 属性，after 伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；

其二，通过设置父元素 overflow 或者 display: table 属性来闭合浮动

顺便补充一句，clear float(例如 clear: left) 是对某个元素设置，以避免其某一边有浮动元素，即对当前元素产生约束，约束的边界为其他的浮动元素。对于已经浮动的元素，设置 clear float 是无效的。

响应式设计

“响应式设计（Responsive Design)” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略。

媒体查询(Media Queries)是做此事所需的最强大的工具。

注： Responsive Web Design ＝ RWD，Adaptive Web Design ＝ AWD

RWD：

采用 CSS 的 media query 技术

流体布局（fluid grids）

自适应的图片/视频等资源素材

（为小、中、大屏幕做一些优化，目的是让任何尺寸的屏幕空间都能得到充分利用）

AWD：

CSS media query 技术（仅针对有限几种预设的屏幕尺寸设计）

用 JavaScript 来操作 HTML 内容

在服务器端操作 HTML 内容（比如为移动端减少内容，为桌面端提供更多内容