CSS标签分类(块元素 行内元素 行内块元素)

块标签:div p h1-h6 hr ul ol li dl dd dt form 

            ①支持宽高,自上而下排列

            ②不受空格影响

            ③一般用于其他标签的容器

            ④默认宽度为100%(独占一行)。

行内标签:span i a b strong em sub sup u label br font

             ①不支持宽高(宽高根据内容大小自动撑开),自左向右排列

             ②受空格影响

             ③不独占一行

行内块标签:img  textarea  input

               ①支持宽高,自左向右排列

               ②受空格影响

               ③不独占一行

标签之间的转换

display:inline(转为行内元素)

              inline-block(转为行内块元素)

              block(转为块元素)

              none(隐藏 不显示)

注意:当元素浮动(float)时会转化成行内块元素特点。

### 关于 HTML/CSS 中的行内块元素 #### 什么是行内块元素行内块元素是一种特殊类型的 HTML 元素,它们既具有行内元素的部分特性,又具备块级元素的一部分行为。具体而言,行内块元素不会独占一行,而是与其他行内行内块元素共存于同一行中[^1]。与此同时,它可以接受宽度(width)、高度(height)属性以及内外边距(margin 和 padding)设置,这一点与普通的行内元素有所不同[^4]。 #### 常见的行内块元素列表 以下是常见的行内块元素及其特点说明: - **`<img>`**: 图片标签,默认表现为行内块形式,能够设定尺寸并调整间距。 - **`<input>`**: 输入框控件,允许自定义大小并通过样式控制其外观。 - **`<button>`**: 按钮组件,同样支持宽高调节及复杂的装饰效果。 - **`<textarea>`**: 多行文本输入区域,可配置具体的呈现面积。 - **`<select>`**: 下拉菜单结构,适用于表单交互场景。 - **`<object>`**, **`<canvas>`**, **`<video>`**, **`<audio>`**: 媒体嵌入对象,用于加载外部资源或者绘制图形等内容时保持灵活性的同时兼容传统布局模式需求[^3]. 需要注意的是,尽管以上列举了一些典型的代表案例,但实际上任何标准HTML标记都可以通过CSS规则改变显示模型成为所谓的“伪”行内块状物。例如利用`.class{display:inline-block}`这样的声明即可实现转换过程。 下面给出一段简单演示如何创建由三个独立部分组成的横向导航栏的例子: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Inline Block Example</title> <style> nav{ font-size:0;/*消除空白字符影响*/ } .nav-item{ display:inline-block; vertical-align:top; background:#ddd; border:solid thin black; text-align:center; white-space:normal; font-size:initial; min-width:100px; line-height:2em; } </style> </head> <body> <nav> <div class="nav-item">Home</div><!----注意这里的注释技巧是为了防止多余的间隙--> <div class="nav-item">About Us</div><!--同理此处也加入注释符--> <div class="nav-item">Contact Info</div> </nav> </body> </html> ``` 在此基础上还可以进一步探索更多高级技术手段优化用户体验,比如响应式断点处理等等。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值