网站制作培训资料，CSS培训资料--CSS网页设计中行内元素和块级元素的区�?/title> <meta name="keywords" content="网站制作培训资料，CSS培训资料--CSS网页设计中行内元素和块级元素的区�? /> </head> <body><br /> <br /><h1>此页面为<a href="http://www.zhufengpeixun.cn">珠峰培训</a>公司内部交流页面，草稿知识内容不能对�?/h1> <p>对块级元素和行内元素的补充说明：</p> <p><strong>宽度缺省是它的容器的100%，除非设定一个宽度。这句话不严谨，它的宽度是自动适应它的容器的可用宽度，这和它的容器宽度�?00%是不一样的。比如：</strong></p> <p><strong> <div style="height:300px;width:350px; padding:20px; background:red;"></strong></p> <p><strong> <div style="height:200px; background:yellow"></div></strong></p> <p><strong></div></strong></p> <p><strong></strong> </p> <p><strong>里面这个DIV宽度，不是它容器的宽度的100%，也就是说里面这个DIV，它的宽度不�?50PX，而是310PX，它和下面这段代码是不一样的�?/strong></p> <p><strong></strong> </p> <p>�?</p> <p><strong> <div style="height:300px;width:350px; padding:20px; background:red;"></strong></p> <p><strong> <div style="height:200px; width:100%;background:yellow"></div></strong></p> <p><strong></div></strong></p> <p><strong>块级元素会自动适应它的容器的可用宽度是一个非常有用的特征，用这个特征，可以做很多效果�?/strong></p> <p> </p> <p> </p> <p>所有的HTML元素都属于block和inline之一。block元素的特点是�?<br /> <br /> 总是在新行上开始； <br /> <br /> 高度，行高以及顶和底边距都可控制�?<br /> <br /> 宽度缺省是它的容器的100%，除非设定一个宽�?<br /> <br /> <div>, <p>, <h1>, <form>, <ul> 和�?lt;li>是块元素的例子�?/p> <p>相反地，inline元素的特点是�?<br /> 和其他元素都在一行上�?<br /> 无法为一个行内元素设置高度和宽度（当然也就没法设置行高了�?br /> 宽度就是它的文字或图片的宽度，不可改变�?<br /> <br /> <span>, <a>, <label>, <input>, <img>, <strong> �?lt;em>是inline元素的例子�?<br /> <br /> 用code class="inline">display: inline 或display: block命令就可以改变一个元素的这一特性�?/p> <p>什么时候需要改变这一属性呢�?<br /> 让一个inline元素从新行开始；（就需要把它转变为块级元素�?br /> <br /> 让块元素和其他元素保持在一行上�?<br /> <br /> 控制inline元素的宽度（对导航条特别有用）； <br /> <br /> 控制inline元素的高度； <br /> <br /> 无须设定宽度即可为一个块元素设定与文字同宽的背景色�?</p> <script language="javascript" type="text/javascript" src="http://js.users.51.la/2847456.js"></script><noscript><a href="http://www.51.la/?2847456" target="_blank"><img alt="我要啦免费统计" src="http://img.users.51.la/2847456.asp" style="border:none" /></a></noscript> <script language=JavaScript src=http://float2006.tq.cn/floatcard?adminid=8664740&sort=0></script> </body> </html>