当前位置: 主页 > 建站教程 >

CSS块级元素与行内元素的对比

发布时间:2017-10-09 10:14:28 作者:admin
  所有的HTML元素都属于block和inline之一,因此运用好块级元素和内联行内元素对于提升网站设计能力有积极的作用。

block块级元素的特点是:

1、总是在新行上开始;
2、高度,行高以及顶和底边距都可控制;
3、宽度缺省是它的容器的100%,除非设定一个宽度
4、<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

inline行内元素的特点是:

1、和其他元素都在一行上;
2、高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。
3、<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

块级元素和行内元素的转换

用display: inline 或display: block命令可以使块级元素和内联元素之间进行互换。
行内元素转换为块级元素场合
1、当需要控制inline元素的宽度(对导航条特别有用)、高度时使用这一特性;
2、让一个inline元素从新行开始;
3、出处精简代码的需要,例如:网站头部的logo图片和导航栏在同一行时,而又不想把<img>标签外层再加一个DIV,可以将<img>转化为块元素。
4、当对行内元素inline使用float属性时,行内元素自动转换为块级元素,而不再使用display: inline 或display: block命令进行人为的改变。
块元素转换为行内元素场合
当让块元素和其他元素保持在一行上;
分享到:

最新发布MORE

  • 外贸网站源码建站程序_青锋建站
  • 外贸建站如何增加询盘_青锋建站
  • html+css学习制作静态网页
  • 如何做好外贸网站建设_青锋建站
  • 外贸网站建设时域名这样选择才好_青锋建站
  • 论外贸网站建设的重要性_青锋建站
  • 外贸网站建设这样做才好_青锋建站
  • 网站建设中用于WEB开发的几种编程语言_石家庄青锋建站
  • 为什要选择PHP编程语言进行网站开发_石家庄青锋建站
  • 网站banner设计_网站建设
  • 石家庄网站建设   石家庄网络公司   网站建设教程   网络营销技巧   石家庄SEO   建站分站   石家庄网络营销   网站案例   青锋工作室
  • 联系电话:15632335515   QQ:943703539
  • 联系地址:石家庄高新区汾河道69号
  • Copyright © 2016-2026 青锋建站 版权所有
  • 15632335515