这篇文章主要给大家分享关于CSS盒子模型的内容，CSS盒子模型的组成部分和使用本文都有介绍，对新手学习和了解CSS盒子模型有一定的帮助，感兴趣的朋友不妨了解看看，那么接下来就跟随小编一起学习一下吧。

    网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

简介

    CSS （Cascading Style Sheet）可译为“层叠样式表 ”或“级联样式表”，它定义如何显示HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。对于是盒子的元素，如果没有特殊设置，其默认总是占独立的一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子，都只能排列在它的上面或者下面，即上下累加着进行排列。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、填充(padding)、边框(border)和空白边(margin)。 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;
	}

盒子的宽度：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;	//盒子的高度

内容区的高度：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来设置。

总结

    现在大家对于CSS盒子模型都有所了解了，大家也可以尝试使用一下CSS盒子模型，希望大家阅读完这篇文章能有所收获，想要了解更多CSS盒子模型的内容，大家可以关注群英网络其它相关文章。

文本转载自脚本之家 

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• HTML5中外链嵌入页面通信怎么实现，方法是什么

  这篇文章主要介绍了html5关于外链嵌入页面通信问题(postMessage解决跨域通信),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 如何用CSS实现打开关闭的功能，方法是什么？

  这篇文章给大家分享的是用CSS实现打开关闭功能的示例。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• 浮动元素出现哪些问题？如何解决？

  本文主要给大家分享浮动元素的内容，对于浮动元素的使用可能会出现多种问题，导致后面的布局混乱等等，下面我们就来看看浮动元素常见的问题及解决方法，感兴趣的朋友就继续往下看吧。

• CSS中制作一个基本的直角梯形方法是什么

  在css中，可用border属性做直角梯形，语法为“元素{border:0px solid transparent;border-top:梯形高度 solid 颜色;border-left:梯形长度 solid transparent}”。

• CSS中百分比height不生效是什么原因？怎样解决？

  CSS中百分比height不生效是什么原因？我们知道width和height属性可以给百分比设定宽高，但是为什么有时候height:100%不起作用呢？这是不少新手朋友比较困惑的问题，对此下面小编就和大家来分享一下height:100%不生效的原因及解决方法。