这篇文章主要给大家分享关于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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• HTML+CSS实现背景虚化的代码怎样写

  css实现背景虚化效果？一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

• CSS层级选择器的定义是什么，有几种类型

  CSS层级选择器 是根据HTML节点树之间的关系提供的选择器用法，所以说如果想要很好的学习层级选择器 首先要搞清楚HMTL元素之间的关系是什么样子的

• 使用CSS3怎样制作文本的颜色渐变动画效果

  本篇文章主要介绍了CSS3的颜色渐变效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• CSS中怎样实现多元素右对齐，方法是什么

  这篇文章主要介绍了css下div下同行多元素右对齐,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS中transition动画的基本写法和使用是怎样的

  animations使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分，描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。