CSS常用知识总结

CSS常用知识总结_第1张图片

选择器

  • 简单选择器
  • class选择器
  • ID选择器
  • 标签/元素选择器
  • 属性选择器
  • 伪类 :hover :nth-child
  • 复合选择器
  • 关系选择器
    • 父子选择器
    • 后代选择器
  • 组合选择器

属性

1. 样式

  • 字体
常用属性名 含义 常用属性值
font-family 字体 "微软雅黑" "Microsoft YaHei"
font-size 大小 12px
font-style 风格 italic
font-weight 粗细 bold
  • 文字
常用属性名 含义 常用属性值
color 颜色 十六进制值
line-height 行高 -
text-align 对齐 center right left
text-decoration 修饰 underline none
text-indent 缩进 1em等于1个字符的宽度
white-space 空白处理 nowrap
  • 背景
常用属性名 含义 常用属性值
background-color 背景颜色 十六进制颜色值
background-image:url(图片地址) 背景图 -
background-position 位置 -
background-repeat 重复 repeat repeat-x repeat-y no-repeat
background-attachment 关联 fixed
  • 列表
常用属性名 含义 常用属性值
list-style-type 类型 none disc circle square
list-style-image:url(图片地址) 图片作为列表项 -
  • 表格
常用属性 含义
border-collapse:collapse; 边框合并
border-collapse:separate; 边框分开
border-spacing 单元边框间距 与相似。
caption-side:bottom;
相似。
  • 轮廓
    轮廓与边框相似,但在边框外边,紧贴着边框。

2. 盒模型

  • 边框
常用属性名 含义 常用属性值
border-color 边框颜色 十六进制颜色值
border-style 边框风格 solid dotted
border-width 边框宽度 -
border 简写 -
  • 外边距margin
  • 内边距padding
  • 宽高width height

3. 定位

  • 绝对position:absolute;
  • 相对position:relative;
  • 固定position:fixed
  • 浮动float:right float:left

最佳实践
top right left bottom z-index不能单独使用,必须设置positionabsolute\relative\fixed

你可能感兴趣的:(CSS常用知识总结)