css手册总结（二）

尺寸与补白 Dimension

1.min-width：定义元素的最小宽度。

当min-width属性的值小于width时，min-width属性将会被忽略。
当min-width属性的值大于width时，min-width属性将会被忽略，同时width会忽略自己的值定义而使用min-width的值作为自己的使用值。
当min-width属性的值大于max-width时，max-width属性将会被忽略。

2.max-width：定义元素的最大宽度。

当max-width属性的值小于width时，max-width属性将会被忽略，同时width会忽略自己的值定义而使用max-width的值作为自己的使用值。
当max-width属性的值大于width时，max-width属性将会被忽略。
当max-width属性的值小于min-width时，max-width属性将会被忽略。

3.min-height：定义元素的最小高度。

当min-height属性的值小于height时，min-height属性将会被忽略。
当min-height属性的值大于height时，min-height属性将会被忽略，同时height会忽略自己的值定义而使用min-height的值作为自己的使用值。
当min-height属性的值大于max-height时，max-height属性将会被忽略。

4.max-height：定义元素的最大高度。

当max-height属性的值小于height时，max-height属性将会被忽略，同时height会忽略自己的值定义而使用max-height的值作为自己的使用值。
当max-height属性的值大于height时，max-height属性将会被忽略。
当max-height属性的值小于min-height时，max-height属性将会被忽略。

5.margin：为元素设置所有四个方向（上右下左）的外边距。

margin属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边。
非替代(non-replaced)行内元素可以使用该属性定义horizontal-margin；若要定义vertical-margin，必须改变元素为块级或行内块级。
外延边距始终透明，即不可见也无法设置背景等任何样式。
某些相邻的margin会发生合并，我们称之为margin折叠

• margin折叠常规认知：
  • margin折叠只发生在块级元素上；
  • 浮动元素的margin不与任何margin发生折叠；
  • 设置了属性overflow且值为非visible的块级元素，将不与它的子元素发生margin折叠；
  • 绝对定位元素的margin不与任何margin发生折叠；
  • 根元素的margin不与其它任何margin发生折叠；
• 对应的脚本特性为：margin。

分拆纵向独立属性。为元素设置上、下外边距。

• 替代(Replaced)行内元素可以应用该属性；非替代(non-Replaced)行内元素要使用该属性必须改变元素为块级或行内块级。
• 水平（默认）书写模式下，margin 合并只发生在vertical-margin上。
• 对应的脚本特性分别为：marginTop, marginBottom。

分拆横向独立属性。为元素设置上、下外边距。

• 所有的行内元素均可以应用该属性。
• 默认情况下，horizontal-margin不会发生 margin 折叠，除非将书写模式改变为纵向。
• 对应的脚本特性分别为：marginRight, marginLeft。

6.padding：为元素设置所有四个方向（上右下左）的内边距。

• padding属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边。
• 需要注意的是，当我们为行内元素定义纵向内补白（padding-top/padding-bottom）时，虽然不需要将之转化为行内块或者块级，但是给行内元素设置纵向内补白并不会影响布局。内补白会在当前元素的行框基础上向顶部和顶部外延，但是这些外延不会拓展新的布局大小（你甚至可以把它想象成类似outline）。
• 对应的脚本特性为：padding。

分拆独立属性。为元素单独设置上、右、下、左4个方向的内边距。

• 对应的脚本特性分别为：paddingTop, paddingRight, paddingBottom, paddingLeft。

背景与边框属性

1.border：定义元素边框的外观特性。

• border-width：定义元素的边框厚度。

border-width属性如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边；只提供一个，将用于全部的四边；提供两个，第一个用于上、下，第二个用于左、右；提供三个，第一个用于上，第二个用于左、右，第三个用于下。
如果border-style设置为none | hidden，border-width及其分拆独立属性的计算值将为0。

• border-style:定义元素的边框样式。
  
  border-style.jpg

border-style如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边；只提供一个，将用于全部的四边；提供两个，第一个用于上、下，第二个用于左、右；提供三个，第一个用于上，第二个用于左、右，第三个用于下。
如果border-width等于0，border-style及其分拆独立属性将失效。

