padding、border会把div撑大的解决方法
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">盒子模型的组成：</a></li><li><a href="#_label1">box-sizing下的盒子模型</a></li><li><a href="#_label2">calc()的运用</a></li></ul></div><p>所有HTML元素都可以看作盒子。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。因为Div添加了padding、border，Div的实际宽度=Div的初始固定值+边距值+边框值</p><p class="maodian"><a name="_label0"></a></p><h2>盒子模型的组成：</h2>
<blockquote><p>Margin(外边距) - 清除边框外的区域，外边距是透明的。<br />Border(边框) - 围绕在内边距和内容外的边框。<br />Padding(内边距) - 清除内容周围的区域，内边距是透明的。<br />Content(内容) - 盒子的内容，显示文本和图像</p></blockquote>
<p>以上是html中盒子模型的结构，每个元素都可以用这个盒子模型来解析。在开发中，一个元素的样式表现形式，也是由这个盒子模型的每个部分来表现的。对应到css中样式的属性有一下几个纬度——width, height, padding, border, margin。由于在不同的浏览器中，这几个属性所表示的盒子模型中的部分有所差异，所以又分为了标准盒子模型和怪异盒子模型。</p>
<p class="maodian"><a name="_label1"></a></p><h2>box-sizing下的盒子模型</h2>
<p>语法：（属性）box-sizing: （属性值）content-box/border-box/inherit；</p>
<p>box-sizing对盒子模型的影响：</p>
<p>（1）当“box-sizing“的值为”content-box“时，css中的width所包含的部分是盒子模型中content的宽度。此时和标准盒子模型表现一致。</p>
<p>（2）当“box-sizing“的值为”border-box“时，css中的width所包含的是盒子模型中的content的宽度+padding+border的宽度。此时和怪异盒子模型的表现一致。</p>
<p>总结：box-sizing属性，让开发人员可以控制浏览器的是以标准盒子模型表现，还是以怪异盒子模型表现。</p>
<div class="jb51code"><pre class="brush:css;">.box {
box-sizing: border-box;
padding : 0 20px;
width : 780px;
height : 355px;
background: #f2f1ef;
}</pre></div>
<p></p>
<p class="maodian"><a name="_label2"></a></p><h2>calc()的运用</h2>
<p>知道总宽度是100%，在这个基础上减去boder的宽度（5px * 2 = 10px）,在减去padding的宽度（10px * 2 = 20px），即”100% - (10px + 5px) * 2 = 30px” ，最终得到的值就是div.box的width值：</p>
<div class="jb51code"><pre class="brush:css;">.box {
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;
width: 90%;/*写给不支持calc()的浏览器*/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);
}</pre></div>
<p></p>
頁:
[1]