CSS样式学习（二）
（一）元素类型
1）块级元素
常见的块级元素有div,p,h{n},ul,ol,li等。
特点：
- 块级元素独占一行或多整行。
- 总是从新行开始。
- 宽度默认是父级标签容器的宽度。
- 可以设置高度宽度以及内外边距。
- 可以嵌套其他块级元素或行内元素。
2）行内元素
常见的行内元素有span,a,strong,em,del,ins
特点：
- 可以和其他行内元素在同一行。
- 行内元素不能设置宽高，但可以设置水平方向上的margin和padding。
- 宽度是内容本身占据的宽度。
- 可以嵌套其他行内元素（文字块标签如h1里面不能放其他块级元素，a标签里面不能放a标签）。
3）行内块元素
常见的行内块元素img,input,td
特点：
- 可以和其他元素在一行上，但两个元素之间会有空白缝隙。
- 可以设置宽高和内外边距，但无法去掉空白。
- 默认宽度是内容本身
4）互相转换
- 转成行内元素 display:inline
- 转成块级元素 display:block
- 转存行内块元素 display:inline-block
（二）CSS背景
- background-image:url() 通过图片地址设置背景图片
- background-color: 设置背景为纯色
- background-repeat: repeat-x（横向平铺）,repeat-y（纵向平铺）,no-repeat（不重复），repeat（默认，向横向和纵向都平铺）。
- background-position : [top | bottom | px值] [left | center | right | px值]
- background-attachment: [fixed | scroll] fixed就是固定在那，scroll会随着滚动条滚动。
- 一个统写的语法：background: color url repeat attachment position
- background-size : [cover | contain | px值]
- cover是将背景根据标签容器宽高拉伸
- contain是将背景根据图片原本尺寸显示，若大小不够，无法显示的部分会隐藏
（三）text-shadow 文字阴影
<style>
body {
background-color: #ccc;
}
div {
color:#ccc;
font: 700 80px "微软雅黑";
}
div:first-child {
/* text-shadow：水平位置 垂直位置 模糊距离 阴影颜色; */
text-shadow: 1px 1px 1px #000 ,-1px -1px 1px #fff;
}
div:last-child {
/* text-shadow：水平位置 垂直位置 模糊距离 阴影颜色; */
text-shadow: -1px -1px 1px #000 ,1px 1px 1px #fff ;
}
</style>
实现效果：
(四) text-decoration 文字装饰
text-decoration:[underline | none | overline | line-through ]
<style>
/* 样式为空 */
a:nth-child(1){
text-decoration: none;
}
/* 下划线 a标签的默认样式 */
a:nth-child(2){
text-decoration: underline;
}
/* 上横线 */
a:nth-child(3){
text-decoration: overline;
}
/* 删除线 */
a:nth-child(4){
text-decoration: line-through;
}
</style>
实现效果：
（五）display 显示
- display :none | block
- visibility :visible | hidden 可见性
display和visibility都可以隐藏元素，区别是visibility隐藏后原位置仍会占据空间。
（六）鼠标样式cursor
cursor : default 小白 | pointer 小手 | move 移动 | text 文本
设置了这个样式之后，鼠标经过会显示不同的效果。
