CSS16：块级元素、行内元素和display

最新推荐文章于 2023-09-25 14:45:37 发布

一个优雅的搬砖人

最新推荐文章于 2023-09-25 14:45:37 发布

阅读量558

点赞数

分类专栏： # CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_48306950/article/details/123112590

版权

CSS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid salmon;
        }
        span {
            width: 100px;
            height: 100px;
            border: 1px solid salmon;
        }
    </style>
</head>
<body>
<div>div块级元素</div>
<span>span行内元素</span>
<span>span行内元素2</span>
</body>
</html>

从图中可以看到 div 元素是独占一行的，并且宽度高度是可以设置的，这就是块级元素；

而 span 元素并不会独占一行，它的宽度和高度由它的内容所决定。

接下来详细介绍一下，块级元素和行内元素

块级元素 block

块级元素一般作为容器出现，用来组织结构。具有以下特点：

每个块级元素独占一行
宽度、高度、行高和内外边距都可控制
未设定宽度时，默认占它容器的100%
它可以容纳行内元素和块级元素

常见的块级元素：

<address> – 地址
<blockquote> – 块引用
<center> – 举中对齐块
<dir> – 目录列表
<li> – 常用块级容易，也是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>、<span>等。具有以下特点：

和其他元素都在一行上
宽度、高度、行高及内外边距不可改变
宽度就是它的文字或图片的宽度，不可改变
行内元素只能容纳文本或者其他行内元素

注意：

1、设置高度 height 无效，可以通过 line-height 设置

2、设置 margin 只有左右有效，上下无效

3、设置 padding 只有左右有效，上下无效。注意元素范围是增大了，但是对元素周围的内容是没有影响的。

常见的行内元素：

<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> – 下划线

行内块级元素 inline-block

行内块级元素，顾名思义，它既有块级元素的特点，也有行内元素的特点。它可以自由设置元素的宽度和高度，也可以在一行内放置多个行内块级元素。其特点如下：

和其他行内或行内块级元素放置在同一行上
元素的宽度、高度、行高及内外边距都可以设置

通过 display 实现元素类型转换

display: block; 定义元素为块级元素

display: inline; 定义元素为行内元素

display: inline-block; 定义元素为行内块级元素

总结区别

排列方式：

块级元素会独占一行

行内元素不会独占一行，相邻的行内元素会排在同一行

宽高设置：

块级元素可以设置宽高

行内元素不可以设置宽高

默认宽度：

块级元素默认情况下宽度自动填满其父元素宽度

行内元素其宽度随内容的变化而变化

边距设置：

块级元素可以设置 margin、padding

行内元素水平方向的 margin-left、margin-right、padding-left、padding-right 可以生效，但是竖直方向的 margin-top、margin-bottom、padding-top、padding-bottom 却不能生效

一个优雅的搬砖人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS16：块级元素、行内元素和display

示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; border: 1px solid salmo
复制链接

扫一扫