css盒子模型_看完不迷糊的 CSS 盒子模型介绍

CSS 盒子模型

   在CSS中我们可以把所有的HTML元素都看成一个盒子,我们可以以div为例,在浏览器的检查器中我们也可以比较直观的观察到盒子模型的样子如图所示:

1. 盒子模型的构成:

   内容区:content(图中间的蓝色区域)
   内边距:padding(图中紫色区域)
   边框:border(图中灰色区域)
   外边距:margin(黄色区域)

注意 区分盒子的大小和盒子在浏览器中所占的大小
   盒子的大小=内边距+边框+内容区
   盒子在浏览器中的大小=内边距+边框+内容区+外边距
   盒模型的构成=内边距+边框+内容区+外边距

2.盒子模型的分类:
   盒子模型可以通过box-sizing来设置,box-sizing值默认为content-box;

1)content-box:
   内容盒子/w3c盒子;
   该模型下设置的宽高:

div{width: 100px;//内容区的宽度height: 100px;//内容区的高度border: 5px solid pink;padding:10px;margin: 10px;}1234567

盒子的宽度：width + border-left + border-right + padding-left + padding-right
盒子高度： height + border-top + border-bottom + padding-top + padding-bottom
此时盒子在浏览器中的高度 ：height + border-top + border-bottom + padding-top + padding-bottom + margin-top + margin-bottom;
盒子在浏览器中宽度：height + border-top + border-bottom + padding-top + padding-bottom + margin-top + margin-bottom;

2)border-box:
   边框盒子/IE盒子
   通过box-sizing来设置值为border-box
   该模型下设置的宽高:

width:200px;//盒子的宽度height:200px;//盒子的高度12

内容区的高度：height - border-top - border-bottom - padding-top - padding-bottom
内容区的高度：height - border-top - border-bottom - padding-top - padding-bottom
盒子在浏览器中的宽：width + margin-left + margin-right
盒子在浏览器中的高：height + margin-top + margin-bottom

3.盒子模型的使用
   一般需要设置box-sizing属性时都是要用到border-box,border-box有个特点那就是设置的宽高即为盒子的宽高当你改变padding或者border时盒子大小不会变而会挤压你的内容区大小,当你需要设置内容区在合资中的位置时可以使用border-box来设置。

对了，在这里说一下，我目前是在职web前端开发，如果你现在正在学习前端，了解前端，渴望成为一名合格的web前端开发工程师，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺乏基础入门的视频教程也可以直接来找我，我这边有最新的web前端基础精讲视频教程， 还有我做web前端技术这段时间整理的一些学习手册，面试题，开发工具，PDF文档书籍教程，都可以直接分享给大家。

原文链接：https://blog.csdn.net/wt1310445488/article/details/108185612

作者：wt1310445488