标准模式和混杂模式下的盒模型

2024-04-27 15:10:22

字体：大中小

来源：转载

供稿：网友

相关内容参考： 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>

这里写图片描述