CSS Box Model

所谓盒模型( Box Model )就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容区( content )、内边距( padding )、边框( border )和外边距( margin )组成。

所有的元素都会生成一个矩形框，我们称为元素框（ Element Box ），它描述了一个元素在网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其它盒子的大小和位置。

Box Model

内容区( content )

内容区是指元素具体要显示的内容(如图片、文字或其他元素等)区域，元素中的所有子元素和文本内容都在内容区中排列显示。其大小由 width 和 height 属性决定。默认情况下，一个盒子内容区的大小会被内容撑开，即根据内容的变化而变化。

主要属性：

width( 宽，默认值为auto )
height( 高，默认值为auto )
color( 前景色，颜色会应用到文本和边框中，默认一般是黑色 )
background( 背景 )

例：

<style>
div.box{
	width: 200px;
	height: 200px;
	background: yellow;
	color: red
}
</style>
<div class="box">
这是一个黄黄的盒子
</div>

边框( border )

边框是指元素的边界

主要属性：

border-style( 边框样式，默认值为none ) 可选值如下：
- solid（实线）
- dotted（点虚线）
- dashed（方虚线）
- double（双实线）
- none（没有边框）
border-color( 边框颜色，默认值为black )
border-width( 边框宽度，默认值为medium，即中等边框，一般在2-3px )

常规写法：

<style>
div{
    border-width: 10px;
    border-style: solid;
    border-color: red;
}
</style>
<div></div>

值的情况：

border-width: (上) (右) (下) (左) : 四个值，分别为上、右、下、左
border-width: (上) (左右) (下) : 三个值，第一个值表示上、第二个值表示左右、第三个值表示下
border-width: (上下) (左右) : 两个值，第一个值表示上下、第二个值表示左右
border-width: (上下左右) : 一个值，同时表示四个方向

简写法：

<style>
div{
    border: 10px solid red; /* 可同时设置上下左右四个方向的边框，且顺序不限 */
}
</style>
<div></div>

组合写法：

按照上右下左的方向单独设置边框，主要属性有：

border-top
border-right
border-bottom
border-left

且每个方向上的边框可以分别设置不同的属性，例如:

<style>
div{
    border-top-width:10px;
    border-top-style:solid;
    border-top-color:red;
}
</style>
<div></div>

圆角（border-radius）

border-radius会以边框到圆心的距离为园的半径。

例：

<style>
div{
    width: 540px;
    height: 370px;
    background: #618ef7;
    border-radius: 110px;
}
</style>
<div></div>

border-radius

border-radius同样可以设置四个方向的边框，但在顺序上采用左上角、右上角、右下角、左下角的顺序，如下图：

radius-order

值的情况：

border-radius: 40px（同时设置四个角的圆角半径）
border-radius: 10px 50px（第一个值为左上角和右下角的圆角半径，第二个值为右上角和左下角的圆角半径）
border-radius: 10px 50px 40px（第一个值为左上角的圆角半径，第二个值为右上角和左下角的圆角半径，第三个值为右下角的圆角半径）
border-radius: 10px 20px 30px 40px（四个值分别对应左上角、右上角、右下角、左下角的圆角半径，顺时针顺序）

radius-value

border-radius: 20px 20px 20px 20px / 40px 40px 40px 40px（/前的值分别对应左上角、右上角、右下角、左下角的x轴圆角半径，/后的值分别对应左上角、右上角、右下角、左下角的y轴圆角半径）

轮廓（outline）

outline常用于设置元素获取焦点时所显示的轮廓线，它和border的效果十分相似，但不同的是outline是不占空间的，即不会增加盒子可见框的大小。

其主要属性有：

outline-width、outline-style、outline-color，其用法和border-width、border-style、border-color的用法一样。

内边距( padding )

内边距( 填充 )是指边框( 边界 )到内容之间的距离，元素的背景会填充到内边距中

主要属性：

padding-top( 上内边距 )、padding-right( 右内边距 )、padding-bottom( 下内边距 )、padding-left( 左内边距 )，其默认值为0。

内边距也可以简写：

padding：(上下左右)
padding：(上下) (左右)
padding：(上) (左右) (下)
padding：(上右下左)

PS：一个盒子可见区域的大小，由内容区 内边距 和边框共同决定

外边距( margin )

