CSS的块级元素和内联元素,以及float

说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层。


最近在系统地学习HTML5,感觉补上了好多缺失的知识。

例如:

锚点定位其实可以通过 id 来实现;

CSS 使用 !important 来设置强优先级;

子元素只能继承父元素的字体、颜色等外观,但默认不能继承布局样式。如果必须要继承,需要让具体的属性设为inherit,如:border: inherit;

text-transformuppercaselowercasecapitalize等选项。

font-variant  有small-caps 这个选项,还可以normal 来复原。

displayfloat!!! -- 这是本文的主题。

首先,HTML 中有两类特别的元素:块级元素(block)内联元素(inline)。其实还有一种 内联-块级元素(inline-block)

区别在于:

块级元素(block)  可以有效地设置 width 和height,且自带换行。 如<div>。

内联元素(inline) 不能有效地设置 width 和height,且没有换行。  如<span>。

内联-块级元素(inline-block)。则可以有效地设置 width和height, 但没有换行。 如<img>。

举个例子:

 <html>

 <head>
<meta charset="utf-8">
<title>Demo for "block"/"inline"/"inline-block"</title> <style>
/*为div设置尺寸*/
div, span {
width: 200px;
height: 200px;
}
/*为div设置颜色:红黄绿*/
div#a {
background: red;
}
div#b {
background: orange;
}
div#c {
background: green;
}
/*为span设置颜色:灰*/
span {
background: grey;
}
</style>
</head> <body>
<div id="a">
我是div#a
</div>
<div id="b">
我是div#b
</div>
<div id="c">
我是div#c
</div> <span>我是SPAN 1,按说我的尺寸就是内容的尺寸</span>
<span>我是SPAN 2,按说我的尺寸就是内容的尺寸</span> </body> </html>

显示如下:

我是div#a
我是div#b
我是div#c

我是SPAN 1,按说我的尺寸就是内容的尺寸 我是SPAN 2,按说我的尺寸就是内容的尺寸

能够明显看到:块级元素div是有宽度和高度,且自带换行;而内联元素span的宽度和高度取决于其内容的宽度和高度,且没有换行。

至于 内联-块级元素img 就不示意了。

CSS 可以将块级元素 和 内联元素 互换!!! -- 具体是通过display 属性来实现的。

先看看如何将 块级元素 变为 内联元素

div#a {
/*其它设置省略*/
display: inline;
}

结果如下:

我是div#a
我是div#b
我是div#c

我是SPAN 1,按说我的尺寸就是内容的尺寸 我是SPAN 2,按说我的尺寸就是内容的尺寸

可以看到 div#a 的宽度和高度已经不是200px啦,但是仍然具备换行  -- 这个稍后说。

再来看看 span 如何变成 块级元素

span {
display: block;
width: 200px;
height: 200px;
}
 

结果如下:

我是div#a
我是div#b
我是div#c

我是SPAN 1,按说我的尺寸就是内容的尺寸 我是SPAN 2,按说我的尺寸就是内容的尺寸

可以看到 span已经变成了块级元素,能够设置宽度和高度,还自带换行了。

现在,再来说说 div 变成内联元素仍然换行的问题 -- 只说解决方案,因为我也不知道内部原理是怎么回事。

解决方案就是: float

我的理解,这货的作用就是:

如果设置了 float: left ,就是跑到下一个元素的左边,或者说把下一个元素拽到自己的右边;【错误的】

如果是 float: right, 就是跑到下一个元素的右边,而且贴近父元素的边界。【错误的】

就是漂浮起来,位居其它元素之上,不与它们争夺地盘!!! 但是,因为我们是俯视它们,所以漂浮起来的元素会遮挡住它下面的元素!!!

-- 变成浮动的,飘来飘去,虽然不再霸道的占据整行,但仍然有自己的尺寸。【错误的】

这里只示意一下(div恢复block,span恢复inline):

div#b {
background: green;
float: left; /*我的右边没有换行*/
}

结果如下(div#b 浮空了,div#c就跑它下面去了,所以看不见啦 -- 但文字跑不过去,就与SPAN-1的重合了):

我是div#a
我是div#b
我是div#c

我是SPAN 1,按说我的尺寸就是内容的尺寸 我是SPAN 2,按说我的尺寸就是内容的尺寸

我们可以改变一下div#b的宽度和高度,将其设为100px,然后就能看到没有被遮住的div#c啦:

我是div#a
我是div#b
我是div#c

我是SPAN 1,按说我的尺寸就是内容的尺寸 我是SPAN 2,按说我的尺寸就是内容的尺寸

其实float 有个特性:如果前一个元素也是float的,那二者会水平并列(除非一行装不下,那会换行);如果前一个元素不是float的,那float的会位于前一个元素的下面。

那么,当多个div都浮动的时候,会发生什么?--彼此连接的同时覆盖后面的非float元素!!!

但这未必是我们想要的。

拿上一个例子来说,如果我不想让div#b覆盖div#c,应该怎么做?

很简单, div#c 的clear设为right即可(只是用来演示,如果真要设置的话,b和c都设为float即可并列),效果如下:

我是div#a
我是div#b
我是div#c

我是SPAN 1,按说我的尺寸就是内容的尺寸 我是SPAN 2,按说我的尺寸就是内容的尺寸

这里有个关键:clear是作用于自身,就是说是决定自己某侧浮动与否

这有点像一些人的性格:不管外界如何,我坚持我的原则;如果我不认同你,我就离开,哪怕你很牛逼(float)。

上一篇:FreeRTOS例程4-串口DMA收发不定长数据


下一篇:DMA控制器8237A