display中有个神器叫inline-block

AD:

话说 。。。

就今天我们来聊聊 HTML 的 元素

[我就瞎说说,你们随便听。。]

在html标签中其实可以分类的,我呢把元素分为 三类 (其实不止,对于初级学习的人来说三类够用)

块元素 、 内联元素 、 文本元素

什么是块元素?

想一下在使用html 用div布局的时候明明写了两个div 一个宽 100像素 一个宽 50像素,为什么他们还是不在一行?

其实这就是块元素的特点 :默认宽100%,独占一行,支持控制宽高的属性。

默认是块元素的标签有 div、p、h1~h6等等

内联元素有啥特点呢? 不独占一行,没有宽高也不支持设置宽高属性(包括padding和margin)

那没有宽高不就啥也看不见嘛?内联元素的宽高取决于自己包住的内容打宽高 就是 自己的孩子。

通常内联元素包着文字,常用的内联标签有 a、span等等

文字元素呢就不说了吧,但是为什么要把文字包含在标签的分类里?

待会就回讲到。

为啥要分块和内联 哔哩哔哩 。。 的

控制着一个标签是什么元素的 css 属性 为 display

这个属性控制着标签是什么元素。

也就是说不管是什么标签,我想让他变成什么元素就可以随便转换。

我可以让你一个 a 标签拥有 div 的属性(块元素)

只要给 a 添加css display:block; 就可以了

这会对你有很大的帮助,比如你经常看到一些导航的链接会有宽高,那都是给a链接上了块元素。

当然把一个 div 变成内联元素用 display:inline; 就OK了

你是不是以为我要把 display 的属性介绍个遍,你大错特错了,像我这么懒得人能敲到这已经说明不是一天完成的事情了。。。

我就重点讲下 display:inline-block; 这个属性。

这对我来说觉对是个神器。

学名叫 “行内块元素” 是 css2.1增加的属性。

什么是行内块元素?

就是不换行还支持宽高属性 。。。 好理解一点就可以认为变成了文本。

为啥呢?当一个 标签变成 行内快元素 时 文本居中就奏效了 0.0

细想一下是不是很有用处?

发表评论

关注我们