前端笔记目录总览

作者 Jackie Anxis 日期 2017-01-23
前端笔记目录总览

HTML

HTML文档结构&标签属性

HTML章节标签&文本标签

HTML组合内容标签

HTML嵌入资源标签

HTML表格标签

HTML表单标签

HTML补充篇

CSS

CSS介绍和准备

  • 引入CSS
  • CSS语法
    • 基本语法
    • 浏览器私有属性
    • 属性值语法
    • @规则语法

CSS选择器

  • 简单选择器
    • 标签选择器
    • 类选择器
    • ID选择器
    • 通配符选择器
    • 属性选择器[att]
    • 伪类选择器
    • 伪元素选择器
  • 组合选择器
    • 后代选择器:空格
    • 子选择器:>
    • 兄弟选择器:+和~
    • 选择器分组

CCS继承优先级

CSS单位

  • CSS长度单位
    • 绝对单位
    • 相对单位
  • 角度单位
  • 时间单位
  • 频率单位

CSS文本

  • font-size 文字大小
  • font-family 文字字体
  • font-weight 字体粗细
  • font-style 字体倾斜
  • line-height 字体行高
  • font 缩写
  • color 文字颜色
  • text-shadow 文字阴影
  • text-decoration 设置划线
  • text-align 水平对齐
  • vertical-align 垂直对齐
  • text-indent 首行缩进
  • white-space 换行/空格的合并
  • word-wrap 设置单词截断
  • word-break 设置如何进行单词截断
  • text-overflow 文本溢出
  • 颜色关键值表

CSS盒模型

  • width 元素宽度
  • height 元素高度
  • padding 填充宽度
  • margin 外边距宽度
  • border 边框
  • outline 轮廓
  • overflow 溢出
  • box-sizing 选择宽度设置
  • box-shadow 设置阴影

CSS背景

  • background-color 背景颜色
  • background-image 背景图片
  • background-repeat 背景图片延伸方式
  • background-attachment 背景固定
  • background-position 背景图片位置
  • background-origin 背景图片相对定位方式
  • background-clip 背景图片/颜色覆盖范围
  • background-size 背景图片大小
  • linear-gradient() 线性渐变
  • radial-gradient() 径向渐变
  • repeating-*-gradient() 循环渐变
  • backgound 缩写

CSS布局(上):display&z-index

  • 文档流的概念
  • display
    • display:inline 行内元素
    • display:block 块级元素
    • display:inline-block 行块元素
    • display:none 不显示
  • 定位偏移属性
    • top bottom left right

CSS布局(中):position

  • position:static 默认定位
  • position:relative 相对定位
  • position: absolute 绝对定位
  • position: fixed 固定定位

CSS布局(下):float

  • float浮动布局
  • clear清除浮动

CSS@11弹性布局flex

  • 一、弹性布局概念
    • 例子
    • 基本概念
  • 二、flex-container的相关属性
    • flex-direction主轴方向
    • flex-wrap 换行方式
    • flex-flow 同时设置方向和换行
    • justify-content 主轴方向的对齐方式
    • align-items 侧轴方向的对齐方式
    • align-content 多行在侧轴方向的对齐方式
  • 三、flex-item的相关属性
    • order 排列顺序
    • flex-basis 初始宽高
    • flex-grow 放大比例
    • flex-shrink 缩小比例
    • flex
    • align-self 单个项目在侧轴上的对齐方式