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

鳄鱼君

发表文章数:642

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 经验教程 » 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

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS元素的显示模式 块元素、行内元素、行内块元素》 发布于2020-08-07

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

8 + 5 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册