今天带大家快速理解盒子模型,直接上代码:
css盒子
我的css盒子测试模型
上面代码没有任何难度,只是写了一个div标签,大家已经知道,div标签是块级元素,所以会占满一行:
![6fa8076b28906d881ab063240da63a36.png](https://i-blog.csdnimg.cn/blog_migrate/af9e9be4eda4d4e6b3846ae78c93065a.jpeg)
但是我们也注意到了图片的左侧其实还是有一些间隙的:
![1f7c590608fff4828e267cfd71d0de6d.png](https://i-blog.csdnimg.cn/blog_migrate/8aa85a1354d8d979a6850b0a087fa465.jpeg)
这个间隙在我们预期中是不应该存在的,这种间隙基本上就是出在margin或者padding或者border上。
我们先看开发者工具的右侧:
![9b8ab7ddf83f748ce8ef6d8e7bf3032e.png](https://i-blog.csdnimg.cn/blog_migrate/5a4d3de2f104796f9c5218b78f9720c8.jpeg)
上面有一个element.style{},下面有一个div标签的属性,默认display: block。上面那个是干什么用的呢?我们修改一下代码:
我的css盒子测试模型
然后再刷新页面看:
![6a70078a3a81472f1ed57c3db3639555.png](https://i-blog.csdnimg.cn/blog_migrate/e1b48dff8c7b6ba54e7a497efd620a27.jpeg)
这下我们就知道了,这个element.style就是我们写在代码里的属性。但是我们一般不会这么写,也就是大家在写代码的时候把所有属性都放到css文件中为好,不要让这个element.style有任何内容。
下面还有一个方框:
![9456dda96a7fa83a6e86c10fea06d894.png](https://i-blog.csdnimg.cn/blog_migrate/65b2525c9e338862da52d0e3f9412194.jpeg)
这个框就是目前这个css盒子的具体属性,比如宽度等信息。
- margin:外边距
- border:边框
- padding:内边距
也就是说一个完整的盒子模型大小是由这三个参数值共同决定的。现在我们修改代码:
lesson4.html
我的css盒子测试模型
原代码不变,只是给div加一个id。
index.css
*{}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff;}
然后我们刷新页面:
![9d76881816e4d1863d71b5a89b6bd9cf.png](https://i-blog.csdnimg.cn/blog_migrate/9be59b3da02aa40c9e5e9e23715d63c5.jpeg)
下面盒子区域也会随之变化:
![6b8a188b6876f0ae555ee60780ceeb44.png](https://i-blog.csdnimg.cn/blog_migrate/7b734dee40eef3cf7d67d8dd45cbc5ca.jpeg)
我们看到内容区域大小变成了100*100,而padding、border、margin都为0,我们来修改这三个值,再看效果:
*{}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px;}
![faac868ffd81f3368667d344871b675e.png](https://i-blog.csdnimg.cn/blog_migrate/f78106d0950cddb645dd5cbdccb9034f.jpeg)
![f38aacefbf751f717b56ee89a6a0a031.png](https://i-blog.csdnimg.cn/blog_migrate/7c6012cf02505636eede069ae6e4e8f2.jpeg)
盒子大小由原来的100*100变为120*120了。
padding为内边距,我们看到文字和边缘有了10像素的距离:
![af5d8e1f7c5aa1414141f55a5218e9b3.png](https://i-blog.csdnimg.cn/blog_migrate/fe657683b3fd1e12e8aa3537d7e90ab0.jpeg)
从上面图片看到,padding属性也是分为上下左右的,所以这个padding其实是分为padding-left、padding-right、padding-top、padding-bottom。
![97cc45f2c9baa3f36bbc0a5bd7f8ab1a.png](https://i-blog.csdnimg.cn/blog_migrate/5880381cd277e71b4ab40efb91b23117.jpeg)
如果四个方向边距都不一样,我们写四个有点太累赘了,所以我们可以这样写:
padding: 10px 20px 30px 40px;
![d741dc22e7957498610195ee79007509.png](https://i-blog.csdnimg.cn/blog_migrate/45a438d0e3fa9e5289cef5759330a75a.jpeg)
可以看到,四个值从左到右分别代表:上、右、下、左,也就是顺时针走的边距。只要这样写的方式,都是这种顺时针代表的。
如果你写
padding: 10px 20px;
就代表上下10px,左右20px。
这些大家试一下就知道了。
border代表边框。
#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border: 10px solid red;}
![247e2807566b42a004c8755196a3ef04.png](https://i-blog.csdnimg.cn/blog_migrate/ace56ea63aea40ec1e679f7e18b48dae.jpeg)
![87178215f200d10979a76f58e71b1b4f.png](https://i-blog.csdnimg.cn/blog_migrate/5807f94fd7ae5ad2c886c9e5cbfdb3a4.jpeg)
border: 10px solid red;代表上下左右都是10像素、实线、红色。如果要四个边框不一样就只能一个一个写了:
![dbffcc22a46a0877a2fb1e34e075b7c7.png](https://i-blog.csdnimg.cn/blog_migrate/08371d147320df8eb88cf0e80e28e055.jpeg)
#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb;}
![a22c9e7626644a9cb3191cd2ff075e70.png](https://i-blog.csdnimg.cn/blog_migrate/82f11b7c9ba59bc647466ce8961cb9e9.jpeg)
增加了border以后盒子大小也会变化:
![91534b6cf426ab8f0e2f6962e5a4f1d8.png](https://i-blog.csdnimg.cn/blog_migrate/1a56badb1dbad0a498f61f2358633a33.jpeg)
由于现在浏览器有可能会自动给你的代码加上margin或者padding,我们经常在css文件中先设置一下这两个属性值为0:
html, body{ margin: 0px; padding: 0px;}
此时,我们再看一下,样式:
lesson4.html
Css盒子模型
我的css盒子测试模型
index.css
*{}html, body{ margin: 0px; padding: 0px;}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb;}
此时,样式就会紧贴着浏览器边缘了:
![2b105095b1a4d962f5b4b79652e55f06.png](https://i-blog.csdnimg.cn/blog_migrate/8eec1a247cca38daf8ff68dfe02b8cb2.jpeg)
有时候我们也会这样写:
index.css
*{ margin: 0px; padding: 0px;}html,body{ width: 100%; height: 100%;}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb;}
这样一来,我们盒子模型的大小就会随着浏览器窗口的大小而自适应了。再来说一下外边距——margin,我们修改我们的代码为:
lesson4.html
Css盒子模型
我的css盒子测试模型1
我的css盒子测试模型2
index.css
*{ margin: 0px; padding: 0px;}html,body{ width: 100%; height: 100%;}div.mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb;}
我们看一下效果:
![04f4e532fe809a1b4625c0d49d184a14.png](https://i-blog.csdnimg.cn/blog_migrate/8341116f059806210d3c9573a9db5c5a.jpeg)
两个盒子分别在两行出现,那么如果我想把这两个盒子放到一行,我要怎么办呢?我的第一个想法是把display属性改为inline,但是发现改后样式变为:
![823612766e9c6d6acad0ae633d8e15b8.png](https://i-blog.csdnimg.cn/blog_migrate/0023987099330fbe0887d84e78c6bef5.jpeg)
这是因为行内元素是不能修改宽和高的,这时候我们用display: inline-block就可以了:
![a962ac99c2399a5483831167e01c37e9.png](https://i-blog.csdnimg.cn/blog_migrate/226454e7d4b1b485f516cf3a9951d827.jpeg)
现在又出现了另一个问题,就是大家发现上面两个盒子中间多了一个空白的地方,而且空白地方无法选中,说实话如果你用inline-block那么中间这个间距就是默认自带的了(如果非要去掉就要加float: left或者margin: -10;)。
现在我们盒子和浏览器边缘是没有间距的,现在我们希望它离浏览器有一段距离,我们加一个margin: 10px;属性,然后再看:
![72d0a93da3715c06b6003425c16e579c.png](https://i-blog.csdnimg.cn/blog_migrate/d9a5f38b8a2c1256c1ae21b67f83fe39.jpeg)
我们看到它和浏览器之间有了边距,我们再来看一下现在盒子的大小:
![0bdd5cb8173bb43b1c8d340c446b1e1e.png](https://i-blog.csdnimg.cn/blog_migrate/830f490f5cd2795445cc525e8c71810f.jpeg)
盒子现在的大小是160*140
![78ad19341c6f2ca8288e3a2a5a86ab5d.png](https://i-blog.csdnimg.cn/blog_migrate/b1319d8af1926f762857c1ad9562740e.jpeg)
可以看到盒子的大小是没有计算最外层的margin属性的也就是
160=100+202+102;140=100+102+102
所以说margin是盒子的外边距,在盒子外面,不算做盒子大小的。
现在大家就掌握了盒子模型的所有基础概念了。
如果对接口、性能、自动化测试、面试经验交流等感兴趣的,可以关注我的头条号,我会不定期的发放免费的资料,这些资料都是从各个技术网站搜集、整理出来的,如果你有好的学习资料可以私聊发我,我会注明出处之后分享给大家。欢迎分享,欢迎评论,欢迎转发。需要资料的同学可以关注小编+转发文章+私信【测试资料】