花了两三天大概看完html和css基本用法，但到自己布局的时候还是很懵不知道从哪里入手啊，就找了个简单的任务（ife2015 spring）试一下。
之前不涉及到布局的跳过，从涉及到position和float的开始，这一块看的有点晕，结合下面的例子搞懂了。
例：用两种方法来实现一个背景色为红色、宽度为960px的<DIV>在浏览器中居中。我用了三种方法。代码如下：
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="task0001_css.css"> <title>task0001</title> <style type="text/css"> a:link {text-decoration: none;} a:visited {color: black;} a.hover{text-decoration:underline;} a:active {color:yellow;} </style> </head> <body> <h1> MyGitbubAccountName:SMQ</h1> <ul> <li> <a href="https://github.com/baidu-ife/ife/tree/master/2015_spring/task/task0001"><span>homepage</span></a> </li> <li> <a href="http://www.douban.com" target="_blank"><span>douban</span></a> </ul> <h2>这是二级标题</h2> <p>这里有一个文字段落这里有一个文字段落 这里有一个文字段落这里有一个文字段落 </p> <div class="box1">div1</div><br> <div class="centerbox"> <div class="box2">div2</div> </div><br> <div class="box3">div3</div> </body> </html>
h1 {color: blue} h2 {font-size: 14px} p { font-size: 20px; color: #FFFF00; background-color: gray; text-indent: 50px; text-decoration: blink underline; text-transform: capitalize; text-align:left; word-spacing: 3px; } .box1{ background-color:red; width: 960px; position: relative; /*如果用absolute 换行符br就没用了*/ left:50%; margin-left: -480px; /*画图看为什么可以这样，总结*/ } .centerbox{ width: 960px; position: relative; left: 50%; } .box2 { background-color:blue; position: relative; left: -50%; } .box3{ background-color:blue; width: 960px; margin: auto; }
box1 box2 box3 分别对应三种实现方法。注意属性不能用数字开头，一开始我直接命名为123无效。
先说box1:使用position:relative对div元素相对定位，是相对于他本来的位置，即浏览器界面的最左端来说的，然后用left:50%将其左移50%，是相对整个浏览器界面的50%，然后再用margin-left: -480px把div移到中间位置。
box2:先设定一个往左移了50%的父元素，然后在子元素中使用left:-50%移到中间。
box3:使用margin:auto让浏览器自动设置外边距。
例：用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化
一种用浮动，一种用绝对定位实现。
/*用浮动实现：*/
.c1 { float:left; background-color:yellow; 200px; height: 300px; } .c2 { background-color:blue; 100%; height: 300px; } .c3{ clear:both; background-color:green; height: 50px; }
/*用绝对定位实现*/ #c{ position:relative; } .c1{ position:absolute; background:yellow; width: 200px; height:300px; top:0; left:0; } .c2{ background:blue; margin-left: 200px; /*两列布局只需要一个absolute?? 没有position时不能用width=100%会出错*/ height:300px; } .c3{ position: absolute; width:100%; background: green; top: 300px; height:50px; }
还有用flex实现：
<!DOCTYPE html> <html lang="zh-EN"> <head> <meta charset="UTF-8"> <title>first</title> <link rel="stylesheet" href="mycss.css"> </head> <body> <!--<div id="center1">背景红色，宽度960px</div> <div id="center2">背景红色，宽度960px</div>--> <div id="wrap1"> <div class="a1">diva</div> <div class="b1">divb</div> </div> <div id="wrap2"> <div class="c1">divc</div> </div> </body> </html>
#wrap1 { display: flex; flex-direction: row; } .a1 { background-color: red; display: flex; flex: 0 1 300px; } .b1 { background-color: blue; display: flex; flex: 1 1 auto; } #wrap2 { display: flex; flex-direction: column; } .c1 { background-color: yellow; display: flex; }
例：用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化。
还是用浮动+margin 和 绝对定位实现，但是我的浮动实现有问题，还没有找到解决方法。
两种方法的代码：
/*父盒子+绝对定位实现*/ /*#column3{ position:relative; } #left{ position:absolute; top:0; left:0; background:yellow; 200px; } #right{ position:absolute; top:0; right:0; background:green; 200px; } #middle{ margin-left:200px; background:red; }*/ /*浮动实现，代码和网上很多人的一样，但是实现出来有问题*/ #column3{ width:100%; margin:0 auto; } #left{ float:left; background:yellow; width:100px; height:100px; } #middle{ margin-left:110px; margin-right:110px; background:green; height:100px; } #right{ float: right; background:red; width:100px; height:100px; }
用浮动实现的截图：
总有一块不上去，不知道是怎么回事啊。。。
http://www.iyunlu.com/view/css-xhtml/55.html 一篇讲的很好的博客，主要解决的是高度塌陷问题，可我在火狐浏览器中没有遇到。。。。现在还看不太懂，好不容易搞懂浮动脱离于文档流了/相对定位和绝对定位的关系了。用flex布局实现：
#col32 { display: flex; flex-direction: row; } .a2 { display: flex; background-color: red; flex: 0 1 10em; height: 50px; order: -1; } .b2{ display: flex; background-color: blue; flex: 1 1 auto; height: 50px; } .c2 { display: flex; background-color: yellow; flex: 0 1 12em; }
例：实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化。
#wrap{ background:red; overflow:hidden; } .box{ float:left; margin: 10px; width: 150px; height: 70px; background:blue; }
用flex实现：
.wrapper { background-color: red; display: flex; flex: 1 0 auto; height: 300px; justify-content: flex-start; flex-wrap: wrap; overflow: hidden; } .box { background-color: blue; display: flex; flex: 0 1 160px; height: 80px; margin: 0 10px; }
圣杯布局和双飞翼布局(用盒模型实现)：http://www.cnblogs.com/tinyphp/p/4742922.html, http://www.cnblogs.com/tinyphp/p/4743674.html这两篇文章写得非常全面了，自己也实现了一遍，以后没事的时候再拉出来试试。要反复写加深理解。
用flex布局（弹性布局）实现圣杯布局：
#column3{ display: flex; flex-direction: row; } #left{ display:flex; flex: 0 0 12em; background:red; order:-1; } #middle{ display:flex; flex: 1; background:green; } #right{ display:flex; flex: 0 0 12em; background: yellow; }