CSS新手入门笔记整理：CSS常用属性表

字体样式

属性	属性值	说明
font-family	微软雅黑/苹方	字体类型
font-size	数值	字体大小
font-weight	数值/关键字	字体粗细（字重）
font-style	normal（正常(默认值)） italic（斜体） oblique（斜体）	字体风格
color	色值	字体颜色

文本样式

属性	属性值	说明
text-indent	数值/2em	首行缩进
text-align	left(左对齐(默认值)) center(居中对齐) right(右对齐) justify(两端对齐)	水平对齐
text-decoration	none（去除所有的划线效果(默认值)) underline（下划线） line-through（中划线） overline（顶划线）	文本修饰
text-transform	none（无转换 (默认值)) uppercase（转换为大写） lowercase（转换为小写） capitalize（只将每个英文单词首字母转换为大写）	大小写转换
line-height	数值	行高
letter-spacing	数值	字间距
word-spacing	数值	词间距(只针对英文单词)
vertical-align	top（顶部对齐） middle（中部对齐） baseline（基线对齐） bottom（底部对齐）	垂直对齐

---

边框样式

属性	属性值	说明
border	宽度值 样式 颜色值	边框的整体样式
border-width	数值	边框的宽度
border-style	none（无样式） dashed（虚线） solid（实线）	边框的外观
border-color	颜色名称 色值 transparent（透明）	边框的颜色
border-radius	数值	边框圆角

列表样式

属性	属性值	说明
list-style-type	none（去除列表项符号）	列表项符号
list-style-image	url(图片路径)	列表项图片

---

表格样式

属性	属性值	说明
caption-side	top（标题在顶部(默认值)） bottom（标题在底部）	标题位置
border-collapse	separate（边框分开，有空隙(默认值)） collapse（边框合并，无空隙）	边框合并
border-spacing	数值	边框间距

---

图片样式

属性	属性值	说明
width	数值	宽度
height	数值	高度
border	数值	边框
text-align	left（左对齐(默认值)） center（居中对齐） right（右对齐）	水平对齐
vertical-align	top（顶部对齐） middle（中部对齐） baseline（基线对齐） bottom（底部对齐）	垂直对齐
float	left（元素向左浮动） right（元素向右浮动）	文字环绕方式

背景样式

属性	属性值	说明
background-color	色值	背景颜色
background-image	url(图片路径)	背景图片地址
background-repeat	repeat（在水平方向和垂直方向上同时平铺） repeat-x（只在水平方向(x轴)上平铺） repeat-y（只在垂直方向(y轴)上平铺） no-repeat（不平铺）	背景图片平铺方式
background-position	像素值/关键字;	背景图片位置
background-attachment	scroll（随元素一起滚动） fixed（固定不动）	背景图片固定

---

超链接样式

属性	说明
a:link0	超链接“未访问”的样式
a:visited	超链接“访问后”的样式
a:hover	鼠标“经过”超链接的样式
a:active	鼠标“单击”超链接时的样式
cursor	鼠标外观

---

盒子模型

属性	属性值	说明
width	数值	宽度
height	数值	高度
border	数值	边框
margin	数值	外边距
padding	数值	内边距

浮动布局

属性	属性值	说明
float	left	左浮动
	right	右浮动
clear	both	清除浮动

定位布局

属性	属性值	说明
position	fixed	固定定位
	relative	相对定位
	absolute	绝对定位
	static	静态定位

溢出声名

属性	属性值	说明
overflow	visible	若内容溢出，则溢出内容可见（默认值）
	hidden	若内容溢出，则溢出内容隐藏
	scroll	若内容溢出，则显示滚动条
	auto	auto 跟 scroll 很相似，不同的是 auto 值在盒子需要的时候会给它一个滚动条

元素类型转换

	属性值	说明
display	inline	行内元素
	block	块元素
	inline-block	行内块元素
	table	以表格形式显示，类似于 table 元素
	table-row	以表格行形式显示，类似于 tr 元素
	table-cell	以表格单元格形式显示，类似于 td 元素
	none	隐藏元素

---