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

所属分类: 网页制作 / CSS 阅读数: 345
收藏 0 赞 0 分享

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

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

XML/HTML Code复制内容到剪贴板
  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查询)

XML/HTML Code复制内容到剪贴板
  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上下无效,左右有效;

 块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。

4.块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;

 行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

以上这篇全面了解行内元素与块级元素的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

http://www.cnblogs.com/duzheqiang/archive/2016/07/17/5679378.html

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多