CSS 的元素显示模式---块级和行级的元素

最新推荐文章于 2023-03-08 19:32:54 发布
最新推荐文章于 2023-03-08 19:32:54 发布
阅读量493 收藏 1
点赞数
分类专栏： # HTML&CSS&Sass 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H200102/article/details/110387866
版权
本文介绍了CSS中元素的显示模式，包括块元素、行内元素和行内块元素，以及如何通过display属性进行转换，以实现更灵活的页面布局。例如，使用display:block;使元素变为块级，display:inline;变为行内元素，display:inline-block;则为行内块元素，允许在同一行显示多个div。
摘要由CSDN通过智能技术生成

资料来源于黑马pink老师的课程

了解元素的显示模式可以更好的让我们布局页面.

  1. 什么是元素的显示模式
  2. 元素显示模式的分类
  3. 元素显示模式的转换

2.1 什么是元素显示模式
在这里插入图片描述
2.2 块元素
在这里插入图片描述
2.2 行内元素
在这里插入图片描述
2.3 行内块元素
在这里插入图片描述
2.4 元素显示模式总结
在这里插入图片描述
2.5 元素显示模式转换

例如将多个div在同一行显示。

  • 转换为块元素：display:block;
  • 转换为行内元素：display:inline;
  • 转换为行内块：display: inline-block;
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset
最低0.47元/天 解锁文章
H千面
关注
专栏目录
CSS的元素显示方法（块、行内元素）及背景属性
weixin_50119334的博客
09-17 2911
CSS的元素显示方法 元素显示模式：即元素（标签）以什么方式进行展示 1.块元素 常用有<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等，<div>最典型 特点： 比较霸道，自己独占一行 高度，宽度，外边距，内边距都可以控制 宽度默认为容器（父级宽度）的100% 是一个容器及盒子，里面可以放行内或块级元素 1.文字类的元素不能使用块元素 2.<p>标签主要用于存放文字，因此&
【CSS】字体font-文本text-元素显示与隐藏display-背景设置background
YK菌的博客
12-20 1643
文章目录字体1. 字体系列2. 字体大小3. 字体粗细4. 文字样式5. 复合属性6. 总结文本1.文本颜色2.对齐文本3. 装饰文本4. 文本缩进5. 行间距元素显示1. 什么是元素显示模式2. 块元素3. 行内元素4. 行内块元素5. 元素显示模式总结6. 元素显示模式转换7. 小技巧 单行文字垂直居中的代码背景设置1. 背景颜色2. 背景图片3. 背景平铺4. 背景图片位置5. 背景图像固定6. 背景属性复合写法7. 背景颜色半透明8. 总结 字体 1. 字体系列 font-family font-f
css构造块级元素
weixin_33697898的博客
09-13 105
css 1. 宽高width:数值;height:数值;也可用百分比！长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparentbackground-color 不会被后代继承。(2)背景图片使用background-image 属性默认值为none 表示背景上没有放置任何图像如果需要设置一个背景图像，必须为这个属性设置一...
CSS中脱离文档流是什么意思?
weixin_33716557的博客
04-22 445
如果一个元素脱离文档流了，是不是只是显示上脱离而已？在html中是否也会脱离？我用js取这个元素的父节点的childNodes还能否取到这个元素；同时，这个元素的parentNode还是不是html中的父节点？ 脱离文档流只是对html文档的一种解析方案的说法而已。脱离文档流是相对正常文档流而言的。正常文档流就是我们没有用css样式去控制的html文档结构，你写的界面的顺序就是网页展示的顺序。比...
显示模式之块级元素
WangZhang_521的博客
12-28 389
显示模式之块级元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
CSS的元素显示模式（块级元素，行内元素，行内块元素显示特点）
Arcofcosmos的博客
01-19 998
CSS的元素显示模式 css基础知识： https://blog.csdn.net/Arcofcosmos/article/details/122561105 css复合选择器 https://blog.csdn.net/Arcofcosmos/article/details/122581153?spm=1001.2014.3001.5502 块元素 常见的块元素有 <h1>~<h6>,<p>,<div>,<ul>,<ol>,<l
CSS块级元素与行级元素详解
12-10
需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者...
行内元素和块级元素 displayDemo.html
04-13
在CSS中，`display`属性允许我们控制元素的显示方式，可以将一个元素从行内元素变为块级元素，或者反之。例如，将`<span>`元素的`display`属性设置为`block`，它就会表现得像一个块级元素；而将`<div>`元素的`...
css基础2--CSS复合选择器、标签显示模式、设置背景的属性、CSS三大特性
Nyxfairy的博客
07-26 293
CSS复合选择器（后代选择器、子选择器、交集选择器、并集选择器）；标签显示模式（块级标签--块级元素、行内标签--行内元素&行内块元素、转换标签的显示模式--display）；背景处理有关的CSS属性；CSS三大特性（CSS层叠性、CSS继承性、CSS特殊性--优先级&CSS权重&权重计算公式）......
CSS元素显示模式的存在(块级元素，行内元素，行内块元素）
Ahua_Core的博客
08-14 524
CSS元素显示模式元素显示模式的存在block 块级元素inline 行内元素inline-block 行内块元素 元素显示模式的存在 HTML中有各种各样的标签，如 < img/> < h1>~< h6>,< span>及 < div>等等。这些标签代表不同的HTML元素，有各自的含义和特定使用环境。同时，这些标签在其“本质”上就有着不同的分类。即元素可被分作 block(块级元素），inline(行内元素或内联元素）和inline-block(
CSS的显示模式(块元素、行内元素，行块级元素)
micoria的博客
01-08 842
CSS的显示模式 显示模式的定义：元素以什么方式进行显示。 作用：不同地方会用到不同类型的标签，了解他们会更好的布局网页。 元素显示模式的分类 一. 块元素 特点： 内容独占一行 宽、高、内边距、外边距都可以设置 默认宽度是父级宽度的100% 它是一个容器盒子，里面可以放块级元素或者行内元素 ‘’最典型的块级标签 例如：‘,,,,,~’ 注意：文字类块级元素标签不能嵌套块级元素标签. （ 例如：‘,~’） 二. 行内元素（内联元素） 特点： 和相邻行内元素在一行上，一行可以显示多个 宽、高、内边距、外
元素分类/-块级元素
dmpnosvn28419的博客
08-30 773
元素分类 在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<a...
css元素显示模式（行内、块级、行内块）
lxllxl211的博客
01-29 1968
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变成块级元素_【CSS】块级元素
weixin_31925495的博客
02-01 1950
完整的框模型(Box Model) 不同的宽度、高度、内边距和外边距相结合，就可以确定文档的布局。大多数情况下，文档的高度和宽度由浏览器基于可用的显示区域和其他一些因素自动确定。1、元素框的最内部分是实际的内容。2、直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。3、边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。水平格式化1、width影响的是内容区的宽度，...
有关块行元素的理解
qq_40057364的博客
10-20 240
在html中绝大多数标签会被归属于行或块元素 1.块元素 **块元素**中，当标准信息流添加时，块元素将往下依次排序， 在块元素中**padding**和**border**可供设置上下及左右的值块的大小决定于设计者 块元素的**display**值为**block**，典型块元素为**div** 2.行元素 又称内联元素，当标准信息流添加的时候，行元素依旧在同一行内排列并不会按行 在行元素中**padding**和**border**并不能设置上下左右的值，行元素的高度由字体高度和内容决定 行元
css变成块级元素_设置标签的css样式代码为“display：block”，标签将变为块级元素。（ ）...
weixin_30635315的博客
02-01 1405
设置标签的css样式代码为“display：block”，标签将变为块级元素。( )答：对青藏高原常见垫状植物有( ? ? )。答：垫状点地梅 甘肃蚤缀、垫状棘豆 垫状驼绒藜 藏亚菊网络外部性导致马歇尔冲突的天平向着垄断的方向偏移。()答：√传说苏秦和张仪是同学，他们的老师是 。答：鬼谷子我们的高校是党领导下的高校,是中国特色社会主义高校。必须坚持以马克思主义为导，全面贯彻党的教育方针。要坚...
css变成块级元素_css中的块级元素是什么
weixin_40006965的博客
12-20 267
css中的块级元素就是指块元素，和其对应的是内联元素，它们都是html规范中的概念。块元素的特点是：1、总是在新行开始；2、行高、高度和边距可控制；3、可以容纳内联元素和其他块元素。环境：本文适用于所有品牌的电脑。(学习视频分享：)块级元素介绍：块元素又名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。块元素和内联元素的基本差...
【CSS】标签显示模式 ③ ( 标签显示模式转换 | 行内元素转换为块级元素 | 块级元素转换为行内元素 | 块级元素、行内元素转换为行内块元素 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-08 5163
一、标签显示模式转换 1、行内元素转换为块级元素 2、块级元素转换为行内元素 3、块级元素、行内元素转换为行内块元素
CSS的元素显示模式(块元素、行内元素、行内块元素和显示模式转换)
Bulut0907
01-28 4345
目录1. 块元素2. 行内元素3. 行内块元素4. 转换为块元素5. 转换为行内元素6 转换为行内块元素 1. 块元素 常见的有<div>、<ul>、<ol>、<li>、 特点如下： 独占一行 可以设置高度、宽度、外边距、内边距 宽度默认是父级的100% 里面可以放行内元素或块级元素 注意：文字类的块元素，如<p>、<h1> ~ <h6>，里面不能放块元素 2. 行内元素 常见的有<strong>、<b
怎么将块级元素标签改为行级元素标签
最新发布
07-11
要将块级元素标签改为行级元素标签，可以使用CSS的"display"属性来实现。以下是一种常见的方法： 1. 首先，确定要修改的块级元素标签，例如 `<div>`。 2. 在CSS样式表中，为该元素添加一个新的class或id选择器。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值