标签分类

最新推荐文章于 2022-01-25 15:50:57 发布

原创最新推荐文章于 2022-01-25 15:50:57 发布 · 473 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

CSS 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了HTML中的行级元素、块级元素和行级块元素的概念及特点。行级元素如span、a等，不占据整行，可通过CSS调整内置属性；块级元素如div、p，独占一行并可自定义宽高；行级块元素结合两者特性，可调整宽高且内容决定大小。通过display属性可转换元素类型，解决图片间隙问题，理解元素的布局行为对于前端开发至关重要。

标签的分类（归类）基本的

1）行级元素，也叫内联元素 inline
特点 A 内容决定元素所占位置
	 B 不可以通过 CSS 改变宽高
例 span，strong，em，a，del
行级元素自带 CSS 属性，可更改自带属性
span 自带隐藏属性 display:inline; 可以通过改成 block 变成块级元素

2）块级元素，block
特点 A 独占一行
 	 B 可以通过 CSS 改变宽高
例 div，p，ul，li，ol，form，address

3）行级块元素 inline-block
特点 A 内容决定大小
	 B 可以改变宽高
我们可以通过 display 更改元素属性，如果写成 display:none;元素就没有了
<img src = “”> //一般只设置宽或高，另外一个就等比例缩放了
例：解决图片之间有缝隙的 bug
上面这种解决方法不好，在上传到线上的时候就不准了。
凡是自带 inline 特效的元素，都有文字特性，有文字特性就会被分割
写成<img scr = “”><img scr = “”><img scr = “”>这样就可以解决了（在一行写，并且
不写空格），写成一行，图片间的空格就没有了
原理：在代码上传服务器时会进行两种压缩方法，A 字符压缩（如把 img 用 A 代替）；
B 去空格，去回车