盒模型
盒模型
一、前言：
页面的制作过程：
设计师设计出设计稿交给前端工程师，前端工程师制作业面：划分区域、填写类容。其中划分区域最重要最复杂。
如何划分区域：
用合适的元素来表示不同的区域(HTML)；
设置区域的位置、尺寸、背景等样式(CSS)；
划分区域中的CSS知识：
每个元素都会在页面中生成一个矩形区域；
CSS称该矩形区域为盒子(box)；
盒子的相关知识：
盒模型：单个盒子的组成
视觉格式化模型：多个盒子的排列（盒子之间的相互作用和影响）
布局：实际应用
二、盒模型概述：
盒子的分类：
不同的元素产生的盒子类型可能不同；
一个元素，产生什么样的盒子，取决于它CSS的display属性；
盒子的组成：
一个盒子由：margin、border、padding、content组成。
盒子内容：
补充知识
内容(content)：
CSS的尺寸单位涉及到的CSS属性。
CSS的尺寸单位：
在CSS中，有很多属性的取值，需要表示为一个尺寸；
一个尺寸，由数值和单位组成；
示例：2000(数值）米（单位）
CSS中常见的尺寸单位：
px像素，绝对尺寸（计算机屏幕由很多的小点组成，每一个点，就是一个像素）；
em相对尺寸｛相对于当前元素的字体大小(px)｝；
%百分比（在不同的CSS属性中，有不同的含义；
所以其他尺寸单位，在经过浏览器计算后，都会变为px）；
盒模型
一、content内容：
1、含义：
用于存放文本或其他元素的区域；
类似于一个箱子中存放东西的空间。
2、相关属性：
width：
含义：宽度
不可继承
默认值：auto
暂认为撑满整个可用区域
其他取值：
1、像素、绝对长度、固定长度：px
所有其他单位都会被计算为像素
2、相对长度：em
相对于应用样式的元素的字体大小
3、百分比：%目前不用管
断词：
1、当内容超过宽度时，会自动对内容进行截断换行；
2、如何截断？
按照断词规则截断；
断词规则可修改；
默认断词规则，
在单词之间进行截断；英文：被空格隔开的即为单词；中文：每个汉字均视为单词。
height：
含义：高度
不可继承
默认值：auto
暂认为适应内容的高度
其他取值：px、en、%
overflow：
含义：内容溢出时的处理方式
不可继承
默认值：visible
溢出部分仍然显示
其他取值：
1、hidden
溢出部分隐藏
2、scroll
在水平和垂直方向上出现滚动条，若溢出，则滚动条可用，否则不可用
3、auto
当内容在水平或垂直方向上溢出时，才在该方向上出现滚动条，否则不出现
min-width：
含义：最小宽度
保证width属性的值不小于该属性值
不可继承
默认值：0px
其他取值 em、%
max-width：
含义：最大宽度
保证width属性的值不大于该属性值
不可继承
默认值：none
表示未设置最大宽度，可视为width属性可以无限大
其他取值 px、 em、%
min-height
含义：最小高度
保证height属性的值不小于该属性值
不可继承
默认值：0px
其他取值 em、%
min-height：
含义：最小高度
保证height属性的值不小于该属性值
不可继承
默认值：0px
其他取值em、 %
max-height：
含义：最大高度
保证height属性的值不大于该属性值
不可继承
默认值：none
表示未设置最大高度，可视为height属性可以无限大
其他取值px、em、%
min-height：
含义：最小高度
保证height属性的值不小于该属性值
不可继承
默认值：0px
其他取值 em
max-height：
含义：最大高度
保证height属性的值不大于该属性值
不可继承
默认值：none
表示未设置最大高度，可视为height属性可以无限大
其他取值px、em、%
min-height：
含义：最小高度
保证height属性的值不小于该属性值
不可继承
默认值：0px
其他取值em、 %
padding 内边距、填充区：
1、含义：
表示边框到内容之间的距离，分为上（top）、右（right）、下（bottom）、左（left）四个方向
类似于箱子和内部空间之间的填充物
2、相关CSS属性：
padding-top：
含义：上内边距
不可继承
默认值：0px
其他取值
em、%
padding-right:
含义：右内边距
不可继承
默认值：0px
其他取值
em、 %
padding-bottom：
含义：下内边距
不可继承
默认值：0px
其他取值
em、%
padding-left：
含义：左内边距
不可继承
默认值：0px
其他取值
em、 %
padding：
速写属性、简写属性
速写属性不是真实的CSS属性，它只是CSS提供的一种快速的写法
书写格式
1. padding:上内边距 右内边距 下内边距 左内边距
2. padding:上内边距 左右内边距 下内边距
3. padding:上下内边距 左右内边距
4. padding:上下左右内边距
border 边框：
一、含义：
分割内部和外部的界限，由上(top)、右(right)、下(bottom)、左(left)四个部分组成
类似于箱子壁
二、相关CSS属性：
上边框：
1、边框样式：border-top-style
含义：上边框的样式
不可继承
默认值：none
无边框样式
其他取值：
solid（实线）、dashed（虚线）、dotted（点阵）、double（双实线）、其他。
2、边框厚度：border-top-width
含义：上边框的厚度
不可继承
默认值：medium
预设值，表示中等边框
其他取值
预设值
medium（中等）、thin（细）、thick（粗）
数值px、em
边框颜色：border-top-color
含义：上边框的颜色
不可继承
默认值：currentcolor
表示当前元素的字体颜色
其他取值
预设值
black（黑色）、white（白色）、gray（灰色）、其他
rgb：
用红绿蓝三种基本颜色调配而成，每种颜色的取值是十进制的数字：0-255
书写格式：rgb(红,绿,蓝)
HEX：
用红绿蓝三种基本颜色调配而成，每种颜色的取值是十六进制的数字00-ff
书写格式：#红绿蓝，#号后必须是6个或3个数值
border-top
速写属性
1、书写格式
2、border-top:厚度 样式 颜色
右边框
border-right-XXX
下边框
border-bottom-XXX
左边框
border-left-XXX
border-width
速写属性：同时设置所有边框的厚度
border-style
速写属性：同时设置所有边框的样式
border-color
速写属性：同时设置所有边框的颜色
border
1、速写属性：同时设置所有边框的厚度、样式、颜色
2、书写格式：
border:厚度 样式 颜色
margin 外边距：
一、含义;
1、表示边框和相邻盒子的距离，分为上（top）、右（right）、下（bottom）、左（left）四个方向
2、类似于箱子与箱子之间的距离
3、具体规则比较复杂，视觉格式化模型详细讲解
二、相关CSS属性
1、margin-top：
含义：上外边距
不可继承
默认值：0px
其他取值
em
%
2、margin-right：
含义：右外边距
不可继承
默认值：0px
其他取值
em
%
3、margin-bottom：
含义：下外边距
不可继承
默认值：0px
其他取值
em
%
4、margin-left：
含义：左外边距
不可继承
默认值：0px
其他取值
em
%
5、margin：
速写属性
书写格式
1. margin:上外边距 右外边距 下外边距 左外边距
2. margin:上外边距 左右外边距 下外边距
3. margin:上下外边距 左右外边距
4. margin:上下左右外边距
6、浏览器默认样式中的margin
-webkit-XXX
-webkit-是浏览器厂商前缀
这是一个历史遗留问题
（在早远的时期，CSS还并不规范，可设置的属性很少，一些浏览器厂商，为了让页面能够实现更加丰富的效果，自己加入了一些CSS属性。
为了让这些属性和标准CSS中的属性进行区分，它们在这些属性前面加入了一个特殊的单词。例如：-webkit-（chrome），-moz-（firefox），-ms-（IE）等。
随着CSS的逐渐规范，这些浏览器厂商自己设定的属性变得越来越没有意义了。但为了兼容老版本浏览器，这些属性依旧保留了下来。
现在，这种属性仅出现在浏览器默认样式表中，它们和现在规范的CSS属性有着对应关系，我们开发者仅需要了解它们的存在即可，不需要去书写它们。）
盒模型知识补充：
子盒子：
一、边框盒（border-box）：由border、padding、content组成
浏览器调试时，页面中显示的元素尺寸是指边框盒的尺寸【演示】
元素的背景，默认覆盖边框盒【演示】，可通过background-clip属性修改
background-clip属性
含义：背景覆盖范围
不可继承
默认值：border-box
取值
border-box：背景覆盖边框盒
padding-box：背景覆盖填充盒
content-box：背景覆盖内容盒
二、填充盒（padding-box）：由padding、content组成
严格意义上，overflow指代的溢出，是指溢出填充盒【演示】
三、内容盒（content-box）：由content组成
默认情况下，width和height属性，是指内容盒的宽度和高度
width和height的设置范围，可通过box-sizing属性修改
box-sizing属性：
1、含义：盒子宽高的设置范围
2、不可继承
3、默认值：content-box
4、取值
content-box：表示内容盒的宽高；
border-box：表示边框盒的宽高【演示】。
盒子尺寸的计算：
1、box-sizing:content-box的情况下
2、box-sizing:border-box的情况下
3、outline属性：
外边框，用法和border完全一致
