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也能做到，这个就和上篇写公式有关，因为在数学上它是合理的，

所以它不算违规。