盒模型的概念以及应用

在网页设计中，我们必须要理解盒模型的概念以及应用。

盒模型的概念很容易理解，我先上图。

我先上代码，然后就很容易解释了

<html>
<head>
<style>
#box1{margin:10px 10px 10px 10px;
border:1px dotted red;
padding:10px 10px 10px 10px;
width:100px;
height:100px;
}
#box2{
margin:10px 10px 10px 10px;
padding:10px 10px 10px 10px;
border:1px dotted red;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="box1">123</div>
<div id="box2">123</div>
</body>
</html>

　　很明显的，border是外框，这里的dotted是点线，同时还有solid实线，dashed虚线。

padding是内部距离，这里要说一下，除了这种写法之外，还有padding-top，padding-left，padding-right，padding-bottom，我这种写法的顺序是上，右，下，左的顺时针顺序。

margin是外部距离，和上面一样，margin也和padding一样，有着margin-top，margin-bottom，margin-right和margin-left，顺序也是顺时针。

width和height是内部大小。

上图

 

怎么样，是不是很简单2333？

posted on 2016-10-13 19:31  kryon  阅读(818)  评论(0)    收藏  举报