• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 全面了解行内元素与块级元素的区别

全面了解行内元素与块级元素的区别

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含行内元素,块级元素等相关知识,佚名 希望在学习及工作中可以帮助到您

首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。

块级元素:(以下列举比较常用的块级元素,详情可在w3cschool查询)

  1. <div>定义文档中的分区或节   
  2.   
  3. <h1>定义最大的标题   
  4.   
  5. <h2>定义副标题   
  6.   
  7. <h3>定义标题   
  8.   
  9. <h4>定义标题   
  10.   
  11. <h5>定义标题   
  12.   
  13. <h6>定义最小的标题   
  14.   
  15. <ul>定义无序列表   
  16.   
  17. <ol>定义有序列表   
  18.   
  19. <li>定义有序列表或无序列表的列表项目   
  20.   
  21. <dl>定义自定义列表   
  22.   
  23. <dd>定义自定义列表中的条目   
  24.   
  25. <dt>定义自定义列表中的项目   
  26.   
  27. <hr>创建一条水平线   
  28.   
  29. <p>定义段落   
  30.   
  31. <table>定义表格   
  32.   
  33. <td>表格中的标准单元格   
  34.   
  35. <th>定义表头单元格   
  36.   
  37. <thead>标签定义表格的表头   
  38.   
  39. <tr>定义表格中的行  

行内元素:(以下列举比较常用的行内元素,详情可在w3cschool查询)

  1. <a>定义超链接   
  2.   
  3. <b>字体加粗   
  4.   
  5. <span>定义在文档中的行内元素   
  6.   
  7. <img>向网页中插入题图像   
  8.   
  9. <input>输入框   
  10.   
  11. <small>小号字体效果   
  12.   
  13. <br>换行   
  14.   
  15. <big>字体加大加粗   
  16.   
  17. <strong>强调的语气   
  18.   
  19. <select>创建单选或多选菜单   
  20.   
  21. <textarea>定义文本域,多行的文本输入控件  

行内元素与块级元素的区别:

1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。

2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;

 块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。

3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;

 块

您可能想查找下面的文章:

  • 全面了解行内元素与块级元素的区别
  • 浅谈CSS块级元素与行内元素(内联元素)的区别和联系
  • 进一步理解CSS编程中的块级元素和行内元素
  • CSS行内元素和块级元素的居中实例分析
  • css行内元素padding,margin,width,height没有变化
  • 清除行内元素之间HTML空白的几种解决方案
  • css盒模型和块级、行内元素深入理解

相关文章

  • 2017-08-06CSS border-width 属性使用教程
  • 2017-08-06ie6 z-index不起作用的完美解决方法
  • 2017-08-06CSS3 border-image详解、应用及jQuery插件
  • 2017-08-06css固定表头、行头样式代码
  • 2017-08-06CSS禁止文字选择user-select应用
  • 2017-08-06纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中
  • 2017-08-06IE中关于使用innerHTML加入HTML代码的问题
  • 2017-08-06CSS去除列表默认边距的简单方法
  • 2017-08-06CSS清除浮动方法总结
  • 2017-08-06CSS3模拟动画下拉菜单效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS属性中Display与Visibility区别分析
    • CSS控制链接显示状态的CSS伪类
    • 很实用的 轻量纯css多级下拉菜单
    • FORM 不换行的方法
    • 深入剖析CSS弹性盒模型flex
    • css FF与IE兼容性总结
    • 格式png24透明底 多种解决png24格式图片在ie6中透明问题
    • 纯css3实现效果超级炫的checkbox复选框和radio单选框
    • CSS3动画制作的简单示例
    • 今天学到的CSS最新技术(与图片背景相关)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有