css盒子模型
盒子模型概述
所谓的盒子模型在HTML中就是一个盛装元素内容的容器。
每个盒子模型都由元素的内容、内边距 （padding）、边框（border）和外边距（margin）组成。
<div>标记<div>标记是一个块容器标记。
可以将网页分割为独立的部分，以实现网页的规划和布局。
大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。
可以替代大多数的块级文本标记。
盒子的宽与高
盒子模型的总宽度与总高度
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
盒子模型的相关属性
CSS:hover 属性
选择鼠标指针浮动在其上的元素，并设置其样式：
如：
a:hover
{
background-color:yellow;
}
边框属性
设置内容 样式属性 常用属性值
边框样式 border-style:上边 [右边 下边 左边]; none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度 border-width:上边 [右边 下边 左边]; 像素值
边框颜色 border-color:上边 [右边 下边 左边]; 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
综合设置边框 border:四边宽度 四边样式 四边颜色;
圆角边框 border-radius:水平半径参数/垂直半径参数; 像素值或百分比
图片边框 border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式;
| 属性 | 说明 |
|---|---|
| border-image-source | 指定图片的路径 |
| border-image-slice | 指定边框图像顶部、右侧、底部、左侧内偏移量。 |
| border-image-width | 指定边框宽度 |
| border-image-outset | 指定边框背景向盒子外部延伸的距离。 |
| border-image-repeat | 指定背景图片的平铺方式 |
注意：宽度、样式、颜色顺序任意，不分先后
border:宽度,样式,颜色
内边距属性
内边距（内填充）
padding可设置为上下左右边距分别为top,bottom,left,right
注意：内边距padding不允许使用负值
外边距属性
外边距（margin）
与内边距一样可设置上下左右边距
注意：和内边距不同，外边距margin允许使用负值
当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中
如：
margin:0 auto /* 利用margin实现块元素水平居中*/
margin:5px auto /* 利用margin实现块元素水平居中，并且上下拉开5像素边距*/
内外边距清除
为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距。
格式为：
*{
padding:0; /清除内边距/
margin:0; /清除外边距/
}
box-shadow属性
CSS3中的box-shadow属性可以轻松实现阴影的添加，其基本语法格式如下：
box-shadow:像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型;
| 参数值 | 说明 |
|---|---|
| 像素值1 | 表示元素水平阴影位置，可以为负值（必选属性）。 |
| 像素值2 | 表示元素垂直阴影位置，可以为负值（必选属性）。 |
| 像素值3 | 阴影模糊半径（可选属性）。 |
| 像素值4 | 阴影扩展半径，不能为负值（可选属性）。 |
| 颜色值 | 阴影颜色（可选属性）。 |
| 阴影类型 | 内阴影（inset）/外阴影（默认）（可选属性）。 |
box-shadow属性也可以改变阴影的投射方向以及添加多重阴影效果。
如：
box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #333 inset;
box-sizing属性
box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下:
box-sizing: content-box/border-box;
content-box：浏览器对盒模型的解释遵从W3C 标准，当定义width和height时，它的参数值不包括border和padding。
border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。
背景属性
设置背景颜色
在CSS中，网页元素的背景颜色使用background-color属性来设置
设置背景图像
在CSS中，还可以将图像作为网页元素的背景，通过background-image属性实现。
背景与图片不透明度的设置
通过引入RGBA模式和opacity属性，可以设置图片的不透明度。
RGBA模式
rgba(r,g,b,alpha);
例如：使用RGBA模式为p元素指定透明度为0.5，颜色为红色的背景。
p{background-color:rgba(255,0,0,0.5);}
opacity属性
opacity：opacityValue;
opacity属性用于定义元素的不透明度，参数opacityValue表示不透明度的值，它是一个介于0~1之间的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。
设置背景图像平铺
默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。
background-repeat图像平铺属性
| 平铺属性值 | 含义 |
|---|---|
| repeat | 沿水平和竖直两个方向平铺（默认值） |
| no-repeat | 不平铺（图像位于元素的左上角，只显示一次） |
| repeat-x | 只沿水平方向平铺 |
| repeat-y | 只沿竖直方向平铺 |
设置背景图像位置
background-position图像位置属性
| 位置属性取值 | 含义 |
|---|---|
| 单位数值 | 设置图像左上角在元素中的坐标，例如background-position:20px 20px; |
| 预定义的关键字 | 水平方向值：left、center、right。 |
| 垂直方向值：top、center、bottom。 | |
| 百分比 | 0% 0% ：图像左上角与元素的左上角对齐。 |
| 50% 50%：图像50% 50%中心点与元素50% 50%的中心点对齐。 | |
| 20% 30%：图像20% 30%的点与元素20% 30%的点对齐。 | |
| 100% 100%：图像右下角与元素的右下角对齐，而不是图像充满元素。 |
设置背景图像固定
background-attachment图像固定属性
| 固定属性取值 | 含义 |
|---|---|
| scroll | 图像随页面元素一起滚动（默认值）。 |
| fixed | 图像固定在屏幕上，不随页面元素滚动。 |
设置背景图像大小
运用CSS3中的background-size属性可以轻松控制背景图像的大小。
background-size:属性值1 属性值2;
| 属性值 | 说 明 |
|---|---|
| 像素值 | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； |
| 百分比 | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； |
| cover | 把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中； |
| contain | 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域； |
设置背景的显示区域
运用CSS3中的background-origin属性可以自行定义背景图像的相对位置。
background-origin:属性值;
在上面的语法格式中，background-origin属性有三种取值，分别表示不同的含义，具体解释如下。
padding-box：背景图像相对于内边距区域来定位。
border-box：背景图像相对于边框来定位。
content-box：背景图像相对于内容框来定位。
设置背景图像的裁剪区域
在CSS样式中，background-clip属性用于定义背景图像的裁剪区域
background-clip:属性值;
在语法格式上，background-clip属性和background-origin 属性的取值相似，但含义不同，具体解释如下。
border-box：默认值，从边框区域向外裁剪背景。
padding-box：从内边距区域向外裁剪背景。
content-box：从内容区域向外裁剪背景。
设置多重背景图像
在CSS3中，通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。
如：
background-image:
url(images/caodi.png),
url(images/taiyang.png),
url(images/tiankong.png);
背景复合属性
CSS中的背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。
background:
[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position]
[background-size]
[background-clip]
[background-origin];
使用背景图像属性定义列表样式
list-style是一个复合属性，用于控制列表项目符号的样式。在实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。
渐变属性
线性渐变
在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的 “background-image:linear-gradient（参数值）;”样式可以实现线性渐变效果。
background-image:linear-gradient(渐变角度,颜色值1,颜色值2…,颜色值n);
linear-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值。
渐变角度
渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或关键词。
颜色值
颜色值用于设置渐变颜色，其中“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。
径向渐变
径向渐变是网页中另一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。运用CSS3中的“background-image:radial-gradient（参数值）;”样式可以实现径向渐变效果
background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2…,颜色值n);
radial-gradient用于定义渐变的方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值。
渐变形状
渐变形状用来定义径向渐变的形状，其取值即可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词。
圆心位置
圆心位置用于确定元素渐变的中心位置，使用“at”加上关键词或参数值来定义径向渐变的中心位置。
颜色值
“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。
重复渐变
在网页设计中，经常会遇到在一个背景上重复应用渐变模式的情况，这时就需要使用重复渐变。
重复线性渐变
在CSS3中，通过“background-image:repeating-linear-gradient（参数值）;”样式可以实现重复线性渐变的效果。
基本语法：
background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2…,颜色值n);
重复径向渐变
在CSS3中，通过“background-image:repeating-radial-gradient（参数值）;”样式可以实现重复线性渐变的效果。
基本语法：
background-image:repeating-radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2…,颜色值n);
补充知识点：
盒模型：组成部件：外边距+边框+内边距+内容。
IE盒模型和标准盒模型切换：
box-sizing:border-box;
元素分类：
块级元素：
1.每个块级元素都从新的一行开始，并且其后的元素也另起一行（即自动换行）。
2.元素的高度，宽度，行高以及顶和底边距都可设置。
3.元素宽度在不设置的情况下，是它本省父容器100%（和父元素的宽度一致），除非设定一个宽度。<div> <p> <h1>~<h6> <ol> <ul> <dl> <address> <blockquote> <from>以及列表标签的等等。
行内元素（内联元素）：
1.和其他元素都在一行上。
2.元素的高度，宽度，行高以及顶部和底部边距不可设置。
3.元素的宽度就是它包含的文字或图片的宽度，不可改变。<a> <span> <br/> <i> <em> <strong> <label>
行内块元素：
1.和其他元素都在一行上。
2.元素的高度，宽度，行高以及顶和底边距都可设置。<img> <input>
元素分类转换
display
block:将内联元素或行内块元素转换为块级元素
inline：将其他元素转换为行内元素（内联元素）
inline-block：将其他元素转为行内块元素
none：将其他元素隐藏