本文深入讲解CSS盒子模型，包括文档流、盒模型的构成、内外边距、外边距折叠等核心概念，以及如何实现水平垂直布局，适合前端开发者学习。
盒子模型
一、文档流(normal flow)
文档流：就是普通流bai了。就像以前用表格布du局基本只涉及到文档流，如绝对定位的元zhi素不占文dao档流，它会忽略文档流的存在而浮在已有东西的上面。如相对定位它占文档流 ，所以定位不好它会覆盖已有的东西。浮动的东西也不占的，只是文档流会围绕浮动的东西。因为div布局要经常用浮动，不浮动不好布局。如一个主div1是文档流，假设里面有（2个浮动div(高100px)），如果不加清理，或overflow或其他处理方法。因为东西在两个 浮动的div里，这时接个主div2,那它是出现在div1的下面，而不是在100px下，当然ie会自动扩大高度，但其他浏览器可不会。
-
网页是一个多层的结构，一层摞着一层
-
通过CSS可以分别为每一层来设置样式
-
作为用户来讲只能看到最顶上一层
-
这些层中，最底下的一层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列
-
对于我们来说元素主要有两个状态：
- 在文档流中
- 不在文档流中(脱离文档流)
-
元素在文档流中有什么特点：
- 块元素
- 块元素会在页面中独占一行
- 默认宽度是父元素的全部(会把父元素撑满)
- 默认高度是被内容撑开(子元素)
- 行内元素
- 行内元素不会独占页面的一行，只占自身的大小
- 行内元素在页面中自左向右水平排列，如果一行之中不能容纳下所有的行内元素则元素会换到第二行继续自左向右排列(书写习惯一致)
- 行内元素的默认宽度和高度都是被内容撑开
- 块元素
二、盒子模型的内容区和边框
盒模型、盒子模型、框模型(box model)
— CSS将页面中的所有元素都设置为了一个矩形的盒子
— 将元素设置为举行大的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
— 每一个盒子都由集合部分组成
2.1 内容区(content)
内容区(content)，元素中的所有子元素和文本内容都在内容区中排列，内容区的大小由width和height两个属性来设置
width:设置内容区的宽度
height:设置内容区的高度
注意：改变的是这个块元素中的内容区大小，行内元素没有width和height
2.2 边框(border)
边框(border)，边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
边框的大小会影响到整个盒子的大小
设置边框的三个样式：
边框的宽度：border-width:10px;
边框的颜色：border-color:red;
边框的样式：border-style:solid;
- border-width
默认值，一般都是3个像素
border-width可以用来指定四个方向的边框的宽度
例如：broder-width:10px,20px,30px,40px;
——————————————————————————————————————————————
值的情况：
四个值分别依次代表：上 右 下 左
三个值分别依次代表：上 左右 下
两个值分别依次代表：上下 左右
一个值代表：上下左右
——————————————————————————————————————————————
除了border-width还有一组 border-xxx-width,其中xxx可以是 top right left top
用来单独指定某一个边的宽度
例如：border-top-width:10px;
- border-color
border-color用来指定边框的颜色，同样可以分别指定四个边的边框规则和border-width一样（注：border-color也可以省略不屑，如果省略了则自动使用color的颜色值）
border-color同样也可以一次写四个、三个、两个或一个值
border-color也童颜有一组border-xxx-color
- border-style
border-style可以指定的边框的样式：
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线
border-style的默认值是none 表示没有边框
border-style同样也可以一次写四个、三个、两个或一个值
border-style也童颜有一组border-xxx-style
- border简单写法
<style>
div{
width:200px;
height:200px;
border:10px solid orange;/*没有先后顺序的要求*/
/*
也可以这么简写属性：
border-xxx:10px double red;
例如：border-top:20px solid green;
*/
}
</style>
三、盒子模型的内边距和外边距
3.1 内边距(padding)
内容区和边框之间的距离是内边距
一共有四个方向的内边距：
— padding-top
— padding-right
— padding-bottom
— padding-left
内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
一个盒子可见框的大小，由内容区、内边距和边框共同决定
<style>
div{
padding-top:100px;
padding-right:100px;
padding-bottom-100px;
padding-left:100px;
/*
padding内边距的简写属性，可以同时指定四个方向的内边距
规则和border-width一样
*/
}
</style>
3.2 外边距(margin)
外边距不会影响盒子可见框的大小
但是外边距会影响盒子的位置
一共有四个方向的外边距：
— margin-top(上外边距，设置一个正值，元素会向下移动)
— margin-right(默认情况下设置margin-right不会产生任何效果)
— margin-bottom(下外边距，设置一个正值，其下边的元素会向下移动)
— margin-left(左外边距，设置一个正值，元素会向右移动)
— margin也可以设置负值，如果是负值则元素会向右移动
元素在页面中是按照自左向右的顺序排列的
所以默认情况下如果我们设置的左和上外边距则会移动元素自身，
而设置下和右外边距会移动其他元素
margin的简写属性：
margin 可以同时设置四个方向的外边距，用法和padding一样
margin会影响到盒子实际占用空间
四、水平方向和垂直方向的布局
4.1 水平方向的布局
- 元素的水平方向的布局：
元素在其父元素中水平方向的位置由以下几个属性共同决定:
``margin-left margin-right`
``border-left border-left`
``padding-left padding-right`
``width`
- 一个元素在其父元素中，水平布局必须要满足以下的等式
``margin-left+border-left+padding-left+width+padding-right+border-right+margin-right `
``= 其父元素内容区的宽度(必须满足)`
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平方向的布局</title>
<style>
.red{
width: 800px;
height: 200px;
background: red;
}
.yellow{
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div class="red">
<div class="yellow">
</div>
</div>
</body>
</html>
``margin-left+border-left+padding-left+width+padding-right+border-right+margin-right`
0+0+0+200px+0+0+0=800px —> 0+0+0+200px+0+0+600px=800px
或
100px+0+0+200px+0+0+400px=800px —> 100px+0+0+200px+0+0+500px=800px
以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整，右边为调整后的
调整情况：如果这七个值没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足
- 这七个值中有三个值可设置为auto，分为以下情况
这三个值分别为：
width
margin-left
margin-right
— 如果某个值为auto，则会自动调整为auto的那个值以使等式成立
例如：0+0+0+auto+0+0+0 = 800px(其中此处auto为800px)
0+0+0+auto+0+0+200px = 800px(其中此处auto为600px)
200px+0+0+auto+0+0+200px = 800px(其中此处auto为400px)
auto+0+0+200px+0+0+200px = 800px(其中此处auto为400px)
auto+0+0+200px+0+0+auto = 800px(其中此处auto为300px)
总结：
— 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
— 如果将三个值都设置为auto，则外边距都是0，宽度最大
— 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值，所以我们经常利用这个特点来使一个元素在其父元素中水平居中
注意：如果有一个固定值为负值，则以上auto依然成立
4.2 垂直方向的布局
子元素实在父元素的内容区中排列的
如果子元素的大小都超过了父元素，则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
overflow可选值：
visible 为默认值，子元素会从父元素中溢出，在父元素外部的的位置显示
hidden 溢出内容将会被裁剪不会显示
sroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条(水平或垂直多出了有滚动条，如果水平未超出则水平没有)
五、外边距的折叠
垂直外边距的重叠(折叠)
-
相邻的垂直方向外边距会发生重叠现象
-
兄弟元素
- 兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)
- 特殊情况
- 如果相邻的外边距是一整一负，则取两者的和
- 如果相邻的外边距都是负值，则取两者中的绝对值较大的的执行那个负数（而不是绝对值的数）
- 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
-
父子元素
- 父子元素间相邻外边距，子元素的会传递给父元素(上外边距)
- 父子外边距的折叠会影响到页面的布局，必须要进行处理(处理方式可以使其不相邻，后面有更好的方式)
六、行内元素的盒模型
行内元素的盒模型
— 行内元素不支持设置宽度和高度
— 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
— 行内元素可以设置border,垂直方向的border不会影响页面的布局
— 行内元素可以设置margin，垂直方向的margin不会影响
-
display —— 用来设置元素显示的类型
-
可选值：
-
inline 将元素设置为行内元素
-
block 将元素设置为块元素
-
inline-block 将元素设置为行内块元素
行内块，既可以设置宽度和高度又不会独占一行
-
table 将元素设置为一个表格
-
none 元素不在页面中显示
-
-
-
visibility —— 用来设置元素的显示状态
- 可选值
- visible 默认值，元素在页面中正常显示
- hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置
- 可选值
七、浏览器的默认样式
默认样式：
— 通常情况，浏览器会为元素设置一些默认样式
— 默认样式的存在会影响页面的布局
重置样式表：专门用来对浏览器的样式进行重置的
reset.css 直接去除了浏览器的默认样式
normalize.css 对默认样式进行了统一
扫一扫
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
