zoukankan      html  css  js  c++  java
  • 块级元素和行内元素的区别

    标准文档流: 是指在不使用其它的排版和定位相关的特殊CSS规则时,各种元素的排列规则,换语话说CSS规定的网页元素默认的排列方式.



    块级元素
      从页面布局和显示外观的角度看,一个页面的布局就类似一篇报纸的排版,需要分为多个区块,大的区块再细分为小区块,块内为多行逐一排列的文字、图片、超链接等内容。这些区块一般称为块级元素,而区块内的文字、图片或超链接等一般称为行级元素。页面这种布局结构,其本质上是由各种HTML标签组织完成的。


    与行级元素相比,块级元素具有如下特点:
    (1)、前后换行显示,块级元素比较“霸道”,默认状态下独占一整行。
    (2)、块级元素常用作容器,即可以再“容纳”其它块级元素和行级元素,而行级元素一般用于组织内容,即只能用于“容纳”文字、图片、超链接等其他行级元素。
    (3)、块级元素具有一定的高度和宽度,可以通过设置块级元素的width、height属性来控制。


    从页面布局的角度,块级元素又可细分基本块级元素和常用于页面布局的块级元素。
    基本的块级元素有:
      1).标题标签<h1>~<h6>:表示一段文字的主题,并支持多层次的内容结构。
      2).段落标签<p> :表示一段文字的内容。
      3).水平线标签<hr />:表示一条水平线。
    常用于布局的块级元素
      1).有序列表<ol>-<li>:表示多个并列的列表项,它们之间有明显的先后顺序。
      2).无序列表<ul>-<li>:表示多个并列的列表项,但它们之间没有先后顺序。
      3).定义列表<dl>-<dt>-<dd>:表示描述某个术语或产品的定义或解释。
      4).表格<table>:表示用于描述一个表格,它使用规整的数据显示。 
      5).表单<form>:表示用于描述需要用户输入的页面内容。
      6).分区<div>:表示用于组织小区块的内容。为了方便管理,数目众多的小区块还需要放到一个大区块中进行布局。分区标签<div>常用于页面布局时对区块的划分,它相当于一个大的容器,可以容纳无序列表、有序列表、定义列表等块级标签。同时也可以容纳段落、标题、文字、图片等内容。
    在实际开发中,<div>常用来进行分区,ul-li或ol-li实现无序或有序的项目列表,dl-dt-dd实现图文混编,table-tr-td实现规整数据的显示,由此,在页面局部布局中,形成了如下四种常用的局部块状布局结构:
       (1)、div-ul(ol)-li:常用于分类导航或菜单等场合
       (2)、div-dl-dt-dd:常用于图文混编场合
       (3)、table-tr-td:常用于规整数据的显示场合
       (4)、form-table-tr-td:常用于表单布局的场合


    行级元素
      行级标签也称为内联标签、行内标签。使用块级标签为页面“搭建完成组织结构”之后,往每个小区块添加内容时,就需要使用到行级标签.


      行级标签:类似文本的显示方式,按“行”逐一显示,常用的行级标签有:


      (1)、图像标签<img>:表示用于在网页中显示图片.
      (2)、超链接标签<a>:
      (3)、范围标签<span>:表示用于标识行内的某个范围.例如:实现行内某个部分的特殊设置以区分其他内容.
      (4)、换行标签<br />:表示强制换行显示.
      (5)、输入框标签<input>
      (6)、多行文本域标签<textarea>

































  • 相关阅读:
    字符串中去除连续相同的字符保留一个
    截取字符串中最后一个中文词语(MS SQL)
    WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).
    Unexpected error from external database driver (1)
    RDLC报表显示存储于数据库的图片
    从angularjs传递参数至Web API
    angularjs呼叫Web API
    创建Web API并使用
    打印网页中某一段内容
    在angularjs实现一个时钟
  • 原文地址:https://www.cnblogs.com/dfyg-xiaoxiao/p/7213740.html
Copyright © 2011-2022 走看看