HTML行内元素、块级元素、行内块级

html标签按照元素种类可以分为行内元素(display: inline);,块级元素(display:block)和行内块级元素(display:inline-block)三种。了解元素种类有利于,我们进行css布局及属性的使用。

2|行内元素

也叫内联元素或内嵌元素,只能容纳文本或其他内联元素。
默认特点:

  • 使用多个行内元素时呈现效果排在一行,不会自动换行,当充满容器后,就会开始位置继续叠加显示。
  • 不能设置width height属性(可以设置line-height指定高度,宽度随内容变化)。
  • margin 水平方向有效,垂直方向无效。
  • padding 水平方向有效,垂直方向有特殊效果(不是边距效果),具体表现:不影响位置,影响视觉。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        background: chocolate;
    }

    span {
        width: 300px;
        color: #ffffff;
        background: darkgreen;
        padding: 400px 10px 200px 10px;
        margin: 20px;
        line-height: 100px;
    }
</style>
<body>
<div>关关雎鸠</div>
<span>所谓伊人</span><span>在水一方</span>
<div>在河之洲</div>
</body>
</html>

效果:

在这里插入图片描述

常见行内元素:

标签意义
a锚点
abbr缩写
acronym首字
b粗体(不推荐)
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下划线

3|块级元素

块级元素一般可嵌套块级元素或行内元素
默认特点:

  • 独占一行,使用多个块级标签时自动换行。
  • 可以设置width,heightmargin,padding等属性
  • 宽度默认值为 100%

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        background: chocolate;
    }
    
    div {
        color: white;
        background: chartreuse;
        padding: 10px;
        margin: 20px;
    }
</style>
<body>
<div>关关雎鸠</div>
<div>在河之洲</div>
<div>窈窕淑女</div>
<div>君子好逑</div>
</body>
</html>

效果:
在这里插入图片描述

常见的块级元素:

标签意义
address地址
blockquote块引用
center局中对齐块
dir目录列表
div常用块级容易(常用)
dl定义列表
fieldsetform控制组
form交互表单
h1大标题
h2副标题
h3三级标题
h4四级标题
h5物级标题
h6六级标题
hr水平分隔线
menu菜单列表
noframesframes可选内容
noscript可选脚本内容
ol有序表单
p段落
pre格式化文本
table表格 (display:table)
ul无序列表

4|行内块级元素

既有行内元素的一些特性又有块级元素的一些特性。
默认特点:

  • 元素排在一行,会有空白缝隙
  • 可以设置width,heightmargin,padding等属性
  • 默认宽度由随内容变化

常见行内块级元素:

标签意义
button按钮
input输入框
img图片
iframe框架
textarea多行文本框
select选项

5|0总结

三种元素都可通过css改变display 属性切换元素类型
行内元素与块级元素对比:

行内元素块级元素
排在一行独占一行
宽度随内容变化容器的100%
height,width无效height,width 有效
padding,margin 水平有效,垂直无效padding,margin 水平,垂直均有效
display:inlinedispaly: block
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值