1. 内联(行内)元素、块元素、行内块元素
   1. 基本概念
      1. 内联(行内)元素
         1. 默认不会换行，只占内容的大小
      2. 块级元素
         1. 默认换行，占满整行
      3. 行内块元素
         1. 默认不会换行，且支持宽高属性
   2. 包裹关系
      1. 内联元素可以包裹内联元素，但不能包裹块元素，尽量也不要包裹行内块元素
      2. 块元素可以包裹其他两个元素
         1. P标签不能包裹块元素
      3. 行内块元素尽量不包裹块元素
   3. 相互转化
      1. display
         1. 显示属性
         2. display:none
            1. 不显示
         3. display:block
            1. 显示为块级元素
         4. display：inline
            1. 显示为内联(行内)元素
         5. display:inline-block
            1. 显示为行内块元素
   4. 行内块元素
      1. 行内块元素因为本身的基线设置方式，会造成垂直对齐方式的混乱，使用时需要添加vertical-align，设置对齐方式
   5. display:table
      1. 可以让元素具有某些表格元素的属性
      2. 在页面中可以实现一些效果，但是会带来更大的问题，实际项目中不会使用，此处不做详细解释
   6. 总结，利用好元素的属性，可以更加合理的实现页面的布局效果
2. 标准盒模型 Box Model
   1. 什么是盒子模型
      1. 盒子模型是计算标签在页面中所占物理空间大小的计算公式
      2. 宽
         1. 左外边距---左边线---左内边距---内容--右内边距--右边线--右外边距
      3. 高
         1. 上外边距---上边线---上内边距---内容--下内边距--下边线--下外边距
      4. 最大宽度高度
         1. max-width
         2. max-height
      5. 最小宽度高度
         1. min-width
         2. min-height
   2. 内联元素对于盒子模型的支持
      1. margin
         1. 只支持left和right，不支持top和bottom
      2. padding
         1. 只支持left和right
         2. top和bottom会影响背景颜色的大小，单不影响标签的占位
   3. 关于外边距的特殊情况
      1. 垂直方向的高度丢失
      2. 父级子级的外边距bug
   4. 元素的自动居中
      1. 块元素
         1. 垂直
            1. 一般不去实现此效果
         2. 水平
            1. 添加在自身上，居中对象为直接父级，不能被继承
            2. margin:0 auto;
            3. margin:0 auto 0;
      2. 非块元素
         1. 内联元素，行内块，块元素内容
         2. 垂直
            1. line-height
            2. 行内块元素
            3. 自身还需添加vertical-align:middle ;
         3. 水平
            1. 添加在父级块元素上，居中对象为直接父级，可以被继承
            2. text-align:center
   5. border
      1. border-style
         1. 样式
      2. border-width
         1. 宽度
      3. border-color
         1. 颜色
         2. transparent
            1. 透明
      4. border-radius
         1. 倒角，圆弧角度
         2. 复合写法
            1. 从左上角开始，顺时针控制四个角的半径
      5. 制作三角形
   6. outline
      1. 设置外轮廓属性
3. 关于背景
   1. background-color
      1. 背景颜色
   2. background-image
      1. 背景图片
      2. url(图片路径)
   3. background-repeat
      1. 背景平铺
      2. no-repeat
         1. 不平铺
      3. repeat-x
         1. X轴平铺
      4. repeat-y
         1. Y轴平铺
   4. background-position
      1. 背景定位
      2. 英文
         1. X轴
            1. left
            2. right
         2. Y轴
            1. top
            2. bottom
         3. 居中
            1. center
      3. 数值
         1. 10px(X轴) 10px(Y轴)
   5. 复合写法
      1. 在一个属性中，通过多个属性值，给不同的属性赋值，多个属性值之间使用空格做间隔
      2. background:green url(1.jpg) no-repeat center center ;
   6. background-size
      1. 背景图片大小
      2. 一个数值
         1. 宽
      3. 两个数值
         1. 高
      4. 不写入复合写法，会造成冲突，一般单独写
4. 关于表格
   1. border-collapse: collapse 可赖扑死
      1. 线合并
   2. text-align: ;
      1. 内容水平对齐方式
      2. left
      3. center
      4. right
   3. vertical-align
      1. 内容的垂直对齐方式，要作用在td上
      2. top
      3. middle
      4. bottom
   4. table-layout 累奥特 : fixed;
      1. 固定列宽
   5. caption-side
      1. 标题标签的位置
      2. top
         1. 默认值，在表格最上方
      3. bottom
         1. 在表格最下方
5. 关于列表
   1. 标记样式
      1. list-style-type
         1. none
   2. 标记定位
      1. list-style-position
         1. outside 默认
         2. inside
   3. 标记图片
      1. list-style-image
         1. url("路径")
   4. 复合写法
      1. list-style
6. 消失出现
   1. opacity
      1. 0
         1. 透明
      2. 1
         1. 出现
   2. visibility 威贼威里忒
      1. hidden
         1. 隐藏
      2. visible 威贼波欧
         1. 可见
   3. display
      1. none
         1. 消失
      2. block
         1. 显示为块元素
7. 超出部分隐藏
   1. overflow
      1. visible 威贼波欧
         1. 显示
      2. hidden
         1. 隐藏
      3. scroll 思葛肉
         1. 超出部分显示滚动条
   2. 超出部分变为省略号
      1. white 外特 - space 思贝斯: nowrap on rep ; 超出部分不换行 overflow: hidden; 超出部分隐藏 text-overflow:ellipsis 易丽扑塞死; 超出部分变为省略号
8. 阴影效果
   1. 文字的阴影效果
      1. text-shadow: 2px 2px 2px red,4px 4px 2px blue;
         1. 第一个参数:阴影X轴的偏移量(必写)
         2. 第二个参数:阴影Y轴的偏移量(必写)
         3. 第三个参数:阴影模糊的偏移量(可写)
         4. 第四个参数:阴影的颜色(必写)
         5. 可同时设置多个阴影,中间用逗号做间隔
   2. box的阴影效果
      1. box-shadow: 0px 0px 2px 1px aquamarine outside;
         1. 第一个参数:阴影X轴的偏移量(必写)
         2. 第二个参数:阴影Y轴的偏移量(必写)
         3. 第三个参数:阴影的模糊值(可写)
         4. 第四个参数:阴影的放大值(可写)
         5. 第五个参数:阴影的颜色(必写)
         6. 第六个参数:阴影的方向(可选)
            1. outset
            2. 默认值,外
            3. inset
            4. 内