-
footer 的色块已经跑到了上面，只有文字在下面，之所以会跑走，是因为上面的元素用了浮动，原来的位置就空了出来，然后 footer 没有浮动元素，又没有清除浮动，就占据了中间位置，所以，想让footer 在他自己的位置，就先清除浮动（clear：both）
查看全部 -
自适应宽度
长度无限制
查看全部 -
一列布局：margin:0 auto; 居中
二列布局：float:left; float:right; 浮动
三列布局：position:absolute; top:0; left:0; 绝对位置
查看全部 -
429..
查看全部 -
混合布局.
查看全部 -
三列布局。
查看全部 -
二列布局。
查看全部 -
一列布局。
查看全部 -
混合布局。
查看全部 -
这里是一个排版陷阱：当main里面设置了左右两个div之后，这个时候不要忘记给main也设置和左右div一样的高度，题中的main是没有设置高度的，只设置了宽度，这个时候我们可以想象main其实就是一根高度为0的线条浮在top的下面，只是我们看不到，因为它没有高度。而footer是浮在main下面的，并不是浮在左右两个div下面，所以我们看到footer块莫名其妙跑上来盖住了左右两个div，解决办法如下： 第一，给main赋予和左右div同样大小的高度，这个是最直接的方法，main的高度从0变成600px之后，自然把以它为参照、浮在它屁股下面的footer压到下面去了； 第二，把footer的浮动清除掉，使用clear：both，这样footer从一个跟着main浮起来的飞行物变成了失去翅膀的元素，不能浮动，它就只能自动找最长的参照物（也就是很长的左右div），然后折行显示在底部了，一样能达到效果。 如果还不懂，可以将main的高度设置为height：300px，就一目了然了，因为这个时候main变成了300px，而footer会跟着main低300px显示在top下面。我们看不到main，不代表它不存在。
查看全部 -
3列布局-特殊案例 左右列固定宽度，中间列自适应。 左侧绝对定位：position：absolute;left:0;top:0; 右侧绝对定位：position：absolute;right:0;top:0; 中间宽度定义去掉，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中间空一点出的话，增加margin属性值便可以实现） 左右两侧布局固定宽度，中间部分宽度自适应。则需要采用绝对定位来实现，把左右设置为绝对定位
查看全部 -
两列布局利用到了float：left/right 属性 1.自适应，用百分比%分配宽度，当拖动浏览器窗口时，按设置做相应变化，此方法比较少用 2.固定宽度，用px明确指定宽度， 限制左右在父级框中 .main{} .left{float:left;} .right{float:right;} <div class="main">
查看全部 -
margin:0 auto;是块状元素的居中对齐方式， text-align:center;是内联元素（如，a,img标签)的对齐方式， padding:0;margin:0;是做为初始化页面， 原因是页面在被各个浏览器读取时的理解不同产生不同的展示效果，所以需要清除.
查看全部 -
1.一列布局不适于存放文本，太长容易看走眼 一列布局： 1.通常作为网页头部。固定宽度。 2.真正开发，高度设置自动的。 两列布局自适应，使用百分比。 三列布局，使用绝对定位和margin。 盒子之间的三种关系： 1、相邻 2、嵌套 3、叠加 我们要做的就是摆放好盒子的位置。 关于页面上元素的加载顺序： 元素是从前往后依次加载的，要想先加载就要写在前面。 通常left部分是作为菜单，right部分作为主体内容，我们打开网页，都希望先看到 主体内容，所以有意把right部分写在left部分前面，然后把right部分右浮动，left部分左浮动， 这样布局不会出现问题，而且还解决了IE6下右浮动换行的问题。 ------------------------------ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;} .main{width: 800px;height:600px;background-color: #ccc;margin: 0 auto;} .top{height:100px;background-color: blue;} .foot{width: 800px;height:100px; background-color: #900;margin: 0 auto;} </style> </head> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body> </html>
查看全部 -
一列布局
元素水平居中: 该id或calss上添加margin:0 auto;
查看全部 -
1.布局概念：又叫做版式布局，ui设计师把视觉元素进行排列组合。
2.网页设计特点：网页可以自适应宽度。
3.分栏又称分列，常见的布局分为：
一列布局
二列布局
三列布局
混合布局
4.前端：如何通过基础手段灵活运用css中的浮动，定位等方法完成设计图中的设计要求。
查看全部 -
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:100px;background:gray;top:0;}//不设置width保证自适应，定义位置
.main{height:600px;background:red;}//主题高度及颜色设置
.left{width:200px;height:600px;background:blue;position:absolute;left:0;}//主体左边，左绝对定位0（贴左）
.right{height:600px;background:green;position:absolute;left:210px;right:0;}///主体右边，左绝对定位210，右绝对定位0（贴右），不设置宽度保证自适应
.foot{height:100px;background:orange;bottom:0;}//不设置width保证自适应，定义位置
</style>
查看全部 -
clear:both 清楚浮动的代码
查看全部 -
右侧哪两个 css 设置，可以让元素脱离文档流:浮动和绝对定位{浮动（float）和 绝对定位（position：absolute）}
查看全部 -
Div{width:800px; height:500px; margin:0 auto}，上面这段样式，可以让 div 在页面的：居中对齐
查看全部 -
三列布局
【1】左右列固定宽度，中间列自适应。 【2】左侧绝对定位：宽；高；position：absolute;left:0;top:0; 【3】右侧绝对定位：宽；高；position：absolute;right:0;top:0; 【4】中间宽度定位：高；margin:0 (right宽度+间隙宽度)px 0 (left宽度+间隙宽度)px; 上右下左，左右调节大小可
(不用float因为有的块会被顶到下列，用绝对定位不会)
查看全部 -
clear:both 清楚浮动的代码
查看全部
举报