css盒子模型的概念和特点（CSS盒子模型）
📜个人简介
⭐️个人主页：微风洋洋
🙋♂️
🍑博客领域：编程基础💡,后端💡,大数据,信息安全 🍅写作风格：干货,干货,还是tmd的干货 🌸精选专栏：【JavaScript】【HTML+CSS】【Java学习笔记】【Java必刷题】 🚀支持洋洋：点赞👍 、收藏⭐ 、留言💬好久不见 ，甚是想念！
大家好🙋♂️我是微风洋洋 今天这篇文章就是来和大家详细聊聊CSS盒子模型 ，希望大家读完有所收获 ，那我辛苦码字也就值了🎈🎈🎈
盒模型是CSS控制页面布局的一个非常重要的概念 ，页面上的所有元素 ，包括文本 、图像 、超级链接 、div块等 ，都可以被看作盒子 。
由盒子将页面中的元素包含在一个矩形区域内 ，这个矩形区域则称为“盒模型 ” 。
网页页面布局的过程可以看作在页面空间中摆放盒子的过程 。通过调整盒子的边框 、边界等参数控制各个盒子 ，实现对整个网页的布局 。
盒模型由内到外依次分为内容（content） 、填充（padding） 、边框（border）和边界（margin）4部分 。
盒子的实际大小为各部分之和 ，下图所示的盒子宽度为：左边界+左边框+左填充+内容宽度+右填充+右边框+右边界 。
一 、盒模型的组成
🍑内容
内容（content）是盒子里的“物品 ” ，是盒模型中必须有的部分 ，可以是网页上的任何元素 ，如文本 、图片 、视频等各种信息 。
定义盒模型语法格式如下：
width: auto | length;
height: auto | length;
overflow: auto | visible | hidden | scroll;
举个例子👇
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> * { font-size: 16px; } .box1 { height: 60px; width: 200px; background-color: #3CC; } .box2 { height: 60px; width: 70%; overflow: auto; background-color: #CCC; } </style> </head> <body> <div class="box1">第一个盒子高度是固定的,但盒子里信息过多 ，超出内容属性所限定的大小 ，盒子的高度将自动放大</div> <p> <div class="box2">第二个盒子高度和第一个盒子一样 ，是固定的 ，但设置了overflow属性为auto ，出现滚动条 ，盒子高度不变 。</div> </body> </html>效果
🍑边界
边界（margin）是盒模型与其他盒模型之间的距离 ，使用margin属性定义 。示例演示了边界设置.
定义盒模型边界语法格式如下：
margin: auto | length;
举个例子👇
代码
效果
🍑填充
填充（padding）用来设置内容和盒子边框之间的距离 ，可用padding属性设置 。
定义盒模型填充语法格式如下：
padding: length;
举个例子👇
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div { height: 20px; width: 150px; background-color: #999; margin: 10px; } div#p1 { padding: 20px; } div#p2 { padding: 10px 20px 30px 40px; } </style> </head> <body style="font-size: 14px"> <div id="p1">填充设置1</div> <div>无填充设置</div> <div id="p2">填充设置2</div> </body> </html>效果
🍑边框
边框（border）是盒模型中介于填充（padding）和边界（margin）之间的分界线 。
（1）边框样式
（2）边框宽度
（3）边框颜色
举个例子👇
代码
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <style type="text/css"> div { width: 200px; background-color: #EFEFEF; margin: 10px; padding: 10px; } .b1 { border-style: inset; border-width: 10px; border-color: rgb(100%, 0%, 0%); } .b2 { border-style: double; border-width: thick; border-color: black;; } .b3 { border: groove thin rgb(255, 255, 0); } .b4 { border: #000 medium dashed; } </style> </head> <body> <div class="b1">边框设置1</div> <div class="b2">边框设置2</div> <div class="b3">边框设置3</div> <div class="b4">边框设置4</div> </body> </html>效果
二 、盒的类型
CSS中的盒子可分为block类型与inline类型 ，使用display属性来定义 。
直接来看个例子吧 ，这个例子看懂了 ，盒的类型你也就明白了👇
代码
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8> <title>block 、inline 、inline-block对比</title> <style> div.div1 { display: block; /*div默认值*/ width: 120px; height: 40px; margin: 2px; background-color: green; } div.div2 { display: inline; /*修改为inline类型*/ width: 120px; height: 40px; margin: 2px; background-color: blue; } div.div3 { display: inline-block; /*inline-block类型*/ width: 120px; height: 40px; margin: 2px; background-color: red; } div.div4 { display: inline-block; margin: 2px; background-color: grey; } </style> </head> <body> <div class="div1">block类型</div> <div class="div1">block类型</div> <hr/> <div class="div2">inline类型</div> <div class="div2">inline类型</div> <hr/> <h3>inline-block类型 ，设置width和height属性</h3> <div class="div3">inline-block类型</div> <div class="div3">inline-block类型</div> <hr/> <h3>inline-block类型 ，无width和height属性</h3> <div class="div4">inline-block类型</div> <div class="div4">inline-block类型</div> </body> </html>效果
🔺 block类型是独占一行 ，而inline是可一个多个在一行 ，拓展的inline-block则是把block转换成与inline相似
三 、CSS3新增的与盒相关的属性
🍑overflow-x与overflow-y属性
指定了盒的宽度与高度后 ，可能出现盒子无法承载其中内容的情况 ，为了避免内容溢出 ，使用overflow属性来指定如何显示盒中容纳不下的内容 。
举个例子👇
代码
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8> <title>overflow</title> <style> span { display: block; width: 180px; height: 100px; background-color: #CCC; overflow-x: auto; overflow-y: auto; } </style> </head> <body> <span>这个示例将span元素定义为block类型 ，同时设置了overflow-x和overflow-y的属性 。如果取消这两个属性的设置 ，指定的区域无法承载 ，将出现溢出…… </span> </body> </html>效果
🍑text-overflow属性
text-overflow属性用于指定盒子中文本溢出的显示方式 ，可以在盒的末尾显示一个代表省略的符号"…" 。
举个例子👇
代码
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8> <title>text-overflow</title> <style> div { white-space: nowrap; /*确保水平方向溢出*/ width: 300px; height: 30px; overflow-x: hidden; /*水平滚动条需要隐藏*/ text-overflow: ellipsis; /*text-overflow效果*/ border: 1px solid grey; } </style> </head> <body> <div>text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效 </div> </body> </html>效果
🍑box-shadow属性
box-shadow属性让盒在显示时产生阴影效果 。
box-shadow属性的指定方式如下 。
box-shadow: xlength ylength r color
举个例子👇
代码
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8> <title>box-shadow</title> <style> div { width: 200px; height: 100px; background-color: blue; box-shadow: 10px 10px 5px grey; /*box-shadow: 10px 10px 0px grey; box-shadow: 0px 0px 5px grey; box-shadow: -10px -10px 5px grey;*/ } </style> </head> <body> <div></div> </body> </html>效果
🍑box-sizing属性
使用box-sizing属性 ，可以指定用width属性与height属性指定的宽度值与高度值是否包含元素的填充区域（padding）与边框（border）的宽度与高度 ，从而实现更为精确的定位 。
举个例子👇
代码
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8> <title>box-sizing</title> <style> div { width: 300px; border: solid 30px blue; padding: 30px; background-color: #ccc; margin: 20px auto; } div#div1 { box-sizing: content-box; } div#div2 { box-sizing: border-box; } </style> </head> <body> <div id="div1">在第一个div元素的box-sizing属性中指定content-box属性值</div> <div id="div2">在第二个div元素 的box-sizing属性中指定border-box属性值</div> </body> </html>效果
下面这个例子使用了box-sizing属性 ，每个盒子的总宽度为浏览器宽度的50% ，实现了一个精确的布局👇
代码
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8> <title>box-sizing</title> <style> div { width: 50%; height: 200px; float: left; padding: 20px; box-sizing: border-box; } div#div1 { border: solid 20px blue; } div#div2 { border: solid 20px green; } </style> </head> <body> <div id="div1">使用box-sizing属性的目的是对元素的总宽度做一个控制</div> <div id="div2">利用border-box属性值会使得页面布局更加方便</div> </body> </html>效果
四 、总结
CSS盒子模型在CSS中算是比较重要的部分了 ，他已经开始涉及到网页布局和设计了 ，对于这一块内容要引起重视 ，多加练习 。
如果觉得对你有一丢丢启发的话 ，不妨
点赞👍 、收藏⭐ 、留言💬支持一下 ，你的支持将是我继续创作的最大动力 。下一篇将介绍CSS网页布局 ，到时不见不散❤️❤️❤️关注 ，即可提高学习效率 。Perfect！
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！