元素分类

行级（内联）元素(inline)

• 多个标签如果在宽度允许的范围内，在同一行从左到右排列
• 行级元素有：
  • <a> <span> <em> <strong> 等
  • 特点：
    • 宽度允许时，可以处在同一行
    • 内容撑开宽度
    • 不支持宽高，不支持上下margin

块级元素（block）

• 默认情况下，独占一行的元素称为块级元素
• <p> <div> <h1>~<h6> <hr> <ul> <ol> <li> 等
• 特点：
  • 默认独占一行
  • 可以设置宽高
  • 支持所有的css样式

内联块元素(inline-block)

• 代表元素img
• 多个显示在一行，但可以设置宽高。

display属性

• 控制元素的显示和隐藏，还可以实现块级元素与行级元素的转变
• 取值：
  • none 不显示
  • block 该元素会被当做块级元素显示
  • inline 该元素会被当做内联元素显示
  • inline-block 该元素会被当做内联块元素显示

定位

• 使用position属性来制定元素在页面中的定位方式
  • static 默认定位
  • relative 相对定位
    • 该元素相对于其本来的正常位置（默认定位中的位置）的定位。
    • 一般使用top和left
    • 该元素原先的位置仍然被保留
  • fixed 固定定位
    • 元素的位置相对于浏览器窗口的位置是固定的，即使滚动窗口，也不会移动
    • 可用于回到顶部、目录等
  • absolute绝对定位
    • 相对于已经定位了的祖先元素为基准进行定位，绝对定位的元素脱离了文档流，其原先的位置会被其他元素占用
  • sticky 粘性定位
    • 粘性定位结余relative和fixed定位之间的一个定位，是基于用户滚动来体现的。
    • 当页面滚动是超出目标区域是，体现的是fixed特性，当没有超出目标区域，体现relative特性，一般使用top、left等定义值，超出这些值，就认为超出区域，进行固定定位。

z-index

• Z轴，当元素发生重合时，通过z轴可以定义哪个元素显示在最上层，哪个元素显示在最底层（从用户角度看），z轴值大的显示在上方。

浮动

• 使用float属性设置元素的浮动方式
  • none
  • left
  • right
• 设置float属性后，具体有如下特性：
  • 1、元素变成inline-block属性，宽度足够的情况下，多个元素在一行显示。
  • 2、元素脱离了文档流
  • 3、浮动支持所有CSS样式
  • 4、提高层级半级
    • 提升半级是指z轴方向上，浮动的元素在文档流中的元素的上方，文档流中的元素在下方，但是，文档流中元素的文组会换药在浮动元素的周围，但是如果浮动的元素完全覆盖掉文档流中的元素，则文档流中的元素不显示。

溢出

• overflow属性
  • 设置当文字超出div时如何处理
    • visible 默认值，超出的文字可见
    • hidden 超出的文字被剪掉
    • scroll  文字可以滚动查看，无论是否超出范围，都显示滚动条
    • auto 内容超出可以滚动查看，不超出没有滚条

clear属性

• 清除元素左右两侧的浮动
  • left 元素左侧不允许浮动
  • right 元素右侧不允许浮动
  • both 元素左右两侧都不允许浮动
  • none 默认值，左右两侧都允许浮动