CSS块级元素和行级元素

  1. 根据规定,每个网页元素都会存在display属性 , 其中像div,存在的默认值为”block”属性的即为块级元素 ; 而”span”元素的默认值为”inline”,称为“行内元素”。
  2. “div”这样的块级元素,可以通过高度,宽度,内外边距等属性来调整矩形的样子;与之相反的是“span”这样的行内元素,则没有独立的空间,需要依附于块级元素,因此对行内元素设置高度,宽度,内外边距等属性都是无效的。
  3. 如果即是“行内元素”也想设置高宽度和内外边距,就需要设置“display:inline-block”将元素设置为行级-块级元素。

      * 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 element)

  * 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 - 定义变量

可变元素

  可变元素为根据上下文语境决定该元素为块元素或者内联元素。
  * applet - java applet
  * button - 按钮
  * del - 删除文本
  * iframe - inline frame
  * ins - 插入的文本
  * map - 图片区块(map)
  * object - object对象
  * script - 客户端脚本

### HTML `<a>` 标签的默认显示类型 在HTML中,`<a>`标签被定义为元素(inline element)。这意味着它不会自动占据整个宽度并另起一[^2]。作为元素的一部分,`<a>`标签通常用于创建超链接或其他嵌入式交互内容。 尽管如此,通过CSS中的`display`属性可以改变任何HTML元素的显示模式。例如: ```css a { display: block; } ``` 上述代码会将`<a>`标签的为从默认元素更改为块级元素,使其表现得像其他块级元素一样[^4]。 然而,在未指定额外样式的情况下,默认情况下浏览器渲染`<a>`标签的方式遵循其标准定义——即作为一个元素存在[^3]。 ### 示例代码展示 以下是简单的HTML与CSS组合示例,演示如何更改`<a>`标签的默认为: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of Changing 'a' Tag Display</title> <style> .block-link { display: block; margin-bottom: 10px; padding: 10px; background-color: lightblue; text-align: center; } </style> </head> <body> <!-- Default Inline Behavior --> <a href="#">This is an inline link (default behavior)</a> <a href="#">Another inline link next to the first one</a> <br><br> <!-- Block Level Behavior --> <a href="#" class="block-link">This is now a block-level link</a> <a href="#" class="block-link">A separate block-level link below the previous one</a> </body> </html> ``` 此代码片段展示了两种不同样式的`<a>`标签:一种保持默认内状态;另一种则通过CSS将其转换成块级元素
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿冰介

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

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

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值