CSS元素分类

扫码查看
  • 块状元素
  • 行内元素
  • 行内快元素

元素特点:

块状元素

  • 在页面中以矩形区域显示。
  • 自上而下排列,独占一行
  • 可以直接添加宽高
  • 一般情况下,作为其他元素或内容的容器

行内元素

  • 在页面中最小单位也是矩形。
  • 在一行内逐个排列。
  • 不可以直接添加宽高,大小是由内容撑开的。
  • 内联元素也符合盒模型的规则,但是个别属性会出现问题(padding-top/bottom margin-top/bottom)
  • 内联元素在一行内排列的时候,之间有间距

行内快元素

  • 可以设置宽高。
  • 默认情况下,在一行内逐个显示,之间有间距。
  • 当前元素的display值为inline-block时,能支持vertical-align属性。

常用元素:

块状元素:

  • div:最常用的块级元素
  • dl:和dt-dd搭配使用的块级元素
  • form:交互表单
  • h1 -h6:标题
  • hr:水平分隔线
  • ol:有序列表
  • p:段落
  • ul:无序列表
  • li:列表标签
  • fieldset:表单字段集
  • colgroup-co:表单列分组元素
  • table-tr-td:表格及行-单元格

行内元素:

  • a:超链接(锚点)
  • b:粗体
  • br:换行
  • i:斜体
  • em:强调
  • img:图片
  • input:输入框
  • label:表单标签
  • span:常用内联容器,定义文本内区块
  • strong:粗体强调
  • sub:下标
  • sup:上标
  • textarea:多行文本输入框
  • u:下划线
  • select:项目选择

行内块元素:

  • input:表单标签
  • img:图片标签

元素类型转换:

display属性

作用:检索或者设置元素生成的盒模型类型。

常用属性值

  • display:block;

作用:将元素转成块状元素,拥有块状元素特点。

补充:大部分块状元素,默认的display的值都是block;

  • display:inline;

作用:将元素转成内联元素,拥有内联元素的特点。

补充:大部分内联元素,默认的display的值inline;

  • display:none;

作用:将当前隐藏,并不占据空间。

03-29 10:01
查看更多