CSS元素的显示模式 块元素、行内元素、行内块元素

CSS元素的显示模式 块元素、行内元素、行内块元素

块元素

常见的块元素:div、ul、li、ol、h1~h6、p、dl、table等 块元素特点
  1. 独占一行
  2. 可控制宽高、内外边距
  3. 宽度默认是容器(父级)的100%
  4. 是容器/盒子,里面可以放行内后者块级元素
注意:
  1. 文字类的元素内不能使用块级元素,例如p标签就是文字标签,里面不能放div标签
  2. h1~h6也是文字标签,里面不能放其它块级元素

行内元素

常见的行内元素:span、strong、b、em、i、del、s、ins、u、a等 行内元素特点
  1. 一行显示多个,相邻行内元素再一行上
  2. 高宽直接设置无效
  3. 默认宽度就是它本身内容的宽度
  4. 行内元素只能容纳文本或其它行内元素
注意:
  1. 链接里面不能再放链接
  2. a标签可以放块级元素,给标签转换为块级元素更好

行内块元素

同时具有块元素和行内元素特点的标签:img、input、td 行内块元素
  1. 相邻元素在一行上,之间默认通过空白隔开
  2. 默认宽高就是本身内容的宽高
  3. 宽高、内外边距可控制
元素模式 元素排列 设置样式 默认宽度 包含
块级元素 独占一行 可设置宽高 容器的100% 容器可包含任何标签
行内元素 一行可放多个 不可直接设置宽高 本身内容的宽度 容器文本或其它行内元素
行内块元素 一行可放多个 可设置宽高 本身内容的宽度
转换为块元素display:block 转换为行内元素display:inline 转换为行内块元素display:inline=block
分享到 :

发表评论

登录... 后才能评论