CSS样式（属性二）

一、文本属性

行高 line-height

• line-height:50px;

• 可以将父元素的高度撑起来

• normal（正常）一般为1到1.2

• inherit 元素中行的高度

• 单位：px,pd,em,%,纯数字

• 用PX等定义字符间的固定空间（允许使用负值)

文本水平对齐方式 text-align

• left 左对齐  默认

• center 文字居中

• right 右对齐

• justify 实现两端对齐文本效果

文本所在行高的垂直对齐方式 vertical-align

• baseline 默认

• sub 垂直对齐文本的下标，和 <sub> 标签一样的效果

• super 垂直对齐文本的上标，和 <sup> 标签一样的效果

• top 对象的顶端与所在容器的顶端对齐

• text-top 对象的顶端与所在行文字顶端对齐

• middle 元素对象基于基线垂直对齐

• bottom 对象的底端与所在行的文字底部对齐

• text-bottom 对象的底端与所在行文字的底端对齐

文本缩进 text-indent

• text-indent:2em; 首行缩进2字符

• 通常用在段落开始位置的首行缩进

• length：%（可使用负值）

字母之间的间距 letter-spacing

单词之间间距 word-spacing

文本的大小写 text-transform

• capitalize 文本中的每个单词以大写字母开头

• uppercase 定义仅有大写字母

• lowercase 定义仅有小写字母

• none  默认，不转换

文本的装饰 text-decoration

• none 默认

• underline 下划线

• overline 上划线

• line-through 中线

• double underline  双划线

• dashed underline  虚线

• blink 闪烁

自动换行 word-wrap

• word-wrap: break-word;

设置文本方向/书写方向 direction

• ltr 从左到右 默认

• rtl 从右到左

<p style="direction:rtl;">文本方向为右边</p>

文本阴影效果 text-shadow 

• h-shadow： 设置水平阴影的位置（x轴方向），必需要设置的参数；允许负值

• v-shadow ： 设置垂直阴影的位置（y轴方向），必需要设置的参数，允许负值

• blur： 阴影模糊的距离（半径大小），可选择设置的参数

• color: 阴影的颜色，可选择设置的参数

white-space：规定如何处理元素中的空白

•normal（规定段落中的文本不进行换行）

•pre(保留空白、保留换行符、不允许自动换行)

•nowrap(合并空白、忽略换行符、不允许自动换行)

•pre-wrap（保留空白、保留换行符、允许自动换行）

•pre-line（合并空白、保留换行符、允许自动换行）

二、基本样式

宽度 width

• width:200px;

• 定义元素的宽度

•max-width 最大宽度

•min-width 最小宽度

高度 height

• height:300px

•max-height 最大高度

•min-height 最小高度

• 元素默认没有高度

• 需要设置高度

• 可以不定义高度，让元素的内容将元素撑高

鼠标样式 cursor

• 定义鼠标的样式 cursor:pointer

– default 默认

– pointer 小手形状

– move 移动形状

透明度 opacity

• opacity:0.3

• 透明度的值可以使 0~1之间的数字，0代表透明，1代表完全不透明

• 透明的元素，只是看不到了，但是还占据着文档流

可见性 visibility

• visibility:hidden;

• visible 元素可见

• hidden 元素不可见

• collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

溢出隐藏 overflow

• 设置当对象的内容超过其指定高度及宽度时如何显示内容

• visible 默认值，内容不会被修剪，会呈现在元素框之外。

• hidden 内容会被修剪，并且其余内容是不可见的（溢出隐藏）。

• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（一直显示滚动条）。

• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容（自动添加滚动条）。

边框颜色 outline

• input文本输入框自带边框，且样式丑陋，我们可以通过 outline修改边框

• outline:1px solid #ccc ;

• outline:none 清除边框

outline：在一个声明中设置所有的轮廓属性

outline-color、outline-style、outline-width、inherit

outline-color：设置轮廓的颜色

•color-name、hex-number、rgb-number、invert、inherit

outline-style：设置轮廓的样式

outline-width：设置轮廓的宽度

•Thin、medium、thick、length、inherit

三、 定位 position

position：static；默认值

position：absolute；绝对定位

position：fixed；固定定位

position：relative；相对定位

•bottom:设置定位元素下外边距边界与其包含块下边界之间的偏移

•top:设置定位元素上外边距边界与其包含块上边之间的偏移

•left:设置定位元素左外边距边界与其包含块左边界之间的偏移

•right:设置定位元素右外边距边界与其包含块右边之间的偏移

•clear:规定元素的哪一侧不允许其他浮动元素

•display:规定元素应该生成的框的类型

•float:规定框是否应该浮动

•overflow:规定当内容溢出元素框时发生的事情

•position:规定元素定位类型

•z-index:设置元素的堆叠顺序　　z-index值默认为0，值越大层越靠上，没有最大值也没有最小值。

四、样式重置

早期的网页没有 css 样式，为了界面美观，很多元素自带 margin、padding 等样式，但这些样式

在不同浏览器解析的值都不一样，需要将 css 样式重置，保证在不同浏览器显示一致。

• 清除元素的 margin 和 padding

• 去掉自带的列表符

• 去掉自带的下划线

*{ margin:0; padding:0; } /* 清除页面所有标签自带的外间距和内填充 */
ul,ol{ list-style:none; } /* 去掉自带的列表符 */
a{ text-decoration:none;} /* 去掉自带的下划线 */
img,input{ border:none;}/* 清除 IE 下自带的边框 */

五、浮动 float

浮动原理

• 浮动使元素脱离文档普通流，漂浮在普通流之上的。

• 浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮

动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。

• 浮动会产生块级框（相当于设置了 display:block），而不管该元素本身是什么。

清除浮动带来的影响

• clear 清除浮动：

        – none : 不清除（默认值）
        – left : 不允许左边有浮动对象
        – right : 不允许右边有浮动对象
        – both : 不允许两边有浮动对象

• 利用伪类实现清除浮动

.clearFix{
content="";
display:block;
width:0;
height:0;
clear:both;
}