CSS显示模式-块元素-行内元素-行内块-转换display

最新推荐文章于 2024-02-23 13:38:19 发布
最新推荐文章于 2024-02-23 13:38:19 发布
阅读量633 收藏
点赞数
分类专栏： 前端基础 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50125215/article/details/114933831
版权
本文介绍了CSS中的元素显示模式，包括块元素、行内元素和行内块元素，以及如何通过display属性进行转换。转换的主要应用场景是调整元素的布局，如赋予行内元素宽高或使块元素一行显示。
摘要由CSDN通过智能技术生成

CSS显示模式-块元素-行内元素-行内块-转换display

元素的显示模式 —— 布局认知

块元素 - block

在这里插入图片描述

行内元素 —— inline

行内块元素 - inline-block

元素显示模式总结

元素模式 英文 排列方式 指定宽高
块级元素 block 一行一个 可以
行内元素 inline 一行多个，内容撑开 不可以
导管 $1

在这里插入图片描述

显示模式的转换-display

在这里插入图片描述

  • 问题 1：显示模式转换的应用场景是什么？
最低0.47元/天 解锁文章
Yolo416
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈HTML5中dialog元素尝鲜
01-19
对话框（别称模态框，浮层）是web项目中用于用户交互的重要部分，我们最常见的就是js中 alert()，confirm()，但是这个对话框的不美观，也不能自定义样式，所以在开发的过程中，一般根据自己自己的需求造轮子或者使用第三方的。 对话框的组成 常见的弹出框形式： 位置：屏幕的左上角，右上角，左下角，右下角，垂直居中等 大小：定宽定高，定宽不定高，不定宽不定高等 开发中的对话框形式就是位置和大小随机组合的一种情况。 但是有一种情况（不定宽高的垂直居中）不易实现（可以使用display:table或css3的translate或flex实现），具体可参考水平垂直居中布局 上面的对话框包含内容的
css:行内元素和块级元素的相互转换
baidu_24743861的博客
08-11 3901
1、行内元素转换成块级元素：display：block; 2、块级元素转换成行内元素:display:inline; 3、行内元素转行内块级元素：display:inline-block;
【CSS】标签显示模式 ③ ( 标签显示模式转换 | 行内元素转换为块级元素 | 块级元素转换为行内元素 | 块级元素、行内元素转换为行内块元素 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-08 4893
一、标签显示模式转换 1、行内元素转换为块级元素 2、块级元素转换为行内元素 3、块级元素、行内元素转换为行内块元素
【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-12 1234
一、Display 显示模式转换 二、块元素示例 三、inline-block 改元素为行内块元素示例 四、为块元素设置浮动 五、为块元素设置定位
05-元素显示模式 / CSS特性【块级元素、行内元素、行内块元素、模式转换】【继承性、层叠性】【代码缩进快捷键】
qq_43809941的博客
01-24 491
代表元素 ： #代表标签：
详解CSS 去掉inline-block元素间隙的几种方法
12-13
inline-block 即内联块,在CSS的元素分类中可以分成三种：行内元素或者内联元素、块级元素、以及内联块元素。 内联块元素具有了内联元素以及块级元素的特性：（1）元素之间可以水平排列 （2）可以当做一个块级元素来...
行内元素、块元素都有哪些
09-22
行内元素和块级元素之间的转换可以通过CSS的display属性来实现。将display设为`inline`可以使块级元素变为行内元素，而设为`block`则可使行内元素变为块级元素。此外，还有`inline-block`值，它结合了两者特性，元素...
关于css 行元素和块元素 相互转换 居中
09-24
在CSS布局中，行元素和块元素是两种基本的元素类型，它们的特性和转换方法对网页设计至关重要。本文将详细介绍这两种元素的概念、特点以及如何实现居中对齐。 首先，块级元素如`div`、`h1`或`p`等，它们在页面布局...
CSS属性display:inline-block用法深入理解
09-25
在CSS布局中，`display`属性是一个至关重要的样式规则，用于定义元素的显示方式。`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，...
CSS元素的显示模式（行内、行内块、块元素）
最新发布
qq_44741577的博客
02-23 837
主体结构标签：排版标签：表格相关标签：<table><tbody><thead><tfoot><tr><caption><form>与<option>
CSS的元素显示模式(块元素、行内元素、行内块元素和显示模式转换)
Bulut0907
01-28 4129
目录1. 块元素2. 行内元素3. 行内块元素4. 转换为块元素5. 转换为行内元素6 转换为行内块元素 1. 块元素 常见的有<div>、<ul>、<ol>、<li>、 特点如下： 独占一行 可以设置高度、宽度、外边距、内边距 宽度默认是父级的100% 里面可以放行内元素或块级元素 注意：文字类的块元素，如<p>、<h1> ~ <h6>，里面不能放块元素 2. 行内元素 常见的有<strong>、<b
css元素显示模式（行内、块级、行内块）
lxllxl211的博客
01-29 1936
div、p、h系列、ul、li、dl、dt、dd、form、header、anv、footer。块级元素一般作为大容器，可以嵌套:文本级元素、行内元素、行内块元素等等.img有行内块元素特点，但是chrome调试工具中显示的inline。但是: p标签中不要嵌套div、p、h等块级元素。2、高度和宽度默认由内容撑开。a标签内部可以嵌套任意元素。但是:a标签不能嵌套a标签。（一行只能显示一个）1、一行可以显示多个。
CSS基础知识（三）-元素显示模式（块元素、行内元素、行内块元素）
weixin_42247414的博客
01-05 680
概述 元素显示模式就是元素（标签）以什么样的方式进行显示。 HTML元素一般分为块元素和行内元素两种类型 块元素 常见的块元素有~、、、、、等 块级元素特点： 自己独占一行 高度，宽度，内外边距都可以控制 宽度默认是容器（父级宽度）的100% 是一个容器及盒子，里面可以放行内或者块级元素 注意： 文字类的元素内不能使用块级元素 标签主要用于存放文字，因此里面不能放块级元素 同理，~等都是文字类块级标签，里面也不能放其他块级元素 行内元素 常见的行内元素有、、、、、、等 行内元素特点： 相邻行内
css怎么将块元素变成,CSS块元素、行内元素、行内块元素的转换
weixin_31408789的博客
08-03 7113
一、块元素转行内元素：display:inline二、行内元素转块元素：display:blockdiv{display: inline;/*无效width: 500px;height: 500px;*/background-color: red;}p{display: inline-block;}span{display: block;width: 400px;height: 300px;bac...
css显示模式（块元素，行内元素）
issa的博客
05-25 603
不同元素之间可以通过变换实现不同的功能。 1.块元素      1.1.性质： /*1.自己独占一行。*/ /*2.高，宽，外边距和内边距可控*/ /*3.宽默认为父级的100%就是父类元素的宽*/ /*4.可以看作一个盒子，里面可以装块元素和行内元素*/ /*常见的块元素：*/ <p>,<h1>~~<h6>, <div>,<ul>,<ol>,<li>等。 /*注：<p>和&lt.
HTML的display属性将行内元素、块状元素、行内块状元素互相转换以及三者的区别
weixin_39037804的博客
08-23 2423
1.行内元素 查看演示 (1)设置宽高无效 (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间 (3)不会自动进行换行 <html> <head> <me...
关于块元素和行元素之间的转换
ceike的博客
05-13 6580
将块级元素设置为行内元素(inline),可以通过以下几种方式:1. display: inline;这个是最直接的方式,通过设置display样式为inline,可以将块级元素变为行内元素。例如:cssdiv {将div元素变为行内元素。当一个元素设置float属性后,其display属性会被重置为行内块inline-block,产生行内元素的效果。例如:cssdiv {
css中显示模式转换(display)
Katie_fly的博客
08-19 476
1、块转行display: inline; 2、行转块display: block; 3、行内元素转行内块display: inline-block;
块元素、行内元素、行内块元素的区别，如何转换
06-12
块元素、行内元素和行内...3. 行内元素转换为行内块元素：设置 `display: inline-block;`，如将`<img>`转换为可设置大小的图片容器。 需要注意的是，转换后的元素可能会受到其他样式属性的影响，需要进行适当的调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值