CSS之属性操作

(1)css text 文本

文本颜色：color

颜色属性被用来设置文字的颜色

颜色是通过css最经常的指定：

*十六进制值—如：#FF0000

*一个RGB值---如：RGB(255,0,0)

*颜色的名称---如：red

line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效

text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

font-family: 'Lucida Bright'

font-weight: lighter/bold/border/

font-style: oblique    斜体

text-indent: 150px;      首行缩进150px

letter-spacing: 10px;  字母间距

word-spacing: 20px;  单词间距

text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写

（2）背景属性

background-color

background-image

background-repeat

background-position

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;

（3）边框属性

border-width

border-style (required)

border-color

border-style: solid;

border-color: chartreuse;

border-width: 20px;

（4）列表属性

list-style-type         设置列表项标志的类型。

list-style-image    将图象设置为列表项标志。

list-style-position 设置列表中列表项标志的位置。

list-style          简写属性。用于把所有用于列表的属性设置于一个声明中

（5）dispalay属性

none

父子综合显示：（使用悬浮hover方法）

当父类悬浮式，子类不显示

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

注意：

与visibility:hidden的区别：

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

block

内联不能设置长宽

（6）Inline

设定为内联

inline-block

既有内联不单独占用一行，也有块级设置长宽的属性

inline-block可做列表布局

（7）外边距（margine）和内边距（padding）

margine（外边距）：用于控制元素与元素之间的距离；margine的基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

margine-top:上边距

margine-bottom:下边距

margine-right:右边距

margine-left:左边距

margin:10px 20px 20px 10px；

上边距为10px

右边距为20px

下边距为20px

左边距为10px

margin:10px 20px 10px;

上边距为10px

左右边距为20px

下边距为10px

margin:10px 20px;

上下边距为10px

左右边距为20px

margin:25px;

所有的4个边距都是25px

居中应用：

margin: 0 auto

padding（内边距）:用于控制内容与边框之间的距离；

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

设置为margine;

border(边框)：围绕在内边距和内容外的边框；

content（内容）：盒子的内容，显示文本和图像。

（8）float属性

浮动元素会判断上一个元素是否浮动，如果浮动，紧贴；否则，与上一个元素保持垂直距离

block元素和inline元素在文档流中的排列方式

block元素通常被现实为独立一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。Block元素可以设置width,height,margine,padding属性；

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。Inline元素设置width,height属性无效

所谓的文档流：指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流：也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

清除浮动

clear语法：

clear:none|left|right|both

取值：

none:默认值。允许两边都可以有浮动对象

left:不允许左边有浮动对象

right: 不允许右边有浮动对象

both:不允许有浮动对象

需要注意的是：clear属性只会对自身起作用，不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear:right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。

（9）position(定位属性)精确定位使用

static:默认值 按照正常文档流定位

relative:1.参照物是元素之前文档流中的位置

2.元素不脱离文档流（之前的空间位置仍然存在）

absolute:1.参照物是已定位的父元素

2.元素脱离文档流

小结：

父元素：position:relative

子元素：position：absolute

脱离文档流：flat  position：absolute      fixed