CSS学习心得

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS学习心得

• CSS基本属性
  • 背景：background-color/background-image/background-repeat/background-attachment/background-position
  • 颜色
    • RGB: rgb(red, green, blue)
    • HEX: #rrggbb
    • HSL: hsla(hue, saturation, lightness)
    • 不透明度：opacity
  • 边框: border-style/border-width/border-color/border-radius/border
  • 文本：color/text-align/text-decoration/text-transform/text-indent/text-shadow
  • 字体: font-family/font-size/font-weight/font-style/font-variant
  • 定位：position: static/relative/fixed/absolute.sticky
  • Display: none/block/inline-block/inline/list-item/run-in/compact/marker/table/inline-table/table-row-group/table-header-group/table-footer-group/table-row/table-column-group/table-column/table-cell/table-caption/inherit
  • 浮动
    • float
    • 清除浮动
      • clear属性
      • clearfix Hack
  • 溢出：overflow: visible/hidden/scroll/auto
  • 轮廓: outline-style/outline-color/outline-width/outline-offset/outline
  • 链接
    • a:link
    • a:visited
    • a:hover
    • a:active
  • 列表：list-style-type/list-style-image/list-style-position
  • 表格：border/border-colapse/border-spacing/caption-side/empty-cells/table-layout
• Flex/Grid布局
  • Flex
    • flex container
      • flex-direction
      • flex-wrap
      • flex-flow
      • justify-content
      • algin-items
      • align-content
    • flex item
      • order
      • flex-grow
      • flex-shrink
      • flex-basis
      • flex
      • align-self
  • Grid
    • grid container
      • display
      • grid-template-columns/ grid-template-rows
      • grid-row-gap/ grid-column-gap/ grid-gap
      • grid-template-areas
      • grid-auto-flow
      • justify-items/align-items/place-items
      • justify-content/align-content/place-content
      • grid-auto-columns/grid-auto-rows
      • grid-template/grid
    • grid item
      • grid-column-start/grid-column-end/grid-row-start/grid-row-end
      • grid-column/grid-row
      • grid-area
      • justify-self/align-self/place-self
• 优化
  • 图像精灵
• Sass/Less/Styls
  • 变量
  • 嵌套规则
  • 混合器
  • 选择器继承
• CSS响应式设计
• CSS3
  • 新增选择器
  • 使用选择器在页面插入内容
  • 新增文字、字体相关样式
  • 盒相关样式
  • 新增背景、边框相关样式
  • 变形处理
  • 动画
  • 过渡
  • @media：媒体查询
• 经典布局
  • 圣杯布局
  • 双飞翼布局
  • 左右两侧布局
  • 上中下
• 弹性盒模型
  • 组成
    • content， border，padding， margin
  • 标准盒模型
  • IE盒模型
• CSS选择器
  • 基本选择器
    • 元素选择器、id选择器(#)、class选择器(.)、通用选择器(*)、分组选择器(h1, h2, p)、后代选择器(空格)、子元素选择器(>)、相邻兄弟选择器(+)、通用兄弟选择器(~)
  • 伪类选择器：(:)
  • 伪元素选择器：(::)
  • 属性选择器: []
  • 权值计算
  • 子主题
• 格式化上下文
  • BFC
  • IFC
• 单位
  • 绝对长度：cm, mm, in, px, pt, pc
  • 相对长度: em, ex, ch, rem, vw, vh, vmin, vmax, %