CSS

这是一篇关于CSS的思维导图，包括：定位、引入方式、基础选择器、字体和文本样式、清除浮动、浮动标准流。

css

• 定位
  • 相对定位
    • position：relative；
  • 绝对定位
    • position：absolute；
  • 固定定位
    • position：fixed；
  • 装饰
    • 垂直对齐方式
      • vertical-align
        • baseline（默认、基线对齐）
        • top（顶部对齐）
        • middle（中部对齐）
        • bottom（底部对齐）
    • 光标类型
      • cursor
        • default（默认、箭头）
        • pointer（小手效果，提示用户可以点击）
        • text（工字型，提示用户可以选择文字）
        • move（十字光标，提示用户可以移动）
    • 边框圆角
      • border-radius
    • overflow溢出部分显示效果
      • visible（默认值，溢出部分可见）
      • hidden（溢出部分隐藏）
      • scroll（无论是否溢出，都显示滚动条）
      • auto（根据是否溢出，自动显示或隐藏滚动条）
    • 元素本身隐藏
      • opacity：0~1；
• 引入方式
  • 内嵌式
    • css写在style标签中
  • 外联式
    • css写在一个单独的.css文件中（通过link标签在网页中引入）
  • 行内式
    • css写在标签的style属性中
• 基础选择器
  • 标签选择器
    • 标签名{css属性名：属性值；}
  • 类选择器
    • .类名{css属性名：属性值；}
  • id选择器
    • #id属性值{css属性名：属性值；}
  • 通配符选择器
    • *{css属性名：属性值；}
• 字体和文本样式
  • 字体样式
    • 1. 字体大小
      • font-size
    • 2. 字体粗细
      • font-weight
    • 3. 字体样式
      • font-style
    • 4. 字体类型
      • font-family
    • 5. 字体类型
      • font属性连写
  • 文本样式
    • 1. 文本缩进
      • text-indent
        • em（一个字大小）
    • 2. 文本水平对齐方式
      • text-align：
        • left（左对齐）
        • right（右对齐）
        • center（居中对齐）
    • 3. 文本修饰
      • text-decoration：
        • underline（下划线）
        • line-through（删除线）
        • overline（上划线）
        • none（无装饰线）
  • line-height行高
  • margin：0 auto；（标签居中）
• 清除浮动
  • 直接设置父元素高度
  • 额外标签法
    • .clearfix {clear：both;}
  • 单伪元素清除法
    • .clearfix::after {content：' '；display：block；clear：both；}
  • 双伪元素清除法
    • .clearfix::after {content：' '；display：table；display：table；}
    • .clearfix::after {content：' '；display：table；clear：both；}
  • overflow：hidden
• 浮动
  • 作用
    • 网页布局
  • 代码
    • float: left;
    • float: right;
  • 特点
    • 浮动元素会脱离标准流，在标准流中不占位置
    • 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
    • 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
    • 浮动元素有特殊的显示效果
      • 一行可以显示多个
      • 可以设置宽高
• 标准流
  • 块级元素：从上往下，垂直布局，独占一行
  • 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行
• 伪元素
  • : :before
  • : :after
  • ***伪元素默认是行内元素；必须设置content属性才能生效
• 结构伪类选择器
  • 基本用法
    • first-child{ }（选中第一个）
    • last-child{ }（最后一个）
    • nth-child(n){ }（任意一个）
    • nth-last-child(n){ }（倒数第n个）
  • 公式
    • 2n、even（偶数）
    • 2n+1、2n-1、odd（奇数）
    • -n+5（找到前5个）
    • n+5（找到从第5个往后）
• 盒子模型
  • 边框（border）
    • 实线（solid）
    • 虚线（dashed）
    • 点线（dotted）
    • border：粗细 线条样式 颜色
  • 内边距（padding）
  • 外边距（margin）
  • margin:0; padding:0;（清除默认内外边距）
  • list-style:none;（清除列表符号）
  • box-sizing:border-box;（自动内减）
  • margin: 0 auto;（版心居中）
• CSS特性
  • 继承性
  • 层叠性
  • 优先级
    • 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
    • !important（不能提升继承的优先级）
• 元素显示模式
  • 块级元素
    • div ,p ,h系列 ，ul ,li ,di ,dt ,dd ,form ,header ,nav ,footer...
  • 行内元素
    • a ,span ,b ,u ,i ,s ,strong ,ins ,em ,del...
  • 行内块元素
    • input ,textarea ,button ,select...
  • 元素显示模式转换
    • display: block（转换成块级元素）
    • display: inline-block（转换成行内块级元素）
    • display: inline（转换成行内元素）
• 背景相关属性
  • 背景颜色
    • background-color：
  • 背景图片
    • background-image：
  • 背景平铺
    • background-repeat：
      • tepeat（默认值）
      • no-repeat（不平铺）
      • repeat-x（沿水平方向x轴平铺）
      • repeat-y（沿垂直方向y轴平铺）
  • 图片大小
    • background-size：
      • 数字+px
      • 百分比
      • contain（等比，盒子最大限制）
      • cover（覆盖，填充盒子）
  • 背景位置
    • background-position
      • 方位名词
        • 水平方向
          • left
          • center
          • right
        • 垂直方向
          • top
          • center
          • bottom
      • 数字+px（坐标）
        • 坐标系
          • 原点（0，0）
          • x轴
          • y轴
        • 操作
          • 将图片左上角与坐标点重合即可
  • 背景相关属性连写
    • background: color img repeat position；
    • 颜色 图片 排列 位置
• 选择器进阶
  • 复合选择器
    • 选择器1 选择器2{css}（后代选择器）
    • 选择器1>选择器2{css}（子代选择器）
  • 并集选择器
    • 选择器1，选择器2{css}
  • 交集选择器
    • 选择器1.选择器2{css}
  • hover伪装选择器
  • Emmet语法