外边距是指元素 边界以外 的部分，属于盒子不可见区域
设置外边距会在元素周围创建“空白区域”，这段空白区域不能放置其他任何内容
外边距会影响盒子可见区域的位置，以及盒子在页面中所占的空间大小

主要属性：

margin-left( 左外边距 )、margin-top( 上外边距 )、margin-bottom( 下外边距 )、margin-right( 右外边距 )

margin-left用于控制元素水平方向的位置，margin-top用于控制元素垂直方向的位
而margin-bottom和margin-right用于控制其它元素的位置。

包含块（Containing Block）

一般情况下，包含块就是这个元素最近的祖先块元素的内容区

在使用width、height、padding、margin属性时，如果值为百分比值( % )，则是相对于其所在包含块的百分比

外边距重叠问题

外边距重叠问题会在以下两种情况中发生：

1、在相邻的块元素中垂直方向的外边距会产生重叠

marginbr

2、在块元素中子元素的上外边距和父元素的上外边距会产生重叠

marginbr2

盒子尺寸（box-sizing）

box-sizing用来设置盒子尺寸的计算方式，即设置width和height属性的计算方式。

属性值：

content-box 默认值，将width和height属性定义为盒子内容区( 不包括内边距和边框 )的大小
border-box 将width和height属性定义为盒子可见区域( 包括内边距和边框 )的大小

box-sizing

PS：content-box 和 border-box 代表2种不同的盒模型规范
content-box 代表标准盒模型，即在正常模式下使用的盒模型
border-box 代表替代( IE )盒模型，即在怪异模式下使用的盒模型

块级盒（Block Box）

特性：

在父容器内独占一行、从上到下排列

auto( 自适应 )

auto 即自动计算，在盒模型中 width、height、margin 这三个属性的值可以为auto

当width为auto时，则块元素的宽度为父元素容器的100%

当height为auto时，则块元素会根据内容自动计算高度( 被内容撑开 )

当将左右外边距(margin)设置为auto，width设置固定值时，则会将两个外边距在其父元素中平均分，即实现块级元素的水平居中。

行内盒（Inline Box）

特性：

行内盒可以与其他行内盒并排显示，没有标签包裹的文本默认自己形成一个盒子称为匿名行内盒子

行内元素不受width和height属性的影响（即宽高不生效）

同时也不受垂直方向的padding、margin属性的影响

可替换元素（replaced element）

替换元素属于行内元素，它是一类外观渲染独立于CSS的 外部对象。例如：<img>、<iframe>、<video>、<input>等。替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来。又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。

IFC

行内格式化上下文（Inline Formatting Context，IFC） 是Web页面中的一块渲染区域，它是行内元素布局发生的区域，它会让元素沿着水平方向一行一行排列，当一行放不下时会自动换行

什么时候产生IFC：

当某个块元素内只有行内元素时则会产生1个IFC
当IFC中有1个或多个块元素插入时，则会产生1个或多个IFC

IFC的渲染规则：

IFC中的元素会在一行中从左到右排列，其宽高不受width和height属性的影响
在一行上的所有元素会在该区域形成一个行框( line box )
行框的高度由行框中line-height属性值最大的行内元素决定，垂直方向的padding、margin属性不会改变行框的高度
浮动的元素不会在行框中，因此浮动元素会影响行框的宽度
行框的宽度容纳不下子元素时，子元素会换到下一行显示，并且会产生新的行框

display（显示类型）

描述：设置元素的显示类型

默认值：inline（行内元素）

例：

