关于CSS（第四章-盒子）重要！！

盒子属性（Boxproperties）

---

文档中的每个元素都可以被看作是一个矩形盒子。

• width&height用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。

• padding代表内容盒子的外边界与外边框的内边界之间的距离。

• border设定介于padding的外边缘与margin的内边缘之间，默认值为0。

• margin代表盒子四周的区域。设值方法与padding类似。相邻元素的边框会合并（margincollapsing）

---

盒子模型

---

默认盒子模型

使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。width属性仅表示盒子内容所占的宽度height属性仅表示盒子内容所占的高度

边框盒子模型

使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。width=width+padding-left+padding-right+border-left+border-right

---

盒子背景样式-background

---

背景（backgrounds）

• background-color 为元素设置一种颜色
• background-image 为原素设置一个背景图片
• background-clip 设定背景的覆盖范围
• background-origin 设定背景的起始点
• background-position设置为背景图像初始位置
• background-repeat设置背景图片的重复方式
• background-attachment设置背景图片的固定点
• background-size设置背景的大小
• background背景设置的速记写法

---

background-color

为元素设置颜色

取值

• 关键字

red、orange、yellow…
color:red;

• 十六进制

#333333 ==> #333
color:#333;

• RGB

r 红色
g 绿色
b 蓝色
color:rgb(0,0,0);

• HSL
• RGBA
• HSLA

---

background-image

为元素设置一个背景图片

取值

• none
• url（）

---

background-clip

设置背景的覆盖范围

取值

• border-box：背景位于边框以外
• padding-box：背景位于内边距以内
• content-box：背景位于内容区

---

background-origin

设定背景图片的起始覆盖点

取值

• border-box：背景图片从边框的外边缘开始绘制
• padding-box：背景图片从内边距的外边缘开始绘制
• content-box：背景图片绘制在内容区

---

background-position

设定背景图片的起始覆盖点

取值

• 关键字
• 坐标

---

background-repeat

设置为背景图像的重复方式

取值

• repeat:为了覆盖整个背景范围，背景图片尽可能多的重复，在背景边缘切割(clipping)最后一个图片以使用整个背景范围。
• space:使用空白分隔开图片，尽可能使背景图片占满整个屏幕而不使用切割(clipping)
• round:将图片压缩或者是扩展以适应整个背景范围，不使用切割
• no-repeat:不重复

---

background-attachment

设置为背景图像的固定点

取值

• fixed:背景固定在视口上
• scroll:背景固定在自身元素上
• local:背景固定在自身元素的内容上

---

background-size

设置背景的大小

取值

• cover:背景铺满整个屏幕，（尽量不要使用大图覆盖小范围）

---

background

背景相关属性的速记写法

取值

[<attachment>][<clip>][<color>][<image>][<position>][<repeat>]

---

盒子边框样式-border

---

边框（border）

• border-width：为元素指定边框的宽度
• border-style为元素指定边框样式
• border-color为元素指定边框颜色
• border-radius为元素指定圆角边框的半径
• border-image为元素设定边框背景

border-image-source用于加载作为边框的图片
border-image-slice用于切割边框图片
border-image-repeat用于设置边框图片重复方式

• border边框相关属性的速记写法

---

border-width

为元素指定边框的宽度

取值

• 关键字:thin、medium、thick
• 单位:px、em

---

border-style

为元素指定边框的样式

取值

• none:不设置
• hidden:隐藏
• dotted:显示一系列的点
• dashed:显示一系列小线段
• solid:显示一条单一的实心直线
• double:显示两条实心直线
• groove:边框雕刻效果(与ridge相反)
• ridge:与groove相反
• inset:嵌入式边界框(与outset相反)
• outset:突出的边界框
• …

---

border-color

为元素指定边框的颜色

取值

• 关键字
• 十六进制
• RGB
• HSL
• RGBA
• HSLA

---

border-radius

为元素指定圆角边框的半径

取值

• 绝对值:px、mm、cm
• 相对值:em、rem

---

border-image

为元素设定边框背景的速记写法

子属性：

• border-image-source用于加载作为边框的图片

  url()

• border-image-slice用于切割边框图片

onevalue:alltheslicesarethesamesize
Twovalues:topandbottom,leftandright
Threevalues:Top,leftandright,bottom
Fourvalues:Top,right,bottom,left

• border-image-repeat用于设置边框图片重复方式

stretch:拉伸，不推荐；repeat:重复切割；
round:重复自适应；space:重复自适应；

---

表格样式 table

---

表格（Stylingtables）

• table-layout指定显示表格的盒子，行，列的算法
• border-collapse指定表格的边框是合并还是分开
• caption-side指定caption坐落在表格的哪个位置上
• 其他
• background为表格添加背景色

---

table-layout

指定显示表格的盒子，行，列的算法

取值

• auto:【默认值】绝大多数浏览器采用的一种布局表格的方式。table以及cell的宽度取决于包含在其中的内容
• fixed:table的宽度以及列的宽度取决于表格的第一行各列设定的宽度

---

表格样式tablelborder-collapse

指定表格的边框是合并还是分开

取值

• separate:【默认值】分开模式，表示相邻的两个格子都有独立边框
• collapse:合并模式，表示相邻的两个格子共享边框

---

caption-side

指定caption坐落在表格的哪个位置上

取值

• top:标题位于表格的上方
• bottom:标题位于表格的下方