今天给大家介绍一下盒子模型,首先盒子模型是什么?盒子模型是我们html布局中都会用到的,盒子模型顾名思义,就是装东西的,在html里面任意一个元素都可以当做一个盒子来看待,HTML中盒子就是用来装各种内容的。接下来给大家介绍一下盒子模型的基本内容。
盒子模型的基本组成部分:在符合w3c的下由外到内分别是margin border padding和元素content,标准盒子模型符合w3c的标准,所以在任意方向添加border padding content的宽高都会使元素整体占用空间变大。正常情况下width定义的是content的宽度,为了使大家更明白我用代码和图片表示一下:
首先我们先定义一个div:
<body>
<div id="div"></div>
</body>
在给他写一个css样式:
#div{
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
border:10px solid blue ;
padding: 20px;
}
给一个图为了使大家更明白:
通过代码和图给大家简单讲解一下,最中间就是我们定义的宽度也就是content的宽度,当我们给padding加一个宽度的时候整个整体也变宽了,padding的距离就是蓝色区域到里面虚线的部分,在外面就是border,由图也很明显的看出也增加了整个整体的宽度,所以在任意方向添加border padding content的宽高都会使元素整体占用空间变大。