display的用法和区别

元素的显示模式(display)

HTML的显示模式有很多种,常见的有blockinlineinline-blocktableform等,HTML5又新增了flex

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。)。)。)。)。)。)
table-row-group 此元素会作为一个或多个行的分组来显示(类似
table-header-group 此元素会作为一个或多个行的分组来显示(类似
table-footer-group 此元素会作为一个或多个行的分组来显示(类似
table-row 此元素会作为一个表格行显示(类似
table-column-group 此元素会作为一个或多个列的分组来显示(类似
table-column 此元素会作为一个单元格列显示(类似
table-cell 此元素会作为一个表格单元格显示(类似
table-caption 此元素会作为一个表格标题显示(类似
inherit 规定应该从父元素继承 display 属性的值。

其中,使用最多的为block、inline、和inline-block,以及flex,flex的显示模式较为复杂暂且不表,这里我们详细说一下前三种。

block(块级元素)

  • 元素可以直接设置宽度和高度
  • 元素默认宽度100%,默认高度自适应
  • 元素独占一整行

常见的块级元素有:

  • address - 地址
  • blockquote - 块引用
  • center - 举中对齐块
  • dir - 目录列表
  • div - 常用块级容易,也是css layout的主要标签
  • dl - 定义列表
  • fieldset - form控制组
  • form - 交互表单
  • h1 - 大标题
  • h2 - 副标题
  • h3 - 3级标题
  • h4 - 4级标题
  • h5 - 5级标题
  • h6 - 6级标题
  • hr - 水平分隔线
  • isindex - input prompt
  • menu - 菜单列表
  • noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
  • noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)
  • ol - 排序表单
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表

inline(行内元素)

  • 元素不可以直接设置宽度和高度
  • 元素默认宽度自适应,默认高度自适应
  • 元素可以和其他元素共处一行
  • a - 锚点
  • abbr - 缩写
  • acronym - 首字
  • b - 粗体(不推荐)
  • bdo - bidi override
  • big - 大字体
  • br - 换行
  • cite - 引用
  • code - 计算机代码(在引用源码的时候需要)
  • dfn - 定义字段
  • em - 强调
  • font - 字体设定(不推荐)
  • i - 斜体
  • img - 图片
  • input - 输入框
  • kbd - 定义键盘文本
  • label - 表格标签
  • q - 短引用
  • s - 中划线(不推荐)
  • samp - 定义范例计算机代码
  • select - 项目选择
  • small - 小字体文本
  • span - 常用内联容器,定义文本内区块
  • strike - 中划线
  • strong - 粗体强调
  • sub - 下标
  • sup - 上标
  • textarea - 多行文本输入框
  • tt - 电传文本
  • u - 下划线
  • var - 定义变量

inline-block(行块元素)

  • 元素可以直接设置宽度和高度
  • 元素默认宽度自适应,默认高度自适应
  • 元素可以和其他元素共处一行
  • input
  • textarea

为什么(什么情况下)要使用display转换显示模式

  1. 元素本身是行内元素,但是需要给他设置宽高的时候,需要转换为block或者inline-block
  2. 元素本身是块级元素,但是现在有多个同等级元素想要同一排显示时,需要转换为inline或者inline-block
  3. 元素内部的结构较为复杂(如一个a标签内部需要放一个无序列表)时,需要转换为block或者inline-block
  4. 元素需要设置margin或者padding时,最好将这个元素转为块级元素。

为什么要转换显示模式?

在大多数情况下,布局通常使用块级元素,少部分需要横排显示且需要设置宽高的小型元素需要使用行块元素,同一行内需要有特殊样式显示的文字使用行内元素。


display的用法和区别_第1张图片
image.png

如图分为上下两个模块。
这两种模块均为页面的主体结构且独占一行,所以使用块级元素搭建;
第一行内有网页、新闻、贴吧等选项,由于是几个相同的元素放在同一行显示,所以可以使用行块元素,也可以使用块级元素然后浮动;
下半部分一段文字中有几个文字是和其他文字显示颜色不同的,所以为了不影响整体排版,这种特殊标出的文字需要使用行内元素标注,然后单独设置样式。


display的用法

  • 通过直接给元素设置display:block即可将这个元素转换成块级元素,绝大多数元素可以直接通过这种方式转换,少部分元素不可转换。
点击跳转

我的页面中写入了一个a标签,在页面中的显示如上图所示。
现在我想将这个a标签转换为圆形,所以我需要给他设置这样的样式:

    a{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      border-radius: 50%;
    }

这时,在页面中显示出的效果是这样的:


a标签

这是由于a标签是一个行内元素,虽然我们给他设置了宽度和高度,但是它还是会依照自己的内容尺寸算出当前标签的大小,所以我们需要再将它转成块级元素,才能正常设置宽度和高度,从而实现我们想要的排版效果

    a{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      border-radius: 50%;
      display: block;
      line-height: 100px;
      text-align: center;
    }
display的用法和区别_第2张图片
image.png

你可能感兴趣的:(display的用法和区别)