位置: IT常识 - 正文
CSS盒子模型(css盒子模型怎么做)
编辑：rootadmin推荐整理分享CSS盒子模型(css盒子模型怎么做)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:简单描述一下什么是css盒子模型,css盒子模型案例,css盒子模型属性有哪些,css盒子模型居中,css盒子模型边框属性,css盒子模型案例,css盒子模型边框属性,css盒子模型由哪些组成,内容如对您有帮助，希望把文章链接给更多的朋友！
📜个人简介
⭐️个人主页：微风洋洋🙋♂️ 🍑博客领域：编程基础💡,后端💡,大数据,信息安全 🍅写作风格：干货,干货,还是tmd的干货 🌸精选专栏：【JavaScript】【HTML+CSS】【Java学习笔记】【Java必刷题】 🚀支持洋洋：点赞👍、收藏⭐、留言💬
好久不见，甚是想念！ 大家好🙋♂️
我是微风洋洋 今天这篇文章就是来和大家详细聊聊CSS盒子模型，希望大家读完有所收获，那我辛苦码字也就值了🎈🎈🎈
文章目录一、盒模型的组成🍑内容🍑边界🍑填充🍑边框二、盒的类型三、CSS3新增的与盒相关的属性🍑overflow-x与overflow-y属性🍑text-overflow属性🍑box-shadow属性🍑box-sizing属性四、总结盒模型是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！
上一篇：在Vue3项目中使用VueCropper裁剪组件（裁剪及预览效果）(vue项目使用rem)
下一篇：图像超分综述:超长文一网打尽图像超分的前世今生 (附核心代码)(图像超分综述怎么做)
