相關內容參考: http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html http://www.runoob.com/CSS/css-boxmodel.html 總結:
IE盒子模型特點:width=(border+padding+content)的寬度height=(border+padding+content)的高度標準盒模型:width=content的寬度height=content的高度主要是針對標準模式下的盒模型進行學習 標準模式下設置元素的width實際上是對盒模型的content的寬度進行設置,而不包括border值和padding值
<!DOCTYPE html><html lang="en"><head> <title>pullpage插件實現全屏效果</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/animate.min.css" /> <link rel="stylesheet" href="css/jquery.fullPage.css"></head><style type="text/css"> .spe{ width:200px; height:200px; line-height:200px; background-color: pink; margin-bottom: 20px; text-align: center; } .special1{ padding:20px; border:5px solid red; } .special2{ padding:20px; border:5px solid red; box-sizing:border-box; }</style><body> <div class="spe">沒有border和padding</div> <div class="spe special1">有border和padding</div> <div class="spe special2">border-box</div></body></html>border-box的屬性
新聞熱點
疑難解答