怎么计算body的width?
时间:2011-07-16
来源:互联网
我刚接触css不久,在看webflash的“彻底弄懂CSS盒子模式一(DIV布局快速入门)"
http://bbs.blueidea.com/viewthre ... p;extra=&page=1,有疑惑:
代码如下:
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px; /*我的问题是,805px是怎样计算出来的??*/
}
.mainBox {
border: 1px dashed #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
.mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}
-->
</style>
<div class="mainBox">
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>转变思想</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>熟悉步骤</h3>
<p>正文内容 </p>
</div>
我的问题是body {}的805px是怎样计算出来的?我的理解是(mainBox的width)*4+(mainBox的border)*8+(mainBox的margin)*8=800px; 不知怎么计算出805px来!
http://bbs.blueidea.com/viewthre ... p;extra=&page=1,有疑惑:
代码如下:
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px; /*我的问题是,805px是怎样计算出来的??*/
}
.mainBox {
border: 1px dashed #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
.mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}
-->
</style>
<div class="mainBox">
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>转变思想</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>熟悉步骤</h3>
<p>正文内容 </p>
</div>
我的问题是body {}的805px是怎样计算出来的?我的理解是(mainBox的width)*4+(mainBox的border)*8+(mainBox的margin)*8=800px; 不知怎么计算出805px来!
作者: dillgates 发布时间: 2011-07-16
width 可以自己设置的 调节 还有border设置时 要注意 FF可能需要用到“!important”
作者: vallkiss 发布时间: 2011-07-16
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28