今天小编跟大家讲解下有关对div盒子模型使用心得总结 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关对div盒子模型使用心得总结 的相关资料,希望小伙伴们看了有所帮助。
盒子模型的计算 外边距(margin)+边框(border)+内边距(padding)+内容(content) 在css中的width和height只是对内容区域的高和宽设定.不是对整个和模型的高和宽设定. 复制代码代码如下: <!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>demo</title> <style type="text/css"> *{margin:0; padding:0;} dl { background:red;border:10px solid #000; width:100px; height:100px;} dt { background:yellow;} dd { background:green;} </style> </head> <body> <dl> <dt>test of dt</dt> <dd>test of dd</dd> </dl> </body> </html> 设置外边距和内边距都不会影响内容区域的高度和宽度,仅仅会改变次盒子模型的区域的高宽. 在盒模型嵌套的情况下,里层盒模型会影响到外层的盒模型.来源:爱蒂网