css样式小总结 （新手必备）

css样式表

一般优先级从低到高

1. 用户代理样式
2. 继承样式
3. 外部样式表
4. 内部样式表
5. 属性样式
6. ！important

基础属性

1. color
   文字颜色
2. background-color
   背景颜色
3. margin
   外边距 一个参数代表上下左右 两个参数以此是上下，左右 三个参数代表上，左右，下 四个参数代表上，右 ，下，左
4. padding
   内补 参数同上
5. border
   边框
   border-style
   样式
   border-width
   宽度
   border-color
   颜色
6. border-radius
   圆角 正方形设为50%是圆形
7. text-decoration：none
   取消下划线
8. text_align
   文本居中
9. font-size
   文本大小
10. font-weight
    文本粗细（不带单位）
11. width
    宽度
12. height
    高度
13. line-height
    行高 line-height=height 文本垂直居中
14. list-style
    排列符号样式
15. display
    显示框类型
16. cursor
    鼠标样式
17. vertical-align
    单元格对其方式
18. white-space
    nowrap 不换行
19. over-flow
    hidden 隐藏
20. text-overflow
    ellipsis 超出部分显示…
21. clear
    left 清除左浮动
    right 清除右浮动
    both 全部清除
22. float
    left 左浮动
    right 右浮动
23. outline
    轮廓
24. box-sizing
    content-box 默认值
    border-box 宽度=给予值减去2padding+2margin+2*border

背景样式 background

1. background-color
   定义标签的背景颜色
2. background-image
   定义背景图片,可定义多背景
3. background-repeat
   repeat
   图片重复
   repeat-x
   图片横向重复
   repeat-y
   图片纵向重复
   no-repeat
   图片不重复
4. background-position
   上下左右 左上…（英文）
   centent
   两个参数 控制x y
5. background-size
   100% 水平方向铺满
   contain 长边铺满
   cover 短边铺满
6. background-origin
   content-box 图片出现在width height内部
   border-box 背景图出现在border内部
   padding-box 背景图出现在padding内部 默认
7. background-attachment
   fixed
   图片的固定与滚动 切换到其他图片之前视口滚动图片不懂 之后改变

文本样式 text

1. text-transform
   capitalize
   首字母大写
   uppercase
   全大写
   lowercase
   全小写
2. word-spacing
   单词间距
3. letter-spacing
   字母间距
4. lin-height
   垂直间距
5. text-decoration
   none
   去除下划线
   lin-throuth
   删除线
   overline
   上划线
   underline
   下划线
6. text-indent
   文本缩进 同&emsp span不能缩进
7. tex-align
   center
   文本居中
   right
   文本居右
8. verticle-align：middle
   垂直居中对齐

字体样式 font

1. font-family
   字体 多个字体使用逗号隔开 前面的不能用用后面的 有空格的要加引号
2. font-size
   字体大小 单位为px em 1em=16px
3. font-style：italic
   控制斜体
4. font-weight
   控制粗细 400等于normal 700等于bold

列表样式 list

1. list-style-type
   列表样式类型(不区分有序无序)
2. list-style-position
   列表样式位置 outside（默认） / inside
3. list-style-image
   列表样式图片

定位 position

1. 静态定位：static
   什么都不管 文档流默认赋予的位置（从左到右 从上到下）
2. 相对定位：relative
   相对于静态定位发生偏移 占用文档流位置 原本的位置禁用
3. 绝对定位：absolute
   相对于外层第一个非static定位 如果外层一直是静态 直接以body为父元素
4. 固定定位：fixed
   固定在浏览器窗口 不随滚动条的移动而改变
5. 粘性定位：sticky
   没有达到粘性定位 相当于静态定位 达到粘性位置 相当于固定定位
6. z-index
   谁的值大 谁在上面 没有单位
   用top botto right left 调整