-
2021-08-04 09:24:25
一、块元素转行内元素：display:inline
二、行内元素转块元素：display:block
div{
display: inline;
/*无效
width: 500px;
height: 500px;
*/
background-color: red;
}
p{
display: inline-block;
}
span{
display: block;
width: 400px;
height: 300px;
background-color: blue;
}
块内元素转行内元素行内元素转块元素
三、块和行内元素转行内块元素：display:inline-block
div,a,span,strong{
display: inline-block;
width: 200px;
height: 200px;
background-color: yellow;
text-align: center;
vertical-align: top;
}
块元素转行内块元素span行内元素转行内块元素
strong行内元素转行内块元素
CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性
样式表书写位置 内嵌式写法
css盒子模型的深入理解，在块级、行内元素的区别和特性
css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...
04. H5标签有哪些？行内元素有哪些？块级元素有哪些？空(void)元素有哪些？行内元素和块级元素有什么区别？你工作中常用标签有什么？
4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...
CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片
CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...
1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径
1 background(复合属性)与font(复合属性): background: 颜色 图片的链接 是否平铺 背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...
line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现
>原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...
* CSS 视觉格式化(基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框)
前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...
行内元素(inline标签)设置了行高为什么不生效，还是表现为父盒子的行高？行内元素行高问题终极解释
最近在看张鑫旭大佬的,读到5.2.4 内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...
内联(行级)元素不能设置margin-top
内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-righ ...
随机推荐
Spring学习记录(十)---使用FactoryBean配置Bean
之前学了,配置bean可以用普通全类名配置.用工厂方法配置,FactoryBean又是什么呢 有时候配置bean要用到,IOC其他Bean,这时,用FactoryBean配置最合适. FactoryB ...
现在, Delphi 的多线程已经非常易用了!
先看一个非多线程的例子, 代码执行时不能进行其它操作(譬如拖动窗体): {自定义方法: 在窗体上绘制...} procedure MyMethod; var i: Integer; begin ...
[Redux + Webpack] Hot reloading Redux Reducers with Webpack
Webpack will hot reload the component, but the reducer we need hard refresh. To sovle the problem, g ...
Python 项目实践二(下载数据)第三篇
接着上节继续学习,在本章中,你将从网上下载数据,并对这些数据进行可视化.网上的数据多得难以置信,且大多未经过仔细检查.如果能够对这些数据进行分析,你就能发现别人没有发现的规律和关联.我们将访问并可视化 ...
前端入门4-CSS属性样式表
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: MD ...
[转载]oracle的加密和解密
加密函数 create or replace function encrypt_des(p_text varchar2, p_key varchar2) return varchar2 isv_tex ...
webpack config
[webpack config] 1.entry Simple rule: one entry point per HTML page. SPA: one entry point, MPA: mult ...
[na]tcp&;udp层各协议小结
TCP和UDP 传输层功能: 可靠性:序列号.确认号&flag位 有效性:win滑动窗口 这篇目录索引: Tcp可靠性 Tcp流控 Tcp拥塞控制 Tcp运输连接管理 TCP的可靠性和流控 为 ...
Order By 问题集合
问题(一):Order By 多个参数排序 在做多字段的排序的时候我们经常会会用到该语句. 所以多参数排序是从左到右的局部排序,修改的范围只有前面参数(几个参数)相同的情况下在排序. select * ...
input file实现多次上传文件(不会覆盖上次上传的文件)
html原生的file多选控件:
更多相关内容 -
给行内块元素设置行高无法垂直居中.zip
2019-10-25 16:58:21给行内块元素设置行高无法垂直居中 https://mp.csdn.net/mdeditor/101070653# -
一文搞懂行内元素、块元素、行内块元素
2022-01-23 10:39:09介绍了HTML中的行内元素,块元素,行内块元素的区别,以及如何进行相互转换。展开全文文章目录
前言
行内元素,行内块元素是html中的一个基本概念,想要进行良好的页面布局,就需要理解什么是行内元素,块元素,并理解他们如何进行转换
考
一、了解各个元素的概念
1.概念：
可以将web页面中的一行，认为是一块领地,每个标签是一个首领 行内元素: 就是在web页面布局时可以与其他元素一块共享一行的元素 块元素： 就是每一个元素,占有一行,即使自己的内容不够多也不让其他元素侵犯自己的底盘 行内块元素： 块元素经过一系列转换,终于被征服,所以就变成了行内块元素,与行内元素没有了本质的区别2.举个例子：
<!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"> <title>Document</title> <style> * { /* 这里是将每个元素外间隔为3像素,背景颜色变色方便我们观察 */ margin: 3px; } span,p{ background-color: aquamarine; } </style> </head> <body> <span>Hello,我是行内元素</span> <span>Hello,我是行内元素</span> <p> 我是p标签,我是块元素 </p> <p> 我是p标签，我是块元素 </p> </body> </html>3.样式展示
如图所示,占据一行的就是块元素,一行有两块的就是行内元素
二、如何将块元素变为行内块元素？
1.修改css中的dispaly属性
相对于刚才,给p标签加入了一个display: inline-block; 就是他占据一行变为了,占据一部分。代码如下：
<!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"> <title>Document</title> <style> * { /* 这里是将每个元素外间隔为3像素,背景颜色变色方便我们观察 */ margin: 3px; } span,p{ background-color: aquamarine; } p { display: inline-block; } </style> </head> <body> <span>Hello,我是行内元素</span> <span>Hello,我是行内元素</span> <p> 我是p标签,我是块元素 </p> <p> 我是p标签，我是块元素 </p> </body> </html>图示：
2.在进行样式选择的时候加入浮动
代码如下：
<!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"> <title>Document</title> <style> * { /* 这里是将每个元素外间隔为3像素,背景颜色变色方便我们观察 */ margin: 3px; } span,p{ background-color: aquamarine; } p { float: left; } </style> </head> <body> <span>Hello,我是行内元素</span> <span>Hello,我是行内元素</span> <p> 我是p标签,我是块元素 </p> <p> 我是p标签，我是块元素 </p> </body> </html>图示：
三、将行内元素变为块元素？
1.代码示例
使用的还是display这个属性<!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"> <title>Document</title> <style> * { /* 这里是将每个元素外间隔为3像素,背景颜色变色方便我们观察 */ margin: 3px; } span,p{ background-color: aquamarine; } span{ display: block; } </style> </head> <body> <span>Hello,我是行内元素</span> <span>Hello,我是行内元素</span> <p> 我是p标签,我是块元素 </p> <p> 我是p标签，我是块元素 </p> </body> </html>2.效果展示
总结
清楚块元素、行内元素、行内块元素的概念,可以是我们更规范的布局,css样式表将块元素修改为行内块元素属于css知识,后续会在css专栏细说,大家在这里知道这三种元素的区别就好。
-
块元素、行内元素、行内块元素
2022-01-10 18:38:37块、行内、行内块元素1. 块元素2. 行内元素3. 行内块元素4. 块、行内、行内块元素演示：5. 元素显示模式转换 1. 块元素 （1）常见的块元素有： div、h1~h6(标题标签)、p(段落标签)、ul、ol、li （2）块元素的特点： ...展开全文1. 块元素
（1）常见的块元素有：
div、h1~h6(标题标签)、p(段落标签)、ul、ol、li、（canvas）
（2）块元素的特点：
1、独占一行
2、宽度默认是父级元素的宽度（100%）
3、宽度、高度、内外边距都是可以改变的
4、块级元素里面也可以放行内、块、或者行内块元素2. 行内元素
（1）行内元素有：
a、span、strong/b [加粗]、em/i [倾斜]、del/s [删除]、ins/u [下划线]
（2）行内元素的特点：
1、相邻行内元素在一行中显示，一行可以放置多个行内元素
2、宽度是文本内容的宽度
3、设置宽度和高度无效 [可以设置内外边距]
4、行内元素可以放文本内容或者其他行内元素3. 行内块元素
（1）行内块元素有：
img、input、td
（2）行内块元素的特点：
1、相邻行内块元素在一行中显示
2、行内块元素的宽度为本身内容的宽度
3、可以设置行内块元素的宽度和高度4. 块、行内、行内块元素演示：
1.代码编写：
<style> div { background-color: limegreen; padding: 20px; margin: 10px; } span { background-color: mediumpurple; padding: 5px; margin: 0 10px; } input { background-color: palevioletred; height: 10px; } </style> <body> <div>hello</div> <span>你好呀，王耶啵！</span> <label for="name">文本框：</label> <input type="text"> </body>2.显示效果：
5. 元素显示模式转换
1、转换为块级元素
a { display: block; }2、转换为行内元素：
div { display: inline; }3、转换为行内块元素：
span { display: inline-block; }
-
行内元素和块元素以及行内块元素的特点
2021-08-04 05:52:55一、背景初学html，接触很多标签、、、、等，当写出简单的小页面的时候，例如仅仅是一篇带有标题的文章，标题标签...HTML标签一般分为块标签和行内标签两种类型，也可以称为块元素和行内元素。上面举例中的标签就...展开全文一、背景
初学html，接触很多标签
、
、、
- 、
标签单独一行，不管后面有多大的空间；
标签中使用多个给某些词做强调，但是却和
中的其他内容同一行，由此，会思考为什么和
会有这种的不同？
二、标签的类型(显示模式)
想要知道为何不同，得先了解HTML标签的类型。
HTML标签一般分为块标签和行内标签两种类型，也可以称为块元素和行内元素。
上面举例中的
标签就是典型的块元素，标签就是一个行内元素。块元素和行内元素的具体特点如下：
三、块级元素(block-level)
块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。
块级元素有以下几个特点：
总是另起一行(特立独行)
可以设置其宽度、高度，内外边距
在不手动设置宽度的情况下，宽度默认为所在容器的100%(即容器宽度)
可以容纳行内元素和其他块元素。
常见的块级元素有：
/~
/
/
/ 等，其中是最常用最典型的块级元素。特殊：文字类的块级元素不能放块元素，例如
/
~
/
/*块元素div*/
div{
width: 200px; /*宽高、外边距、内边距 都有效*/
height: 30px;
border:1px solid blue;
margin:20px;
/* padding:10px;*/ /*此处内边距会引起div宽高的变化，为了比较更直观就注释了*/
line-height: 30px;
}
使用以上样式给下面块元素div设置
我是块元素2我是块元素2效果图见文末。
四、行内元素(inline-level)
行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小(例如文字和图片)，所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。
行内元素的特点：
总是和相邻的行内元素在同一行上(物以类聚)
设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
默认宽度是他自身内容的宽度。
行内元素只能容纳其他行内元素或者文本。
特殊：a比较特殊，可以放块级元素，但是链接里面不能再放链接。
/*行内元素span*/
span{
width:200px; /*宽度设置无效*/
height: 100px; /*高度也无效*/
border:1px solid red;
}
下面是Html样式
行内元素1
行内元素2
行内元素3
我是行内元素行内元素行内元素4
效果图见文末
五、行内块元素(inline-block)
普遍的规则里总有那么几个不一样的，在行内元素中就有那么几个特殊标签，比如//
,可以给他们设置宽高、对齐属性，我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。行内块元素的特点：
和相邻行内元素在同一行，但是之间会有空白缝隙。
默认宽度是他本身内容的宽度。
宽度、高度、行高、外边距以及内边距都可以手动设置。
样式：
/*行内块元素input*/
input{
width: 200px; /*宽高均有效*/
height: 30px;
}
结构：
综合效果图如下：
六、标签显示模式转换(display)
既然标签有不同的显示模式，就会有相应的转换办法以应对各种需要。
display正是我们想要的。
块元素——>行内元素 ： display:inline;
行内元素——>块： display:block;
块、行内元素——>行内块： display: inline-block;
总结
总结完他们之间的特点更加清晰，记得更牢，首先在以后遇到当给一个元素设置的宽高无效的时候这就是一个原因，使用display即可解决。
-
块级元素，行内元素，行内块元素
2022-02-10 16:45:54常见元素类型有：块级元素、行内元素、行内块元素 。（这里所说的元素，就是指标签） 一.块级元素： 块级元素独占一行，不和其他元素并排；可以设置宽高和上下外边距；不设置宽度时默认宽度 100%；可以容纳其他块... -
行内元素及行内块元素的margin和padding属性使用和同行行内或行内块元素位置微调
2021-11-18 13:02:32行内块和行内元素的margin和padding 属性使用 行内元素可以使用 margin-left 和 margin-right 行内元素可以使用 padding-left ,padding-right ,padding-top,padding-bottom 行内块元素margin 和padding都可以使用 ... -
块、行内、行内块
2020-07-18 14:04:47文章目录一、块元素block二、行内元素inline三、行内块inline-block 一、块元素block 块元素——div、p、h1-h6、ul、ol、li 所有的块级元素独占一行显示 可以设置宽高 二、行内元素inline 行内元素——span、a、... -
CSS学习05：块元素、行内元素、行内块元素
2022-03-23 21:28:46常见的行内块标签： 行内块元素的特点： 三种元素的总结 1、块元素 常见的块元素： <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> <div>是最常见的块元素 ... -
html——行内元素、块元素、行内块元素
2021-06-11 15:39:39行内元素：span ,a, ,strong , em, del, ins。特点：在一行上显示；不能直接设置宽高；元素的宽和高就是内容撑开的宽高。...行内块元素(内联元素)：input img。特点：在一行上显示，也可设置其宽高。div {wid... -
css块元素与行内元素大全,行内块元素转换
2022-03-16 19:30:50会自动换行，可以包含行内元素和其他块级元素，可以设置宽，高，上下左右边距，默认 css 属性 display 的值为 block 块元素(block element) address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表... -
块元素，行内元素，行内块元素及相互转换
2022-03-22 20:45:27块元素常见级特点： div 块 p 段落 ul li 有序列表 ol li 无序列表 dl dd dt 自定义列表 ... 可嵌套行内元素和行内块元素（注：p不可包含本身和div和标题标签） 行内元素常见级特点： a 链接 span 块 strong... -
行内块元素的间隙解决办法
2022-03-10 14:50:31在默认情况下，行内块元素（例如img、input）都存在间隙问题，例如说div中不写宽高的时候，给了个粉色的背景色，方便能看出div和图片之间的间隙，这时嵌套一个img，由图片撑开div，这时会明显的看到div与图片在下面... -
行内元素、块元素、行内块元素的区别
2021-11-23 21:24:11行内元素、块元素、行内块元素的区别一、前言1.行内元素2.块元素3.行内块元素 一、前言 HTML将元素分类方式分为行内元素、块元素和行内块元素三种。这三者是可以互相转换的，使用display属性能够将三者任意转换。 ... -
浅谈html标签的显示模式(块级标签,行内标签,行内块标签)
2020-12-14 05:08:08今天讲课的时候，讲到了html中的标签的显示模式，大致分为块级标签和行内标签。那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用，比如宽、高、水平居中等，其实这个属性的使用只有在块级标签上使用... -
消除行内块元素水平间隙的方法
2022-02-01 13:09:53水平间隙一般是指行内块元素连续排列造成的水平间隙，示例如下： <div style="width: 250px; height: 100px; background: blue;"> <div style="width: 50px; height: 50px; background: red; display: ... -
块元素,行内块元素,行内元素(水平垂直居中)
2021-06-13 05:14:49这里将告诉您块元素,行内块元素,行内元素(水平垂直居中),具体操作方法:1.块级元素水平垂直居中方法11 2 position: absolute/fixed;3 left:0;4 top:0;5 right: 0;6 bottom: 0;7 margin:auto;方法2:1 2 position: ... -
块级元素和行内元素，行内块元素
2020-02-01 21:03:56在学习 CSS 的时候发现，发现有些...又称为内联元素，行内元素的大小是靠本身内容的大小，宽高都设置无效。 常见的特点如下： 与其他行内元素并排 设置宽高无效 默认的宽度就是文本内容的宽度 水平方向的 paddin... -
专题 | 块级元素 行内元素 行内块元素
2021-08-27 11:17:10换行 块级元素独占一行，即使一行有剩余空间，自己不需要，也不让别人用 1111 2222 只有元素浮动/定位或把自己设为行内元素/行内块元素才会一行有多个div 浮动 定位 ... -
行、块、行内块标签
2021-05-11 10:56:36HTML的俩类标签：行标签、块标签 前言： 我发现一直以来，我进入了一个误区，我对于行标签和块标签首先定义就搞错了 -
行内、行内块、块级的区别
2020-08-23 16:30:51一、块元素block div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre HTML5：header、section、article、footer等等 块级元素的特点 1.块级元素独占一行... -
css布局技巧-行内块元素的巧妙运用
2022-02-13 21:51:47css布局技巧-行内块元素的巧妙运用，简化页数栏制作。 -
块元素，行内元素，行内块元素及其元素转换
2022-04-09 21:14:42html块级，行内，行内块元素特点及其转换 -
HTML中块级元素和行内元素以及行内块元素详解
2021-10-10 13:28:13你是否有以下困惑： 为什么有些标签能够设置...---因为在html中块级（block）元素和行内块（inline-block）元素可以设置宽度和高度 ---行内（inline）元素不可以设置宽度和高度 例如: <html> <style> -
块元素 行内元素 行内块元素各自的特点
2021-04-18 08:18:24块元素 行内块元素 行内元素的特点。 一、块元素 block 自已独占一行。 宽度，高度，外边距，内边距都可以自己控制。 宽度默认为是父元素的100%。 是一个容器及盒子，里面可以放行内或者块元素。 二、行内元素 ... -
HTML中块级元素，行内元素，行内块元素
2022-04-01 22:07:01行内块元素：具有行块儿二象性 常见块元素：div、p、ul、ol、li、h1~h6、table、dl、dt、dd、hr - 水平分隔线、fieldset - form控制组 常见行内元素：span、a、strong、b、label、i、文本相关元素基本都是（除了p... -
HTML基础知识（块级标签，行内标签，行内块标签）
2021-06-09 07:20:52其中还有一种结合两种模式有点的显示模式：行内块元素：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；行内标签：包含a、span、em、strong、b、i、u、label、br；特点：可以多个... -
行内块元素的对齐
2021-08-10 22:07:36行内块元素的对齐 场景 今天在工作的时候想要将盒子对齐，将div设置成了inline-block，结果盒子并没有对齐 <div class="box"> <div class="first child"></div> <div class="second child...
