falost 发表于 2016-3-13 01:24:34

行内元素和块级元素居然差这么多!

行内元素和块级元素大家都很熟悉啦,真的熟悉吗?比如行内元素的什么样式是写了也不起效的?大神们当然知道啦,但是没有经验的前端小白们还是只能在发现的时候现查资料。
所以,不如我们今天简单的来说说这两种元素,我们只列出常用的,不常用的就不放在这里介绍了。看表格:

接下来,我们再来说说css中这两种元素的常用属性。
我们用四个元素做代表示例
html:<div>我是块级元素div</div>
<p>我是块级元素p</p>
<a href="#">我是行内元素a</a>
<span>我是行内元素span</span>
float 浮动
当我们给所有元素 float: left;之后发现变成了这样,而行内元素则以区块block的形式表现。不论是行内元素还是块元素。但它的左边还是不允许存在任何元素与之同行显示,哪怕其它的元素的代码在前,除非也给前面的元素加上float后,才允许同行显示。

width和height 宽高
当给这两种元素加上同样的宽高后,块级元素发生了变化,而行内元素并没有任何变化。

证明了行内元素不会应用宽高的属性,但行内元素的高可以通过line-height控制与上下元素的距离。



margin和padding
我们先试一试margin,当我们给所有元素相同的margin值时发现行内元素只拥有左右margin的值,而上下margin则没有生效。


接着我们再试验padding,这个样式更怪,左右padding生效,但是上下padding也没有生效,只是它的背景颜色向上下扩展了,但没有占据位置。所以这就是为什么有的同学在写行内元素样式的时候发生的布局问题。


小扩展display:inline-block;行内块。
它是将对象呈递为行内元素,但是对象的内容作为块级元素。旁边的内联对象会在同一行内,允许空格。 应用这个特性的元素会周围元素保持在同一行,但可以设置高度和宽度。


今天小六分享的内容,各位前端客们get到了么?欢迎更多前端客们加入进来,对每天推送的内容进行点评、纠错,如果你有想要与大家分享的前端技巧,欢迎给前端客投稿(投稿地址:qianduanKJ@aliyun.com)。

关注我们的微信号:
页: [1]
查看完整版本: 行内元素和块级元素居然差这么多!