zoukankan      html  css  js  c++  java
  • 常见的块级元素和内联(行内)元素

    文档流(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    - 多行输入框
  • 相关阅读:
    git(1)-git关联GitHub-windows-转载
    jenkins(4)-jenkins配置邮件通知
    jenkins(3)-linux下安装jenkins(yum install方式)
    【PAT甲级】1090 Highest Price in Supply Chain (25 分)(DFS)
    【PAT甲级】1087 All Roads Lead to Rome (30 分)(MAP【int,string】,邻接表,DFS,模拟,SPFA)
    【PAT甲级】1018 Public Bike Management (30 分)(DFS,SPFA)
    Educational Codeforces Round 61 (Rated for Div. 2) G(线段树,单调栈)
    Atcoder Grand Contest 032C(欧拉回路,DFS判环)
    Educational Codeforces Round 62 (Rated for Div. 2)E(染色DP,构造,思维,组合数学)
    Atcoder Grand Contest 031C(构造,思维,异或,DFS)
  • 原文地址:https://www.cnblogs.com/gujun1998/p/13917970.html
Copyright © 2011-2022 走看看