盒子模型
盒子模型是网页布局的基础
网页的整个页面可以分割成若干个矩形小块，以此实现网页的布局
< div>标记
< div>与< /div>之间相当于一个盒子，可以设置外边距，内边距，宽和高，同时内部可以容纳段落，表格，标题，图像等各种网页元素，大多数HTML标记都可以嵌套在< div>中，< div>还可以嵌套多层< div>
< div>标记非常的好用，通过id、class等属性配合设置CSS样式，可以代替大多数块级文本标记(如< h> < p>等)
盒子的宽与高
即盒子的大小
控制盒子内的段落文本
| width | 段落的宽度(常用px) |
|---|---|
| height | 段落的高度(常用px) |
边框属性
边框样式
border-style:上边 右边 下边 左边；
| solid | 边框为单实线 |
|---|---|
| dashed | 边框为虚线 |
| dotted | 边框为点线 |
| double | 边框为双实线 |
设置边框样式必须按照上右下左的顺时针顺序，省略时采用值复制的原则
一个值为 四边，两个值为 上下/左右，三个值为 上/左右/下
边框宽度
border-width:上边 右边 下边 左边；
取值单位为像素px
设置边框宽度必须按照上右下左的顺时针顺序，省略时采用值复制的原则
一个值为 四边，两个值为 上下/左右，三个值为 上/左右/下
边框颜色
border-color:上边 右边 下边 左边；
设置边框颜色必须按照上右下左的顺时针顺序，省略时采用值复制的原则
一个值为 四边，两个值为 上下/左右，三个值为 上/左右/下
如果想使边框颜色出现渐变色
| border-top-colors | 上 |
|---|---|
| border-right-colors | 右 |
| border-bottom-colors | 下 |
| border-left-colors | 左 |
渐变规则按照边框宽度，每种颜色占1px
例：border-width:5px;
则 四个方向都可以输入5种颜色
如果不想输入5种颜色，则会将最后一个颜色占据剩余的宽度
圆角边框
将矩形边框圆角化
border-radius:参数1/参数2;
参数1表示圆角的水平半径，参数2表示圆角的垂直半径
参数1和参数2取值单位为px或者百分比
如果只设置一个参数则两个参数都默认相同
此外参数1参数2可以分别设置1-4个参数用来表示4角圆角半径
| 参数1和参数2分别设置参数值数 | 说明 |
|---|---|
| 1个 | 表示四角的圆角半径 |
| 2个 | 第一个参数值表示左上和右下圆角半径，第二个表示右上和左下圆角半径 |
| 3个 | 一个参数值表示左上圆角半径，第二个表示右上和左下圆角半径，第三个代表右下圆角半径 |
| 4个 | 1-4分别代表左上右上右下左下圆角半径 |
图片边框
border-image: border-image-source border-image-slice/border-image-width/border-image-outset border-image-repeat;
| 属性 | 说明 | 取值 |
|---|---|---|
| border-image-source | 指定图片路径 | 路径 |
| border-image-slice | 指定边框图像顶部、右侧、底部、左侧内偏移量 | 数值/百分比 |
| border-image-width | 指定边框宽度 | 数值 |
| border-image-outset | 指定边框背景向盒子外部延伸的距离 | 数值+单位(常用px) |
| border-image-repeat | 指定背景图片的平铺方式 | rouded(铺满)、stretch(拉伸)、repeat(平铺) |
边距属性
内边距
内边距指的是元素内容与边框之间的距离
语法：padding:上内边距 右内边距 下内边距 左内边距;
也可以分开写：
| padding-top | 上内边距 | 值+单位(px,百分比) |
|---|---|---|
| padding-right | 右内边距 | 值+单位(px,百分比) |
| padding-bottom | 下内边距 | 值+单位(px,百分比) |
| padding-left | 左内边距 | 值+单位(px,百分比) |
不允许使用负值，常用像素值(px)
百分比意思为：相对于父元素(或浏览器)宽度的百分比(若设置内外边距为百分比则会根据父元素width的变化而变化)
外边距
外边距指元素边框和相邻元素之间的距离
(简单来说就是使盒子与盒子之间拉开距离)
margin:上外边距 右外边距 下外边距 左外边距;
| margin-top | 上外边距 | 值+单位(px) |
|---|---|---|
| margin-right | 右外边距 | 值+单位(px) |
| margin-bottom | 下外边距 | 值+单位(px) |
| margin-left | 左外边距 | 值+单位(px) |
当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，如下
选择器{width:900px;margin:0 auto;}
有部分元素默认存在内边距和外边距样式：body，h1-h6，p 等
可以清除默认的内外边距，重新定义
*{
padding:0; /*清除内边距*/
margin:0; /*清除外边距*/
}
盒子的阴影效果
box-shadow:像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型;
| 像素值1 | 表示元素水平阴影位置，可以为负值(必选) |
|---|---|
| 像素值2 | 表示元素垂直阴影位置，可以为负值(必选) |
| 像素值3 | 阴影模糊半径(可选) |
| 像素值4 | 阴影扩展半径，必须为正值(可选) |
| 颜色值 | 阴影颜色(可选) |
| 阴影类型 | 内阴影(inset)/外阴影(默认)(可选) |
盒子总宽度与边框内边距的统一
当一个盒子的总宽度确定后，要想给盒子添加边框或内边距，往往要修改width属性值，才能保证盒子大小不改变，但box-sizing可以实现不用修改width属性值也能添加边框或内边距
box-sizing:content-box/border-box;
取值可以是content-box或者border-box
| content-box | 当定义width和height时，它们的参数值不包括border和padding |
|---|---|
| border-box | 当定义width和height时，它们的参数值包括border和padding |
背景属性
背景图像
background-image:url(图像的路径);
背景颜色
background:属性值;
属性值可以是颜色的单词，RGB代码，十六进制
背景与图片的不透明度设置
-
RGBA模式
rgba(r,g,b,alpha);r,g,b是指红,绿,蓝(数值范围是0~255) alpha参数是一个介于0.0(完全透明)~1.0(完全不透明)之间的数字
-
opacity属性
opacity属性可以使任何元素呈现出透明效果
opacity:opacity Value;opacity Value是一个介于0.0(完全透明)~1.0(完全不透明)之间的数字
设置背景图像平铺
默认情况下，背景图像会自动沿着水平和竖直两个方向平铺
可以通过background-repeat 来控制
| repeat | none |
|---|---|
| no-repeat | 不平铺(图像位于元素的左上角，只显示一个) |
| repeat-x | 只沿水平方向平铺 |
| repeat-y | 只沿竖直方向平铺 |
设置背景图像的位置
如果希望背景图像出现在其他位置 可用
background-position:属性值1 属性值2
属性值：
1. 使用像素值(常用)
2. 使用关键字指定背景图像在元素中的对齐方式(两个关键字顺序任意，若只有一个值则另一个默认为center)
水平方向：left、center、right
垂直方向：top、center、bottom
3. 使用百分比：按背景图像和元素的指定点对齐(若只有一个百分数则视为水平值，另一个垂直值默认为50%)
| 0%0% | 图像左上角与元素的右上角对齐 |
|---|---|
| 50%50% | 图像50%50%的中心点与元素50%50%的中心点对齐 |
| 20%30% | 图像20%30%的点与元素20%30%的点对齐 |
| 100%100% | 图像右下角与元素的右下角对齐 |
背景图像的固定
background-attachment:属性值;
| scroll | 图像随页面元素一起滚动(默认) |
|---|---|
| fixed | 图像固定在页面屏幕上，不随页面元素滚动 |
背景图像大小
background-size:属性值1 属性值2;
| 属性值 | 说明 |
|---|---|
| 设置背景图像的高度和宽度。1为宽，2为高，若只设置一个值则另外一个默认为auto | |
| 以父元素的百分比来设置背景图像的宽度和高度。1为宽，2为高，若只设置一个值则另外一个默认为auto | |
| cover | 背景图像完全覆盖背景区域，背景图像某些部分也许无法显示在背景定位区域中 |
| 扩大图像至最大尺寸，以使其宽度和高度完全适应内容区域 |
设置背景显示区域
background-origin:属性值;
| padding-box | 背景图像相对于内边距区域来定位 |
|---|---|
| border-box | 背景图像相对于边框来定位 |
| content-box | 背景图像相对于内容来定位 |
设置背景图像的裁剪区域
background-clip:属性值;
| 属性值 | 说明 |
|---|---|
| border-box | none，从边框区域向外裁剪背景 |
| padding-box | 从内边距区域向外裁剪背景 |
| content-box | 从内容区域向外裁剪背景 |
设置多重背景
通过background-image、background-repeat、background-position、background-size 综合使用实现
各属性值之间用逗号隔开
背景复合属性
语法格式：
background:background-color background-image background-repeat background-attachment background-position background-size background-clip background-origin;
不需要的样式可以省略，各样式顺序任意
