流式布局，就是用百分比设置宽度的布局形式
目标宽度/上下文宽度=值
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} div{ width:80%; height:300px; background:red; margin:50px auto;} p:first-child{ width:50%; height:200px; background:blue; float:left;}/*p:first-child表示第一个p*/ p:last-child{ width:50%; height:200px; background:pink; float:right;}/*p:last-child表示最后一个p*/ /*这里p的父元素是div宽度是80%，但在子元素心目中是100%，所以父元素下的子元素总和的宽度是100%就行了 如果给两个p加上边框，不能用百分比，百分比数值，只能出现在width、piddling、margin上，边框的宽度没有百分比，只能用px但是这样会导致父元素的宽度不够而掉下来 */ </style> </head> <body> <div> <p></p> <p></p> </div> </body> </html>
解决办法：使用CSS3中的box-sizing属性（IE8开始兼容了），这个属性用来规定，CSS中出现的width值是谁的宽度？
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> div{ width:200px; height:200px; padding:20px; background:red; box-sizing:border-box; border:10px solid green;} /*border-box,就是边框的这个小盒子，这个属性命令了，width数值指的是border这个小盒子的宽度 ，此时，padding表现为一种内减，而不是原来的外扩 加了 box-sizing:border-box;这个属性之后，再加border的时候，整个盒子就不会向外矿大了， */ </style> </head> <body> <div></div> </body> </html>
这个属性在流式布局中特别常用
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} div{ width:80%; height:300px; background:red; margin:50px auto;} p:first-child{ width:50%; height:200px; background:blue; float:left; box-sizing:border-box; border:10px solid green;}/*p:first-child表示第一个p*/ p:last-child{ width:50%; height:200px; background:pink; float:right; box-sizing:border-box; border:10px solid green;}/*p:last-child表示最后一个p*/ /*这里p的父元素是div宽度是80%，但在子元素心目中是100%，所以父元素下的子元素总和的宽度是100%就行了 如果给两个p加上边框，不能用百分比，百分比数值，只能出现在width、piddling、margin上，边框的宽度没有百分比，只能用px但是这样会导致父元素的宽度不够而掉下来 */ </style> </head> <body> <div> <p></p> <p></p> </div> </body> </html>
min-width属性、max-width属性
当盒子的宽度是百分比来指定的话，很多时候要设置最小的宽度和最大的宽度，即min-width属性、max-width属性IE7开始兼容的
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> div{ width:80%; height:200px; background:red; margin:0 auto; max-width:600px; min-width:400px; /*加了这两个属性，盒子的宽度是浏览器的80%，但是呢，最大不会超过600px，最小不会小于400px;*/ } </style> </head> <body> <div></div> </body> </html>
原文：http://www.cnblogs.com/LO-ME/p/3746306.html