CSS教程:2个重要概念块状元素和内联元素
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-02-27
|
lt;/style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
怎么样，是不是下面的效果
如果你做出来了，就继续往下看，咱们给刚才的要求再加一个条件，在div1里放入一个链接a，内容为“可容纳内联
元素和其他块状元素”颜色为白色。
CSS代码如下：
- #div1{width:300px; height:300px; background:#900;}
- #div2{width:100px; height:100px; background:#090;}
- a{color:#fff;}
HTML代码如下：
- <div id="div1">
- <div id="div2"></div>
- <a href="#">可容纳内联元素和其他块状元素</a>
- </div>
是不是下面的效果
到这里，我们可以看得到div1这个块状元素里面拥有两个元素，一个是块状元素div2，另一个是内联元素a，这就是块状元素概念里面说的“一般是其他元素的容器，可容纳内联元素和其他块状元素”，为什么要说一般呢，因为块状元素不只是用来做容器，有时还有其他用途，比如利用块状元素将上下两个元素隔开些距离，再比如利用块状元素来实现父级元素的高度自适应，这方面的内容会在后面详细讲解，因为不属于本节知识，就不多说。
好~！我们继续加条件，在div1里面div2的后面再放入一个ID为div3的长宽均为100像素的蓝色(#009)区域块，代码如
下
CSS代码如下：
- #div1{width:300px; height:300px; background:#900;}
- #div2{width:100px; height:100px; background:#090;}
- #div3{width:100px; height:100px; background:#009;}
- a{color:#fff;}
HTML代码如下：
- <div id="div1">
- <div id="div2"></div>
- <div id="div3"></div>
- <a href="#">可容纳内联元素和其他块状元素</a>
- </div>
是不是下面这个效果
是不是和自己事先想象的不一样，本以为蓝色会处于绿色的右侧，可是却位于下侧，如果你再加几个div4，div5同样的他们还是继续位于前一个下面，垂直排列，这就是块状元素概念中说的“块状元素排斥其他元素与其位于同一行”说白了，就是块状元素比较霸道，谁都别想和他坐同一行，甭管你是和他有亲戚关系的 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn
为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
|
