<!DOCTYPE html> <html> <head> <title>布局</title> <meta charset="utf-8"> <style type="text/css"> .fixwidth2{ width: 960px; height: 200px; margin: 0 auto; border: 1px solid #000; background-color: yellow; overflow: hidden; } .fixwidth2 .left{ float: left; width: 400px; height: 200px; background-color: red; } .fixwidth2 .right{ float: right; width: 550px; height: 200px; background-color: blue; } .flow{ width: 76.8%; margin:30px auto; } .flow .right{ width: 22%; height: 50%; background-color: red; float:right; } .flow .middle{ float: left; width: 22%; margin-left: 18%; background-color: #ccc; } .flow .left{ width: 22%; background-color: blue; float:left; } .flex{ width: 60em; overflow: hidden; position: relative; top: 30px; } .flex .box-left{ float: left; width: 20em; background-color: blue; padding-bottom: 520px; margin-bottom: -500px; } .flex .box-middle{ float: left; width: 20em; background-color: red; padding-bottom: 520px; margin-bottom: -500px; } .flex .box-right{ float: right; width: 20em; background-color: green; padding-bottom: 520px; margin-bottom: -500px; } /*.flex .bottom{ position: absolute; float: left; bottom: 0; }*/ </style> </head> <body> <div class="fixwidth2"> <div class="left"><p>两列定宽式布局，容器宽度是px</p></div> <div class="right"><p>又叫做固定布局</p></div> </div> <div class="flow"> <div class="left">三列流式布局，容器宽度是百分比</div> <div class="middle">我是中间的那块</div> <div class="right">原来这就是流式布局</div> </div> <div class="flex"> <div class="box-left">三列等高弹性布局</div><div class="bottom"></div> <div class="box-middle">弹性布局就是宽度值为em,lem是1倍的默认字体的长度，浏览器的默认字体大小一般是16px</div><div class="bottom"></div> <div class="box-right">我是最右边的，哈哈哈哈哈哈哈哈</div><div class="bottom"></div> </div> </body> </html>
1.用CSS进行布局有几种不同的方式，包括绝对定位，使用负的外边距值，还有基于浮动
2.在使用浮动进行布局时，因为浮动的元素不再占据文档流中的任何空间，它们就不在对包围他们的块框产生任何影响。为了解决这个问题，有3种方法，方法一，让父元素也浮动，再整个文档的“战略点“（页脚）上进行一次或两次清理，方法二，在每个浮动元素后添加空标签，清除浮动，法三，overflow：hidden
3.固定布局（页面宽度是px，缺点是无法充分利用可用空间，行长和文本易读性差），流式布局（页面宽度是百分数，相对于浏览器宽度伸缩，但是当浏览器窗口宽度变得特别小时，为很难阅读，解决方法是设置以em为单位的min-width，行太长也会使得阅读困难，可以使页面宽度不占据100%，且使用百分比的外边距和内边距），弹性布局（页面宽度是em，缺点和固定布局一样，当字号变得特别大时，会出现水平滚动条，解决方法是设置max-width）
4.为所有浮动元素添加display:inline,可以防止IE中的双外边距浮动产生的bug、
5.使用css3创建等高文本列额，通过column-count,column-width,column-gap属性
