CSS

这是一篇关于CSS的思维导图，通过使用CSS我们可以大大提升网页开发的工作效率！感兴趣的朋友们可以参考下哦。

CSS

• 初识及入门
  • CSS概念
    • CSS在网页中的应用：层叠样式表：cascading style sheets
    • CSS的发展史
    • CSS的优势
  • CSS基本语法
    • style
  • 3种引入方式
    • 行内样式
    • 内部样式
    • 外部样式
  • CSS的选择器
    • 基本选择器
      • 标签
      • id
      • class
    • 高级选择器
      • 层次选择器
        • 后代选择器：body p{}
        • 子选择器(儿子)：body>p{}
        • 相邻兄弟选择器：同辈向下一个: .active + p{}
        • 通用兄弟选择器：向下所有兄弟— .active~p{}
      • 结构伪类选择器
        • : first-child
        • : last-child
        • :nth-child(1)
          • 定位到父级元素，并且是当前位置"1"的元素，类型一致才有小
        • ：nth-of-child(1)
          • 定位到父级元素，然后直接定位到元素类型一致的第一个元素
      • 属性选择器
        • = 、 *=、 ^=、$=
• 美化网页
  • 字体
    • color
    • font-size
  • 排版网页
    • text-align
    • text-indent：首行缩进
    • line height
    • text-decoration
  • 超链接伪类
    • hover
  • 列表样式
    • list style
  • 背景样式
    • 背景颜色
    • 背景图片
      • repeat
      • ...
      • 渐变背景
        • https://www.grabient.com/
• 盒子模型
  • 边框border
  • 内边距padding
  • 外边距margin
  • 盒子模型尺寸计算：border + margin + padding + 内容元素
  • box-size
  • 圆角边框：border-radius
  • box-shadow
• 浮动
  • 网页布局
    • 标准文档流
  • display
    • block
    • inline
    • inline-block
  • 浮动 float
    • 左浮动
    • 右浮动
  • 清除浮动
    • clear
      • left
      • right
      • both
      • none
    • 解决父级边框塌陷问题
      • 空div
      • 父元素高度
      • overflow：hidden
      • : after
  • inline-block 与float的区别
• 定位
  • relative
    • 相对定位
  • absolute
    • 绝对定位
  • fixed
    • 固定定位
  • z-index
    • 图层
  • opacity
    • 透明度