• border-color:定义元素的边框颜色。

border-color如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边；只提供一个，将用于全部的四边；提供两个，第一个用于上、下，第二个用于左、右；提供三个，第一个用于上，第二个用于左、右，第三个用于下
如果border-width等于0或border-style设置为none | hidden，border-color及其分拆独立属性将失效。
如果 border-color 未被定义，边框颜色将默认取当前最近的文本颜色，即 currentColor。

• box-shadow：定义元素的阴影。

box-shadow: none | inset（可选值，不设置，为外投影，设置，为内投影） x-offset（阴影水平偏移量，正方向为right） y-offset（阴影垂直偏移量，正方向为bottom） blur-radius（阴影模糊半径，为正，0为无模糊效果，值越大，越模糊） spread-radius（阴影扩展半径，可正可负） color（设置对象的阴影的颜色）

属性值描述:
1.阴影类型：此参数可选，默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影。
2.X-offset:是指阴影水平偏移量,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边
3.Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部。
4.阴影模糊半径：此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊
5.阴影扩展半径：此参数可选，其值可为正负值，正值，则整个阴影都延展扩大，反之，则缩小
6.阴影颜色：此参数可选，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
注：多层阴影，最内层优先级最高，之后依次降低。使用逗号“，”隔开。

box-shadow.jpg

• border-radius：定义元素的圆角。

水平半径或半轴：如果提供全部四个参数值，将按上左top-left、上右 top-right、下右 bottom-right、下左 bottom-left的顺序作用于四个角；提供三个，第一个用于top-left，第二个用于top-right和bottom-left，第三个用于bottom-right；提供两个，第一个用于top-left和bottom-right，第二个用于top-right和bottom-left；只提供一个，将用于全部的四个角。
垂直半径或半轴也遵循以上 4 点。

• border-image:定义将图像应用到元素的边框上
  取值：
  1.border-image-source：定义元素边框背景图像，可以是图片路径或使用渐变创建的“背景图像”。
  引入图片地址属性，初始值是none，假如设置了none，那么我们的盒子边框就会应用,写法就是以下
  border-image-source:url(*****.png)
  2.border-image-slice：用以指定从哪 4 个位置分割图像（遵循上右下左的顺序）。

指定边框图像顶部、右侧、底部、左侧内偏移量。没有具体的单位值，比如像px、em统统不能应用在border-image-slice身上，只要给一个单纯的数字即可，也可以按照百分比来设置。作用就是把边框图像切成9个区域：4个角、4边区域和一个中间部位，如不应用fill这个可选属性值的话，那么中间第九块格子被当做透明不见。具体详解请看

border-image-slice.jpg

3.border-image-width：定义元素边框图像的厚度。
该属性用于指定使用多厚的边框来承载被裁剪后的图像。
当该属性省略未定义时，因为默认值是1，所以该属性的计算值会是1 * border-width，相当于会直接使用border-width的定义。

就是代替盒子本身的边框宽度border-width。假如指定，那么边框图片宽度就由border-image-width来做主，假如不指定，那么图片边框宽度就由盒子的边框宽度来固定。border-image-width可以用具体像素、数字（表示几倍）和百分比来表示，最少1个值，最多4个值，分别代表上右下左图片边框宽度，相关代码如下：

.border-image{
            border:20px solid #000;  //盒子边框宽度为20px
            border-image-source:url(border.png); 
            border-image-width:27px 1 10% 27px; //边框图片宽度设置为top:27px,right:1倍,bottom:10%,left:27px，因此这些值将代替20px成为图片边框宽度。
}

4.border-image-outset：定义边框图像从边框边界向外偏移的距离。

border-image-outset的作用就是让边框背景延伸到盒子外。有两个属性值length和number，前者是具体的像素单位，后者是数字，最少1个值，最多4个，分别代表上右下左图片边框向外延伸的距离，相关代码如下：

