zoukankan      html  css  js  c++  java
  • CSS 块级元素、内联元素概念

    《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

    p、h1、或div等元素常常称为块级元素,这些元素显示为一块内容;Strong。span等元素称为行内元素,它们的内容显示在行中,即“行内框”。(可以使用display=block将行内元素转换成块元素,display=none表示生成的元素根本没有框,也既不显示元素,不占用文档中的空间)。

    a、行内就是在一行内的元素,只能放在行内;块级元素,就是一个四方块,可以放在页面上任何地方。
    b、说白了,行内元素就好像一个单词;块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现。
    c、一般的块级元素诸如段落<p>、标 题<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>
    等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........
    d、块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。
    e、<span>在CSS定义中属于一个行内元素,而<div>是块级元素。

    对于学过CSS的人来说一听就能明白。可对于新手来说不易理解,我主要对新手说通熟点吧!

    用容器这一词会更容易形象理解它们的存在与用途,行内元素相当一个小容器,而<div>相当于一个大容器,大容器当然可以放一个小容器了。<span>就是小容器,这样一说你也许会在脑海中有一个初步的印象了吧,如果我们想在大容器中装一些清水。但我也想在里装一些墨水怎么办?很简单,我们把小容器拿出来装上墨水然后放入大容器里的清水中不就成了吗。

    块元素(block element)一般是其他元素的容器元素

    块元素一般都从新行开始,它可以容纳内联元素和其他块元素。常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。

    内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”。

    块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属 性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。

    可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。大致的元素分类见下文。

    块元素(block element)

    address - 地址
    blockquote - 块引用
    center - 举中对齐块
    dir - 目录列表
    div - 常用块级容易,也是css layout的主要标签
    dl - 定义列表
    fieldset - form控制组
    form - 交互表单
    h1 - 大标题
    h2 - 副标题
    h3 - 3级标题
    h4 - 4级标题
    h5 - 5级标题
    h6 - 6级标题
    hr - 水平分隔线
    isindex - input prompt
    menu - 菜单列表
    noframes - frames可选内容(对于不支持frame的浏览器显示此区块内容)
    noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
    ol - 排序列表
    p - 段落
    pre - 格式化文本
    table - 表格
    ul - 非排序列表

    内联元素(inline element)

    a - 锚点
    abbr - 缩写
    acronym - 首字
    b - 粗体(不推荐)
    bdo - bidi override
    big - 大字体
    br - 换行
    cite - 引用
    code - 计算机代码(在引用源码的时候需要)
    dfn - 定义字段
    em - 强调
    font - 字体设定(不推荐)
    i - 斜体
    img - 图片
    input - 输入框
    kbd - 定义键盘文本
    label - 表格标签
    q - 短引用
    s - 中划线(不推荐)
    samp - 定义范例计算机代码
    select - 项目选择
    small - 小字体文本
    span - 常用内联容器,定义文本内区块
    strike - 中划线
    strong - 粗体强调
    sub - 下标
    sup - 上标
    textarea - 多行文本输入框
    tt - 电传文本
    u - 下划线
    var - 定义变量

    可变元素

    可变元素为根据上下文语境决定该元素为块元素或者内联元素。

    applet - java applet
    button - 按钮
    del - 删除文本
    iframe - inline frame
    ins - 插入的文本
    map - 图片区块(map)
    object - object对象
    script - 客户端脚本

    如果,您认为阅读这篇博客让您有些收获,不妨点击一下右下角的【推荐】。
    如果,您希望更容易地发现我的新博客,不妨点击一下左下角的【关注我】。
    如果,您对我的博客所讲述的内容有兴趣,请继续关注我的后续博客,我是【Ruthless】。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    Android源码学习之模板方法模式应用
    CSS3特性修改(自定义)浏览器默认滚动条
    【JQ+锚标记实现点击页面回到顶部】
    网页响应式媒体查询
    CSS3新特性,绘制常见图形
    【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动
    MySQL索引详解
    Eclipse快捷键大全(转载)
    深入Java集合学习系列:HashMap的实现原理
    HTML5 的Drawing Path
  • 原文地址:https://www.cnblogs.com/linjiqin/p/3556608.html
Copyright © 2011-2022 走看看