您的位置: 首页  >  IT文章  >  常见的块级元素和内联(行内)元素

常见的块级元素和内联(行内)元素

分类: IT文章 • 2023-11-07 19:11:26

文档流（normal flow）

  网页是一个多层的结构，一层摞着一层，通过 CSS 可以分别为每一层设置样式，作为用户只能看到最顶上的一层，这些层中，最底下的一层称为文档流。文档流是网页的基础，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

  我们所创建的元素默认都是在文档流中进行排列的。

  元素主要有两个状态：

  1. 在文档流中

  2. 不在文档流中（脱离文档流） 只有绝对定位和浮动float才会脱离文档流。

元素在文档流中的特点

块级元素

  1. 块元素会在页面中独占一行（自上向下垂直排列）

  2. 默认宽度是父元素的全部（会把父元素撑满）

  3. 默认高度是被内容撑开（子元素撑开）,元素有多少，高度就是多少

行内元素

  1. 行内元素不会独占页面中的一行，只占自身的大小

  2. 行内元素在页面中自左向右水平排列，如果一行之中不能容纳所有的行内元素，则元素会换到第二行继续自左向右排列（和习惯的书写顺序一致）

  3. 行内元素的默认宽度和默认高度都是被内容撑开

区分块级元素和内联元素

  每一个网页元素都有一个display属性，用于设置元素显示的类型，通过display属性设置不同的值可以将块级元素、内联元素、行内块元素之间进行转换。

常见的可选值包括：

none  : 元素不会被显示，也不会保留该元素原先占有的文档流位置。 

inline ：内联元素，元素后没有换行符。

inline-block : 行内块元素，（CSS 2.1 增加的值）。

block ：块级元素，元素后带有换行符。

table ： 此元素会作为块级表格来显示，表格前后带有换行符。

特点

块级元素独占一行，可以设置元素的宽高，会自动换行,可以容纳内联元素和其他块级元素。

内联元素不独占一行，不能设置元素的宽高及外边距和内边距,内联元素只能容纳文本或者其他内联元素。

行内块元素既可以设置宽度和高度，又不会独占一行，但一般不建议使用

当把行内元素设置为浮动 （float：left/right）后，行内元素的display属性会转换为block，且具备浮动的特性。

当为行内元素进行定位时，position:absolute与position:fixed都会使得原先的行内元素变为块级元素。

行内元素又分为替换元素(行内块元素 display：inline-block)和非替换元素（display：inline），替换元素可以设置宽高，非替换元素不可以 。

  1. 替换元素(行内块元素 display：inline-block)是浏览器根据其标签的元素与属性来判断显示具体的内容。html中的<img>、<input>、<textarea>、<select>、<object>等都是替换元素，这些元素都没有实际的内容。
  2. 非替换元素：html的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。比如<p>非替换元素</p>浏览器将把这段内容直接显示出来。

常见的块级元素有：

blockquote  - 块引用

dir         - 目录列表

div         - 常用块级容易，也是css layout的主要标签

dl          - 定义列表

form        -交互表单

h1 ~ h6     -  1-6级标题

hr          - 水平分隔线

isindex     - input prompt

menu        - 菜单列表

noframes    - frames可选内容，（对于不支持frame的浏览器显示此区块内容

noscript    - 可选脚本内容（对于不支持script的浏览器显示此内容）

ol          - 排序表单

p           - 段落

pre         - 格式化文本

table       - 表格

ul          - 非排序列表

header      - 头部，定义文档的页眉

section     - 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

aside       - 定义其所处内容之外的内容，可用作文章的侧栏，是 HTML 5 的新标签。

footer      - 定义文档或节的页脚，是 HTML 5 中的新标签。

html        - 限定了文档的开始点和结束点，可告知浏览器其自身是一个 HTML 文档。

body        - 定义文档的主体,是HTML页面必须的标签。

nav         - 定义导航链接的部分。

article     - 定义外部的内容，标签的内容独立于文档的其余部分，是 HTML 5 的新标签。

thead       - 表格的头，用来放标题之类 

tbody       - 表格的身体，用来放数据本体 

tfoot       - 表格的脚，用来放表格的脚注之类

tr          - 定义 HTML 表格中的行。

常见的内联元素有：

a         - 锚点

b         - 粗体

big       - 大字体

br        - 换行

code      - 计算机代码(在引用源码的时候需要)

em        - 强调

font      - 字体设定

i         - 斜体

label     - 表格标签

q         - 短引用

small     - 小字体文本

span      - 常用内联容器，定义文本内区块

strike    - 中划线

strong    - 粗体强调

sub       - 下标

sup       - 上标

tt        - 呈现类似打字机或者等宽的文本效果

u         - 下划线

var       - 定义变量

常见的行内块元素有

button      - 按钮

img         - 图片

input       - 输入框

select      - 选择框

textarea    - 多行输入框

相关推荐