侧边栏壁纸
博主头像
黑山老妖博主等级

记录精彩的坎坷人生

  • 累计撰写 72 篇文章
  • 累计创建 85 个标签
  • 累计收到 9 条评论

目 录CONTENT

文章目录

display:block详解

我是我村的希望
2023-02-19 / 0 评论 / 0 点赞 / 7 阅读 / 3012 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-02-22,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1、每一个元素都有默认的 display属性值,比如 div元素,它的默认 display属性值为 “block”,成为“块级”元素(block-level);而span元素的默认 display属性值为 “inline”,称为“行内”元素。

2、块级元素:占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形;

行内元素 :自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的

3、例子:链接 a 元素,在默认情况下是是“行内元素”,因此对a元素设置高度、宽度等属性,都是无效的。而比如 divpliimg等默认情况下的 display属性值就是 “block”。所以对于链接a来说只能这样:display:block;强制将它改成块元素。

常用的块状元素有:

<div><p><h1>...<h6><ol><ul><dl><table><address><blockquote>(块引用)<form>

常用的内联元素有:

<a><span><br><i><em><strong><label><q><var><cite><code>(表示计算机源代码或者其他机器可以阅读的文本内容)

常用的内联块状元素有:

<img><input>

图片是内联元素,同时是替换元素,替换元素是可以设置宽高的

设置 display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点:

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

块状元素也可以通过代码 display:inline将元素设置为内联元素。如下代码就是将块状元素 div转换为内联元素,从而使 div元素具有内联元素特点。

div{

     display:inline;

 }

<div>我要变成内联元素</div>

内联元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

0
广告 广告

评论区