CSS--属性

• CSS--属性

css属性键值对，property：value。主要是一下几类：

• 文字相关属性：控制文字的字体，颜色，修饰，阴影等属性。

font-family  设置字体类型，如"Arial"、"宋体"等
font-size 设置字体大小，常用度量单位pt和px
font-style 设置字体风格，可选值normal, italic和oblique
font-weigh 设置字体“重量”，常用值为normal和bold
font 综合设置上述各种字体属性

• 段落相关属性：控制整个段或者div的显示效果，包括文字的缩进，文字的对齐方式。

text-align  设置文本对齐方式，可选值left,center,right,justify
text-indent 设置首行缩进，其值可采用绝对或相对的长度单位及百分比
line-height 设置行高，其值可采用绝对或相对的长度单位及百分比
letter-spacing  设置字符间距，其值可采用绝对或相对的长度单位
color  设置文字颜色

• 背景相关属性：控制背景色，背景图片等属性。
• 表格相关属性：控制表格的外观。
• 大小相关属性：控制目标对象的长，宽，最小长度，宽度等属性。

在CSS样式表中，长度单位分为两类：

• 位置相关属性：控制目标对象的位置，包括是否悬浮于页面上。这里有必要说下这类相关属性，其实这就是css的定位机制。

文档流
行框：按顺序水平摆放，放不下出现滚动条
块框：按顺序垂直摆放，放不下出现滚动条
1，相对定位，原来在文档流中的位置仍然保留，当前位置是相对于原始位置偏移后的结果。

position: relative;
#pos {
position: relative;
top: 5px;
left: 55px;
}

2，绝对定位     position: absolute;
从文档流中删除其原来的位置，就好像该元素从来都不存在一样。它当前所处的位置如果和其他元素重合则会遮盖住其他元素的显示，这就是 CSS 中层的概念。当前位置的定位有两种情况：
①父容器以及祖先容器未定位：相对于浏览器左上角

#pos {
position: absolute;
top: 0px;
left: 0px;
}

②存在已定位的祖先元素：相对于最接近的已定位的祖先元素

<div> </div>
<div> </div>
<div id="pos"><div id="test">测试</div></div>
<div> </div>
<div> </div>
#pos {
position: absolute;
top: 30px;
left: 100px;
}
#test {
position: absolute;
top: 5px;
left: 20px;
}

3，浮动：脱离文档流，向上浮起一层，所有同一容器内的浮动元素根据 float 属性值按顺序进行排列，例如如果都是 float:left 则按从左向右的顺序排列。也会遮盖住文档流中未浮动的正常元素。

<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
div {
border-style: solid;
border- 1px;
border-color: black;
 50px;
height: 50px;
margin-right: 5px;
float: left;
}

• 边框相关属性：设置目标对象的边框特征，包括颜色，粗细，以及使用的线型。
• 轮廓相关属性：用于让目标对象周围产生一圈光晕，这圈光晕不会占用页面实际的物理布局。通过轮廓相关属性，可设置该光晕的颜色，线宽，线型。

• 块元素和行元素：

HTML元素按其显示方式可分为“块级”（block）元素和“行内”(inline)元素两种：
块级元素： 前后换行、可设定块大小（宽度和高度）、块的定位、块边框、块间距、块内和块边框间空隙等。如body,p,tr,td,div等。
行内元素： 位于当前行中，前后不换行，不单独定位。如span元素。

  <p>一段文字中的<span style=="font-size:20pt; color:red">一部分显示效果有所不同</span>，可以采用span元素来实现</p>

可以使用CSS的display属性设置/修改元素的显示方式，其常用属性取值为：block、inline和none

以上这些属性我们大概知道就OK了，具体的相关属性翻ipa文档就好了，如下图。

• 特别介绍3个常用的属性

1，display，用于设置目标对象是否以及如何显示。该属性的常用值是none，用于设置目标对象隐藏，一旦这个对象隐藏，其占用的页面空间也会释放。如果没有为该属性指定值，目标对象就会显示出来。这个还是比较常用的，一般的我们在页面上控制一部分页面的显示和隐藏，一般都是如下设置；

显示：document.getElementById('id').style.display='' ；
隐藏：document.getElementById('id').style.display='none' ；

2，visibility，用于设置目标对象是否显示。与display不同的是，通过该属性隐藏某个html元素后，该元素占用的页面空间会被依然保留，不会被释放。该属性的2个常用值是：visible和hidden，分别用于控制对象的显示和隐藏。

显示：document.getElementById('id').style.visibility='visible' ；
隐藏：document.getElementById('id').style.visibility='hidden' ；

3，cursor，用于设置目标对象上光标的形状。该属性常用的值auto（自动光标），crosshair（十字线光标），default（客户端光标），hand（手形光标），move（十字箭头光标），help（带问号的帮助光标），text（文本光标），wait（沙漏光标），url（自定义光标）。比如：

<div style="cursor:wait;"></div>