自己做的一個(gè)案例
<!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>無標(biāo)題文檔</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)元素大小等于 內(nèi)容+內(nèi)填充+邊框 即height/width=content+padding+border。
注意css中的盒子模型(content-box)元素大小等于 內(nèi)容+內(nèi)填充+邊框 即height/width=content
2015-12-23
同學(xué),你做的這個(gè)是響應(yīng)式布局嗎?