css之属性部分
这篇写的是今天的学习到的属性，一共20个。
属性再多，但也要会使用，会在使用时可以记起它，才能起到它为我们所需要的作用。
样式属性
1、border
CSS边框属性允许你指定一个元素边框的样式和颜色。
边框样式border-style
属性用来定义边框的样式
none: 默认无边框
dotted: dotted:定义一个点线框
dashed: 定义一个虚线框
solid: 定义实线边界
double: 定义两个边界。 两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界。效果取决于边界的颜色值
ridge: 定义3D脊边界。效果取决于边界的颜色值
inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
outset: 定义一个3D突出边框。 效果取决于边界的颜色值
例子：
border-style: solid;
边框宽度 border-width
border-width:5px;
边框颜色border-color
可以设置的颜色：
- name - 指定颜色的名称，如 "red"
- RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
- Hex - 指定16进制值, 如 "#ff0000"
您还可以设置边框的颜色为"transparent"。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
border-color:#98bf21;
边框-单独设置各边
例子：
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
边框-简写属性
border:5px solid red;
border-radius
向元素添加圆角边框。
半圆例子：
div{ width: 50px; height: 100px; border-radius: 50px 0 0 50px; background: red; } <div></div>
四个半径值分别是左上角、右上角、右下角和左下角，顺时针
置每个角的垂直半径和水平半径,用斜杠隔开，第一个参数表示左上角开始顺时针的水平半径，第二个参数表示左上角开始顺时针的垂直半径
这个圆角使盒模型丰富起来，之前只有矩形这个形状，现在多了有弧度的形状。
border-image
边框样式使用图像来填充。
border-image:url(图片地址);
box-shadow
向盒子添加阴影
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
line-height
控制段落内每行高度
line-height:25px;
行高之所以会居中，是因为它有自己计算方式，首先它会获取font-size的大小，然后使用里line-height减去font-size
（line-height - font-size）得到值除以一半分配到字体的上和下，来实现居中，不过line-height小于font-size是不会
影响到字体的大小的。
text-indent
控制段落的首行缩进
p { text-indent:2em;}
text-align
控制段落对齐方式，不但是文本，对象中的其它inline或inline-block元素也能够被text- align进行对齐方式的设置。
text-align : left | right | center | justify
p { text-align:center;}
letter-spacing
控制段落的文字间的距离
p { letter-spacing:5px;}
text-overflow
控制文字内容溢出部分的样式
text-overflow：clip | ellipsis
clip 当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis 当内联内容溢出块容器时，将溢出部分替换为（...）。
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，
还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），
只有这样才能实现溢出文本显示省略号的效果。
white-space
规定段落中的文本不进行换行
white-space 属性设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
例子：
div,input{
overflow: hidden; /*条件1：超出部分隐藏*/
white-space: nowrap;/*条件2：强制在同一行内显示所有文本*/
text-overflow: ellipsis;/*超出部分显示。。。*/
}
word-wrap
控制内容超过容器的边界时是否断行
normal 允许内容顶开或溢出指定的容器边界。
break-word 内容将在边界内换行。如果需要，单词内部允许断行。
word-wrap: break-word;
background-color
背景颜色
background-color : transparent | color
body { background-color:#CCCCCC;}
RGBA
color：rgba(R,G,B,A)以上R、G、B三个参数，正整数值的取值范围为：0 - 255。
百分数值的 取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。
并非所有浏览 器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。
border-color:rgba(255 , 0 , 0 , .7);
linear-gradient
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，
这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经
得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从
左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参
数，表示多种颜色的渐变。
background-image:linear-gradient(to left, red 30%,blue);
background-image
背景图片
background-image : none | url ( url )
body { background-image:url(images/bg.gif);}
background-repeat
背景平铺方式
background-repeat : repeat | no-repeat | repeat-x | repeat-y
body { background-repeat:repeat-x;}
background-position
背景定位
background-position : 左对齐方式 上对齐方式
body { background-position:left bottom;}
背景样式缩写
background: 背景色 背景图片 背景平铺方式 背景定位
body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}
知识扩展：
w3c 里有外边距的合并
http://www.w3school.com.cn/css/css_margin_collapsing.asp
标准流就是指在不使用其他的与排列和定位相关的特殊css规则时，各种元素的排列规则。
行内元素和块级元素在DOM树中都是一个节点。从DOM的角度来看，块级元素和行内元素
是没有区别的，都是树上的一个节点；而从css的角度，二者有很大的区别，块级元素拥有
自己的区域，行内元素则没有。
再继续昨天margin为负值的问题：
效果图：
代码：
#div1{ width: 50px; height: 100px; border:2px solid #000; } .div2{ width: 30px; height: 30px; border: 2px solid #333; margin-left:-10px; } <div id="div1"> <div class="div2"></div> </div>
从代码可以看去它们是父子，但子级就是出了父级的范围，在我们印象中应该只有position这个
属性可以做到这样，但margin也能做到，这个就和上篇写公式有关，因为在数学上它是合理的，
所以它不算违规。
