3千字彻底弄懂CSS盒子模型（图文并茂，通俗易懂）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了3千字彻底弄懂CSS盒子模型（图文并茂，通俗易懂），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11279字，纯文字阅读大概需要17分钟。
内容图文
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！内容通俗易懂，图文并茂，欢迎订阅！
到此为止，html和css的基础已经全部讲完，接下来就是网页的布局。
如何把元素放在网页的任何一个位置？就是布局
文档流Normal flow
网页是一个多层的结构，一层包含着一层，通过css可以分别为每一层来设置样式，作为用户来说只能看到最上面的那一层（化妆）
这些层中，最底下的一层称为文档流，文档流是网页的基础，
我们所创建的元素默认都是在文档流中进行排列。
对于我们来说，元素主要有两个状态：1.在文档流中2.不在文档流中
元素在文档流中有什么特点？
-
块元素：
-
块元素在文档流中总会中独占一行
-
默认宽度是父元素的全部（会把父元素撑满）
-
默认高度是被内容撑开（子元素）
-
举例：
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> .box1{ background-color:red; } </style> </head> <body> <div class="box1">我是div1</div> <div>我是div2</div> </body> </html>
在不指定情况下，红色背景会随着浏览器改变大小而改变，这里html文件里面div的父元素是html标签，所以他的默认宽度就是撑满父元素。而默认的高度就是自身的内容的高度。
-
-
行内元素
-
行内元素不会独占页面的一行，只占自身的大小
-
行内元素在页面中自左向右排列，如果一行职中不能容纳下所有的行内元素，这会换到第二行继续自左向右排列（与书写习惯一致）
-
行内元素的默认宽度都是被内容撑开
-
盒子模型box model
购置家具的时候，比如购置沙发，在搬过来房间的时候是不是先要知道沙发的形状和大小？同样，对一个元素进行布局也需要先知道元素的形状和大小，没有形状就摆放不了。
css将页面中所有的元素都设置为了一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局就是将不同的盒子摆放到不同的位置。
任何网页随便一个元素都是矩形的：
现在形状知道了，所以我们只需再设置大小就可以进行摆放位置。
每一个盒子都由几个部分组成
-
盒子内部装东西的就叫做内容区
-
限制盒子范围的叫做边框
-
内容区的东西和边框一般都是有间隙的，叫做内边距（内容区和边框的距离）
-
两个盒子之间的距离叫做外边距（margin）
内容区：width，height
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.box1{
width:200px;
height:200px;
background-color:#bfa;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
元素中所有的志愿书和文本内容都在内容区中排列，内容区的大小由width和height两个属性来决定
width,height
width:设置内容区的宽度
height:设置内容区的高度
并不是设置整个盒子的大小，而是设置内容区的。
边框 border
边框属于盒子的边缘。
要设置边框，需要至少设置三个样式：（设置边框，这三个属性必须要写）
-
边框的宽度：
border-width -
边框的颜色：
border-color -
边框的样式：
border-style
边框的大小会影响到盒子的大小
.box1{
width:200px;
height:200px;
background-color:#bfa;
/*设置盒子的边框*/
border-width:100px;
border-color:red;
border-style: solid;
}
<div class="box1"><span>aaa</span></div>
图形大小是400*400
border-width
border-width:可以用来指定是个方向的边框宽度(上 右 下 左)
.box1{
width:200px;
height:200px;
background-color:red;
border-width:10px 20px 30px 40px;
border-color:yellow;
border-style:solid;
}
如果只写三个值，就是上 左右 下
border-width:10px 20px 30px;
两个值：上下 左右
一个值：上下左右都是这个值
除了border-width还有border-xxx-width：有top,right,bottom,left,单独用来指定某一个边的宽度。
border-color
指定边框的颜色，同样可以分别指定四个边框的颜色，规则和border-width一样。
如果不写border-color，颜色就是color的颜色值。（如果没有color值，就是默认黑色）
border-style
指定边框的样式，同样也是有四个方向。
solid:·表示实线边框
dotted:表示点状虚线
dashed:虚线
double:双线
border-style的默认值是none，所以不写就没有边框。（三个属性必须指定，不指定只是用了默认值而已）
border简写属性
同时设置边框所有相关样式，并且没有顺序要求
border: 10px green solid;
同样border-top,border-right,border-bottom,border-left设置四个边
border:none;可以为任何一个css属性值设置为none，代表没有样式。
内边距padding
内边距设置边框和内容区的部分
也有四个方向。
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响到盒子的大小。内边距背景颜色是内容区的颜色：
上的内边框和内容区的颜色都变成了红色，那么如何区分呢？
现在在div里面定义一个内容区的样式。
.box1{
width:200px;
height:200px;
background-color:red;
border:10px blue solid;
?
padding-top:100px;
padding-right:100px;
padding-bottom:100px;
padding-left:100px;
}
.inner{
width:100%;
height:100%;
background-color:yellow;
}
<div class="box1"> <div class="inner"></div> </div>
就变成了这样：
inner是父元素的100%，所以黄色部分全部是内容区，红色部分是内边框
一个盒子的可见框的大小，由内容区、内边距 和 边框共同决定 ，所以计算盒子大小要将这三个区域加到一起计算。
但是并不是盒子大小就是可见框的大小，还有不可见的部分，就是盒子除了他的图形所占这一行的其它部分。
如果说大小是500 * 500 不是内容区是 500 * 500 ，而是边框 + 内容区 + 内边距 加起来是 500*500
内边距简写
同样，内边距也可以简写
padding : 10px 20px 30px(上 左右 下)
外边距margin
外边距上面说到了是盒子的不可见部分，所以外边距决定了盒子的位置（占地大小、与其他元素之间的距离）
同样也有四个方向的外边距margin-top,margin-right,margin-bottom,margin-left
设置top，与left的外边距，发现元素分别向下，向右走了。
.box1{
width:200px;
height:200px;
background-color:#bfa;
border:10px red solid;
?
/*外边距*/
margin-top:100px;/*上外边距 元素向下移动*/
margin-left:100px;/*左外边距，元素向右走*/
}
但是设置了margin-right，margin-bottom时候发现没有变化，这是因为元素在页面中是按照自左向右排列，所以默认情况下，如果设置了左和上的外边距，将会移动元素自身，而设置下，右外边距是移动其它元素。
例如：在设置一个div：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
?
<style>
.box1{
width:200px;
height:200px;
background-color:#bfa;
border:10px red solid;
?
/*外边距*/
margin-top:100px;/*上外边距 元素向下移动*/
margin-right:100px;/*上外边距 元素*/
margin-left:100px;/*左外边距，元素向右走*/
margin-bottom:100px;/*上外边距*/
?
}
?
.box2{
width:220px;
height:220px;
background-color:blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
去掉margin-bottom:100px;发现是蓝色的box2进行了移动，右外边距同理。所以，底外边距、右外边距是移动别的元素，左外边距、上外边距是移动自己。（反向思维，上外边距不变，要变化底外边距，所以要保持与下面的元素的间隔变化，看上去好像“自己移动”了）
margin会影响实际占用空间的大小。
指定负值
margin也可以指定负值，就是往相反的反向走。
margin简写
可以同时设置四个方向的外边距，与padding一样。
??盒子水平布局??
刚才没有讲到的就是margin-right
现在有如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
?
<style>
.outer{
width:800px;
height:200px;
border:10px red solid;
}
?
.inner{
width:200px;
height:200px;
background-color:#bfe;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
margin-left:200px;就会向右移动
横线布局：元素在其父元素中，子元素水平方向的位置由以下几个属性共同决定：
1. `margin-left` 2. `border-left` 3. `padding-left` 4. `width` 5. `padding-right` 6. `border-right` 7. `margin-right`
一个元素在父元素中，水平布局必须满足以下等式：
margin-left + padding-left + width + padding-right + border-right + margin-right == 父元素内容区的宽度
但是在代码中 子元素只定义了width:200px,以上等式200 ≠800 ，若结果使等式不成立，则成为过渡约束，等式会自动调整。
如果七个值中没有auto的情况，浏览器会自动调整margin-right的值使等式成立。
右边的空白就是浏览器确保等式成立而自己调整margin-right的。（子元素margin-right变成500）
所以margin-right一般是浏览器调整的。
这七个值中可以设置为auto：
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
?
<style>
.outer{
width:800px;
height:200px;
border:10px red solid;
}
?
.inner{
width:auto;
height:200px;
background-color:#bfe;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
我们将子元素的width设置为auto，则等式变为 0 + 0 + 0 + auto + 0 + 0 + 0 = 800.则此时浏览器不会调整margin-right了，转为调整width，因为width设置了auto，所以width被调整为800，所以子元素就被填充满父元素：
有比如再加一个margin-right:200px,则auto就变成600：
.inner{
width:auto;
height:200px;
background-color:#bfe;
margin-right:200px;
}
得出：哪个值是auto，浏览器就会调整哪个值，而width的值默认就是auto
如果将width和外边距设置为auto，这宽度会调整到最大，设置为auto的外边距为自动为0.
如果将width和heigth和外边距都设置为auto，则外边距都是0，宽度最大。
如果将两个外边距设置为auto，宽度固定值，这外边距设置为相同的值。所以经常利用这个特点，来使一个元素在其父元素中水平居中。示例：
width:xxxpx; /*上下外边距为0，auto是左右外边距是auto*/ margin:0 auto;
如果设置子元素的width超过了父元素的width：
此时浏览器也会调整，使margin-right:-200px;
垂直布局
网页一般是横向固定的，纵向才会有滚动条。所以垂直布局比较简单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
?
<style>
.outer{
background-color:#bfa;
}
?
.inner{
width:100px;
height:200px;
background-color:yellow;
}
</style>
</head>
?
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
子元素多高，父元素就多高：（父元素不设置高度，默认会被子元素撑开。）
增加margin-bottom:
<style>
.outer{
background-color:#bfa;
}
?
.inner{
width:100px;
height:200px;
background-color:yellow;
margin-bottom:100px;
}
</style>
<div class="outer"> <div class="inner"></div> <div class="inner"></div> </div>
为子元素设置了margin-buttom，移动的是下方的元素。所以我们新增一个子元素，就可以看到设置的外边距
如果父元素设置了高度，就不会被子元素撑开：
所以父元素不设置高度，默认被子元素撑开。父元素设置了高度，高度该是多少就是多少
子元素是在父元素中内容区中排列的，如果子元素高度超过了父元素的高度，则成为溢出
.box1{
width:200px;
height:200px;
background-color:#bfa;
}
?
.box2{
width:100px;
height:400px;
background-color:orange;
}
<div class="box1"> <div class="box2"> </div> </div>
在父元素里使用overflow属性来设置父元素如何处理溢出的子元素：
可选值：
-
visible：默认值，子元素溢出后，在父元素外部的位置显示
-
hidden：溢出的内容将不会被显示（一剪梅）
-
scroll：出现滚动条，生成两个滚动条（水平和垂直）
-
auto：根据需要生成滚动条
还有overflow-x,overflow-y单独处理水平方向的溢出、垂直方向的溢出
overflow-x: auto; overflow-y: auto; /*等价于 overflow: auto;*/
内容总结
以上是互联网集市为您收集整理的3千字彻底弄懂CSS盒子模型（图文并茂，通俗易懂）全部内容，希望文章能够帮你解决3千字彻底弄懂CSS盒子模型（图文并茂，通俗易懂）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。