• 块级元素和行内元素的区别


    标准文档流: 是指在不使用其它的排版和定位相关的特殊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>

































  • 相关阅读:
    yolo_to_onnx ValueError: need more tan 1 value to unpack
    yolo_to_onnx killed
    C++ 实现二维矩阵的加减乘等运算
    Leetcode 1013. Partition Array Into Three Parts With Equal Sum
    Leetcode 1014. Best Sightseeing Pair
    Leetcode 121. Best Time to Buy and Sell Stock
    Leetcode 219. Contains Duplicate II
    Leetcode 890. Find and Replace Pattern
    Leetcode 965. Univalued Binary Tree
    Leetcode 700. Search in a Binary Search Tree
  • 原文地址:https://www.cnblogs.com/dfyg-xiaoxiao/p/7213740.html
Copyright © 2020-2023  润新知