今天带大家快速理解盒子模型,直接上代码:
<!doctype html><html>
<head>
<meta charset="utf-8" />
<title>css盒子</title>
<meta name="keywords" content="关键词,关键词" />
<meta name="description" content="" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div>我的css盒子测试模型</div>
</body></html>
上面代码没有任何难度,只是写了一个div
标签,大家已经知道,div
标签是块级元素,所以会占满一行:
![90f9b2da3a24ba8298745d0d098b4a33.png](https://i-blog.csdnimg.cn/blog_migrate/7e765212694159e56150cd5838ae0c49.jpeg)
但是我们也注意到了图片的左侧其实还是有一些间隙的:
![80edbd9ef072a63d5561a681077cbb30.png](https://i-blog.csdnimg.cn/blog_migrate/6f767f3d1df34075aeb59467d4d8119e.jpeg)
这个间隙在我们预期中是不应该存在的,这种间隙基本上就是出在margin
或者padding
或者border
上。
我们先看开发者工具的右侧:
![211e7c9ebb95bfee2b8b9705f5e74b8e.png](https://i-blog.csdnimg.cn/blog_migrate/b39cfb47ba07e817d04ad39439438a4e.jpeg)
上面有一个element.style{}
,下面有一个div
标签的属性,默认display: block
。上面那个是干什么用的呢?我们修改一下代码:
<div style="border: 1px solid red">我的css盒子测试模型</div>
然后再刷新页面看:
![b3a2000ae7dcb06cfe5c2f2876d6ddce.png](https://i-blog.csdnimg.cn/blog_migrate/90c96a0f006f50fe0c2f20056e3e6b45.jpeg)
这下我们就知道了,这个element.style
就是我们写在代码里的属性。但是我们一般不会这么写,也就是大家在写代码的时候把所有属性都放到css
文件中为好,不要让这个element.style
有任何内容。
下面还有一个方框:
![c0fee3da9862ff57be92f172f9da5b51.png](https://i-blog.csdnimg.cn/blog_migrate/6328545b1d49e9c8b1a374a061caf33b.jpeg)
这个框就是目前这个css盒子的具体属性,比如宽度等信息。
- margin:外边距
- border:边框
- padding&#