-
<style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:200px;background-color:gray;} .main{height:500px;background-color:red;} .left{position:absolute;left:0px;top:200px;width:200px;background-color:blue;height:500px;} .right{margin-left:210px;background-color:green;height:500px;} .foot{height:100px;background-color:#333;} </style>查看全部
-
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px;margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} 代码解读：对于main中margin第一个参数是对顶部，第二个是对右侧，310px正好比right宽多了10px，同理第三个对下面为0，第四个对左边为210，比left宽200多10px；另外位置问题，如right中，position:absolute; top:0; right:0，位置是绝对的，对右为0 ，对上为0查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position：absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
-
fa 1查看全部
-
fa 2查看全部
-
清除浮动的方法： 一：clear:both(/left/right); 二：overflow:hidden;width:100%; 三：给main设置高度：.main{width:960px; {height:600px};margin:0 auto;} 四：margin:600px 0 0 0; <!--xxxxxxxxxxx--> 因为main包含的块全都设置了浮动，而浮动和绝对定位会使块脱离标准文档流，但是head仍在文档流中 所以foot会忽略main的所有块而贴着head块 方法1： .main{ width:860px;height:600px;margin:0 auto;background:#9FC;} 方法2：.footer{ height:50px; background:#9F9; margin:600px 0 0 0;} 方法3：.footer{width:100%; height:50px; background:#9F9; position:absolute;top:700px;}查看全部
-
clear:both清除浮动查看全部
-
...查看全部
-
...查看全部
-
...查看全部
-
混合布局查看全部
-
.main{ height:600px; margin:0 300px 0 200px; background:#9CF} 会使左右两列与中间没有空隙 .main{ height:600px; margin:0 310px 0 210px; background:#9CF} 会使左右两列与中间有空隙查看全部
-
左右两侧固定，中间自适应查看全部
-
三列自适应布局查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position：absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
举报
0/150
提交
取消