css -- 宽高，字体，颜色，边框，文本，光标，伪类

font-size

字体大小
浏览器默认字体大小16px
浏览器设置字体的时候设置的是高度 宽度自动缩放
12 14 16 用的最多

font-weight

字体粗细
lighter 细体
normal 默认粗细
bold 粗体
bolder 特粗

font-style

字体样式
italic 斜体
oblique 倾斜 使某些没有斜体的字体倾斜
normal 正常

font-family

arial 通用字体
可设置多个，第一个不配陪则去寻找第二个，有空格的字体标识或者中文的字体标识要加引号，其他科不加

font

各个位置表示
font-style font-weight font-size/line-heigth font-family

color

字体颜色
transparent 透明
英文单词颜色设置
十六进制颜色值 #xxxxxx
rgb(,) 三原色 0-255

min-width

最小宽度
min-width:500px
宽度小于500px 后产生滚动条

max-width

最大宽度

min-height

最小高度
min-height 高度的最小值 超出会被文本撑开

max-height

最大高度
max-height 高度的最大值 超出文本会溢出

overflow

hidden 溢出部分隐藏
scroll 溢出部分隐藏 生成滚动条
auto 溢出自动显示滚动条

border

三个可设置的分别为
边框宽度 边框样式 边框颜色
border-top
border-right
border-bottom
border-left

可以分别设置边框的 大小 样式 颜色
border-width
一个值 上下左右
两个值 1.上下 2.左右
三个值 1.上 2.左右 3.下
四个值 1.上 2.右 3.下 4.左
border-style
solid double …
border-color

颜色也可以分别每个方向设置
border-top-color
border-right-color
border-bottom-color
border-left-color

border:1px solid red;

设置三角形
先设置四周的颜色为透明 然后给想要显示三角形的那个方向 设置颜色

.box{
	wodth:0;
	height:0;
	border-width:100px;
	border-style:solid;
	border-color:transparent;
	border-left-color:orange;
}

text-align

文本对齐方式
对齐必须是对于一个具有宽高的容器内部对齐
center 居中
left 居左
right 居右

line-height

行高
当line-height = height 居中在区域内

text-indent

文本缩进
绝对单位: 在任何环境 且环境变化不会导致实际量的变化的单位
相对单位: 在任何环境 且环境变化会导致实际量的变化的单位
em :相对于浏览器默认字体大小的倍数 默认1em = 16px

text-decoration

文本下划线
underline 下横线线
line-through 中横线
overline 上横线
none 取消下划线

cursor

鼠标移入样式
pointer 手式符号
not-allowed 禁止符号

单行文本省略和显示省略号

1.取消换行
2.隐藏溢出
3.显示省略号

div{
	white-space:no-wrap;
	overflow-x:hidden;
	text-overflow:ellipsis;
}

display

block 块级
inline-block 内联块级

a标签变成一个按钮

a{
	dispaly:inline-block;
	width:200px;
	height:40px;
	line-height:40px;
	color:#fff;
	text-align:center;
	text-decoration:none;
	background-color:#5bc0de;
	border-color:#46b8da;
	border-style:solid;
}

:hover

伪类选择器
鼠标移入的样式

:disabled

伪类选择器
禁用的样式

:focus

焦点聚集的样式

display:none 与 visibility:none

display:none 不保留该元素在文档所占据的空间
visibility:hidden 保留被隐藏的元素所占据的html文档空间

opacity

透明度
0-1 值越大透明度越低 值越大透明度越高

+ 选择器

1.同父级 2.相邻 3.在其后

border-radius

边框半径

:first-child :last-child

第一个与最后一个孩子元素

:nth-child()

第几个元素
odd 奇数
even 偶数

vertical-align

解决行内块与行内元素文本垂直对齐的方式
middle 中间
top 最上
bottom 最下
像素值

容器内的多行文本居中的方法

1. 将容器的display设置为table
2. 将容器内的文本的display设置为table-ceil
3. 将容器内的文本的vertical-align设置为middle

div{
	display:table;
	width:100px;
	height:100px;
	border:1px solid #000;
}
span{
	display:table-ceil;
	vertical-align:middle;
}