块元素、行内元素、行内块元素

块元素~、、、、、

特点:

  1. 自己独占一行
  2. 高度、宽度、外边距、内边距都可以控制
  3. 宽度默认是容器(父级宽度)的100%
  4. 是一个容器及盒子,里面可以放行内或块级元素

注意:

  • 文字类的元素内不能使用块级元素。
    p标签主要用于存放文字,因此p标签里面不能放块级元素,特别是不能放div,
    同理h1-h6标签是文字类标签,里面不能放其他块元素。

行内元素在这里插入图片描述

特点:

  • 相邻行内元素在一行上,一行可以显示多个
  • 宽、高直接设置是无效的,只能设置水平方向的内外边距
  • 默认宽度是它本身内容的宽度
  • 行内元素只能容纳文本或其他行内元素

注意:

  • a链接里面不能再放链接,特殊情况a标签里面可以放块级元素,需要给a转换一下块级模式

行内块元素

在这里插入图片描述
特点:

  1. 同时具有块元素和行内元素的特点
  2. 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个
  3. 宽、高、外边距、内边距都可以控制

元素显示模式转换

  1. 转换为块元素:display:block;
  2. 转换为行内元素:display:inline;
  3. 转换为行内块元素:display:inline-block;
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页

打赏

南风☞

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者