自己做的一个案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .border-box { width:208px; padding:32px; border: 16px solid; box-sizing:border-box; margin:0 auto; } .content-box { margin-top:30px; width:208px; padding:32px; border:16px solid; box-sizing:content-box; margin:30px auto 0; } </style> </head> <div class="border-box"> border-box border-box border-box border-box border-box border-boxborder-box border-boxborder-box border-boxborder-box border-boxborder-box border-box </div> <div class="content-box"> content-box content-boxcontent-box content-boxcontent-box content-boxcontent-box content-boxcontent-box content-boxcontent-box content-boxcontent-box content-box </div> <body> </body> </html>
注意IE中的盒子模型(border-box)元素大小等于 内容+内填充+边框 即height/width=content+padding+border。
注意css中的盒子模型(content-box)元素大小等于 内容+内填充+边框 即height/width=content