一、文本属性
行高 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;
}