<style>
.box1{
    width: 150px;
    height: 150px;
    background-color: #FFB6C1;
}
.box2{
    width: 150px;
    height: 150px;
    background-color: #ff0000;
    display: none; /* .box2 display为 none */
}
.box3{
    width: 150px;
    height: 150px;
    background-color: #111111;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

displaynone

display设置为none时会关闭页面元素的显示，所以元素会完全隐藏且不在占用页面的空间位置。

下面的值可以将一个元素转换成块元素或行内元素

none 关闭显示
block 将元素设置为块元素
inline 将元素设置为行内元素
inline-block 将元素设置为行内块元素
行内块元素可以设置宽高及内外边距，且不会独占一行，兼具两者间的优点也兼具两者间的缺点

visibility（显示隐藏）

描述：设置元素的显示或隐藏

默认值：visible（元素正常显示）

例：

<style>
.box1{
    width: 150px;
    height: 150px;
    background-color: #FFB6C1;
}
.box2{
    width: 150px;
    height: 150px;
    background-color: #ff0000;
    visibility: hidden;
}
.box3{
    width: 150px;
    height: 150px;
    background-color: #111111;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

visibility

visibility设置为hidden的元素会隐藏，但该元素依旧占有页面空间。

overflow（内容溢出）

描述：overflow用于设置当一个元素的内容太大无法适应而超出容器时该做什么

默认值：visible（默认值，超出内容不会被裁剪，允许在容器外显示）

background（背景）

背景相关属性：

属性	描述
`background-color`	设置元素背景色
`background-image`	设置元素背景图片
`background-repeat`	设置背景图片的重复方式
`background-position`	设置背景图片的显示位置
`background-attachment`	设置背景图像的位置是在视口内固定，或者随包含块滚动
`background-size`	设置背景图片的大小
`background-origin`	设置背景图片的显示范围
`background-clip`	背景裁切

background-color

可选值：

颜色值（如：#FFF ｜默认值：transparent 代表透明色）

background-image

可选值：

none 默认值，无背景图片
url() 括号内为图片的URL

background-repeat

可选值：

repeat 默认值，沿着x和y轴重复显示背景图片
repeat-x 沿着x轴重复显示背景图片
repeat-y 沿着y轴重复显示背景图片
no-repeat 背景图片不重复显示

background-position

可选值：

关键字 top、left、bottom、right（必须指定两个关键字才能确定显示位置，如：top right 代表左上角，如果只指定一个，则第二个值默认为center）
偏移量 x轴偏移量、y轴偏移量（如：20px 20px 即水平偏移20px，垂直偏移20px，如果只设置一个值，则会同时设置水平和垂直偏移量）

background-size

可选值：

<width> <height> 如：300px 140px 即宽为300px 高为140px，只设置一个值，则第二值为auto( 自适应 )，即等比例缩放

background-origin

可选值：

border-box 背景图片最大显示范围为 border 区域
padding-box 背景图片最大显示范围为 padding 区域
content-box 背景图片最大显示范围为 content 区域

background-clip

可选值：

border-box 将 border 以外区域的背景裁切
padding-box 将 padding 以外区域的背景裁切
content-box 将 content 以外区域的背景裁切
text 非标准，仅在webkit内核下支持，将背景被裁剪成文字的前景色( color )

背景简写属性（background）

语法：

background: <color> <image> <position/size> <origin> <clip> <repeat>;
/*
<color> 背景色
<image> 背景图
<position/size> 背景图位置/背景图大小
<origin> 背景图显示范围
<clip> 背景裁切
<repeat> 背景重复方式
*/

例：

1 2	/* 将背景设为一张居中放大的图片 */ background: no-repeat center/80% url("./img/image.png");

PS：其中 <clip> 要写在 <origin> 的后面，其它的值没有顺序要求

盒子阴影（box-shadow）

描述：为元素添加阴影效果

盒子阴影

继承性：No

默认值：none（无阴影）

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

说明：x轴偏移量设置为正值向右偏移，负值向左偏移。y轴偏移量设置为正值向下偏移，负值向上偏移

值的情况：

当给出两个、三个或四个 长度值时
- 如果只给出两个值, 那么这两个值将会被当作 x偏移量和y偏移量 来解释。
- 如果给出了第三个值, 那么第三个值将会被当作模糊半径来解释。
- 如果给出了第四个值, 那么第四个值将会被当作扩散半径来解释。
可选值有 inset关键字和颜色值

关键字：

inset（如果没有指定inset，默认阴影在边框外，即阴影向外扩散。如果指定了inset关键字后会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内、背景之上、内容之下）

内部阴影

CSS 颜色值

色彩关键字
色彩关键字是一个不区分大小写的标识符，其表示一个具体的颜色，如：red（红色）、green（绿色）、blue（蓝色）
rgb()
rgb() 函数中包含3个由0到225的十进制数值，分别表示红、绿、蓝 3种颜色分量，如：rgb(255, 204, 51)。
HEX
HEX是sRGB颜色的16进制表示法，如：#FFCC33（简写：#FC3）
rgba()
rgba() 函数是CSS3中新增的颜色值，它是在RGB的基础上加上了透明通道，如：rgba(0, 0, 0, 0.5)（其中0.5代表半透明，如果为0则完全透明，如果为1则不透明）