.border-image{ 
            border:27px solid #000;  //盒子边框宽度为27px
            border-image-source:url(border.png); 
            border-image-outset:27px 27px 27px 27px; //边框图片向设置为27px，那么背景图将会从盒子最外边界向外上右下左各延伸27px。
}

border-image-outset.jpg

5.border-image-repeat：定义分割图像怎样填充边框图像区域。

border-image-repeat作用就让边框背景是否重复，默认值为stretch，是拉伸的意思，4个角4个区域分别做水平和垂直方向的拉伸，来填补边框的间隙；repeat是就是让4个角4个区域做完水平和垂直方向的复制图像，做CTRL+V运动，把边框之间的空隙填满；而round[环绕]是把4个角和4个区域分成均等区域，然后用背景图片切好能铺满整个边框空隙，不能多也不能少，正好合适。

.border-image-stretch{ 
        border:27px solid #000; 
        border-image-source:url(http://img.xiaoho.com/2014/09/border.png);
        border-image-slice:27 27 27 27;
        border-image-repeat:stretch;
}/*拉伸*/
.border-image-repeat{ 
        border:27px solid #000; 
        border-image-source:url(http://img.xiaoho.com/2014/09/border.png);
        border-image-slice:27 27 27 27;
        border-image-repeat:repeat;
}/*重复*/     
.border-image-round{ 
        border:27px solid #000; 
        border-image-source:url(http://img.xiaoho.com/2014/09/border.png);
        border-image-slice:27 27 27 27;
        border-image-repeat:round;
}/*环绕*/

border-image-round.jpg

• background：定义元素的背景特性
  1.background-color：定义元素使用的背景颜色。

在同一组背景定义中，如果背景颜色和背景图像都设置了，那么背景图像会覆盖在背景颜色之上。
如果设置了background-image，同时也建议设置background-color用于当背景图像不可见时保持与文本颜色有一定的对比度。

2.background-image:定义元素使用的背景图像。

取值：
none:无背景图
使用绝对或相对地址指或者创建渐变色来确定图像。

3.background-repeat:定义元素的背景图像如何填充。

取值：
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向平铺
no-repeat：背景图像不平铺
round：当背景图像不能以整数次平铺时，会根据情况缩放图像。当容器大于背景图图像时图像会被拉伸来填满容器
space：当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（CSS3）

background-repeat.jpg

4.background-attachment：定义滚动时背景图像相对于谁固定。

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动
scroll背景图片随页面的其余部分滚动。这是默认
fixed背景图像是固定的

5.background-position:指定背景图像在元素中出现的位置。

百分比：用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。当值为负数的时候图片会类似向容器外跑出去，但跑不出去被剪切了
长度：用长度值指定背景图像在元素中出现的位置。可以为负值。

position-.jpg

center：
背景图像横向或纵向居中。
left：
背景图像从元素左边开始出现。
right：
背景图像从元素右边开始出现。
top：
背景图像从元素顶部开始出现。
bottom：
背景图像从元素底部开始出现。

example:假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px

background: url(test1.jpg) no-repeat right 20px bottom 20px;

要注意的是：设置3个或4个值，偏移量前必须有边界关键字。也就是说，形如：10px bottom 20px，这样的参数设置是错误的，因为10px前面没有关键字。
6.background-origin:指定的背景图像计算background-position时的参考原点(位置)。
取值：
border-box：从border区域（含border）开始显示背景图像。
padding-box：从padding区域（含padding）开始显示背景图像。（默认）
content-box：从content区域开始显示背景图像。

background-origin.jpg

注意，如果设置background-origin后，设置background-position会相对于background-origin设置的位置做参考来偏移背景图，比如设置在border开始显示图片，这是设置background-position：left 10px top 10px是相对于边框进行左边偏移10px上面偏移10px，如果没设置background-origin，默认是相对于padding处进行偏移。

7.background-clip：指定对象的背景图像向外裁剪的区域。
取值：
border-box：从border区域（含border）开始向外裁剪背景。(默认)
padding-box：从padding区域（含padding）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。

background-clip.jpg

8.background-size：定义背景图像的尺寸大小

length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
background-size属性指定背景图片大小