您的位置：首页 > 其它

盒子模型补充知识汇总

2016-04-24 09:57 197 查看

上一篇博客详细的介绍了一下盒子模型，做了一个稍微复杂一点的小例子，但是关于盒子模型还有许多小的知识点，需要不断的补充不断的总结，所以就又写了这一篇博客，建构主义学习，不断的积累，就是刚刚好的状态，哪怕每次都是一个小的知识点的总结，不能一口气吃个胖子，也不能长时间饿着。

一、盒子模型的宽度设定

上篇博客，我们讨论了盒子模型主要的四部分构成：内容、内边距、边框、外边距，但是如果我想要设置盒子的宽度，这个宽度只是内容的还是包含了其他三部分呢？于是还是要做小例子啊，这次的小例子比上一篇的要简单，因为只是想看看宽度这一个属性。

前台代码：（三个div，只用了其中的两个）

<body>
<form id="form1" runat="server">
<div class="one">
这是第一个盒子
</div>
<div class="two">
这是第二个盒子
</div>
<div class="three">
这是第三个盒子
</div>

</form>
</body>

css样式

* {
font-size:16px;
}
/*共同属性*/
.one, .two {
padding:.5em;
width:100px;
border :5px solid  #000000;
margin:.5em;
}
/*第一个填充红色*/
.one  {
background-color :#f00;
}
/*第二个填充绿色*/
.two {
 box-sizing :border-box ;
background-color :#00ff21;
}

效果图：

简单讲解：

1.虽然我们两个div的宽度都设置为100px,但是为什么会出现一个宽一个窄呢？

P.S.:以后再有补充知识就接着写~~~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航