CSS基础
CSS
一、文本处理
（1）font- 文字样式
font-size 文字大小
font-family 字体
font-weight 加粗 bold/normal/value
font-style 斜体 normal/italic
font-variant 小型大写字母 small-caps
（2）text- 文本格式
color 文字颜色
text-align 水平对齐 内容的水平对齐方式
text-indent 首行缩进
text-decoration 文字修饰 none/underline
（3）line-height 行高
多行文本：行高可以设置行间距
单行文本：当行高等于容器高时，文字垂直居中
（4）text-shadow 文本阴影
text-shadow:h-shadow v-shadow blur color
（5）white-space文本溢出：
white-space nowrap/normal
（6）text-overflow
当文字水平方向有溢出，且overflow为hidden时
clip：隐藏溢出内容；
ellipsis：在句子末尾加...
（7）word-wrap长单词换行：
word-wrap: normal/break-word
word-break:break-all/keep-all/normal
二、表格样式:
（1）通用样式: width height border padding ……
vertical-align 垂直对齐
（2）专用样式：
border-collapse 边框合并 collapse/separate
border-spacing 单元格边框间距
table-layout fixed表示固定布局，宽度不再变化
caption-side 表头位置 top/bottom
三．框模型（一切皆为框）
width、height（内联元素没有宽高）
border
padding 内边距 会撑开框
0、正值
margin 外边距 框与框之间的距离
0、正值、负值、auto
左右margin为auto，框居中对齐
当上下margin相遇时，取较大值
四、背景属性：
background-color 背景色
可取值范围为所有合法的颜色值。可为transparent
background-image 背景图
定义背景图像的路径。可以为none
background-repeat 背景图重复
repeat（默认）、no-repeat、repeat-x、repeat-y
background-attachment 背景固定
fixed 背景图不随着内容一起滚动
background-position 背景偏移
background-position:x-position y-position;
x可取值：left、right、center、正值、负值
正值背景图向右移动，负值背景图向左移动
y可取值：top、bottom、center、正值、负值
正值背景图向下移动，负值背景图向上移动
CSS sprites CSS精灵
* background-size 背景图尺寸
* background-clip 背景颜色的绘制区域
可取值：border-box padding-box content-box
* background-origin 背景图绘制区域
可取值：border-box padding-box content-box
背景属性可简写：
background:url(images/welcome.png) no-repeat
fixed -40px -15px #ff0;
background:image repeat attachment position color;
五、渐变：颜色发生平滑的过渡效果
线性、径向、重复
background-image:linear-gradient(90deg,red 10%,black 15%,green 40%)
radial-gradient(size at position,color1,color2,...)
200px at left top
repeating-linear-gradient(90deg,red 0%,black 5%,green 10%)
repeating-radial-gradient
六、浮动
元素默认情况下是普通流定位：
块元素独占一行，从上到下排列
行内元素在同一行里从左到右排列。
（1）float:left/right
元素会在父容器的范围内浮动，left已浮动元素会从左到右依次排列；right已浮动元素会从右向左依次排列
（2）clear：清除浮动影响。定义元素的哪一侧没有浮动元素
clear:left/right/both
（3）overflow:hidden
父元素内的子元素如果浮动，父元素会没有高度。
加了overflow:hidden之后，父元素就可以自适应高度了。
七、display 显示方式
none 不显示
block 显示为块元素
inline 显示为行内元素
inline-block 行内块
可以让块元素与行内元素互相转换。
八、 visibility 可见性
hidden/visible
九、 opacity 半透明
取值范围：0-1
十、列表
list-style- ……
type 列表编号样式
image 用图片代替列表编号
position 列表编号位置
list-style: image position 简写。
常用：list-style:none;
十一、vertical-align
1、middle 元素垂直居中
2、top和bottom可能与想象中不同，以实际效果为准
行内块设置margin-top会影响到整行
十二、定位：
（1）static 默认普通流定位
（2）relative 相对定位。
只定义relative，元素不会发生改变
用left/right/top/bottom可以让元素相对于原来的位置偏移
（3）absolute 绝对定位
绝对定位的元素会跳出普通流，内容会与其它元素重叠。
定义偏移时，绝对定位的元素是相对已定位的父元素发生偏移。如果父元素未定位，会向上找上一级父元素。如果没有已定位的父元素，相对于body偏移。
（4）fixed 固定定位
元素相对于浏览器框进行定位，页面滚动时，框的位置固定不变
（5） z-index 元素上下层叠顺序
z-index可以为负值，也可以为正值。
只有已定位的元素才能使用z-index调整层叠顺序
z-index越大，元素越靠上。
