zoukankan      html  css  js  c++  java
  • css中块级元素、内联元素(行内元素、内嵌元素)

    Block element 块级元素
        顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用 的<div>、<p>、<ul>默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后 面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,float也具有 此功能。

    Inline element 内联元素
      通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽 度。我们常用到的<a>、<span>、<em>都属于内联元素。内联元素的显示特点就是像文本一样的显示,不会独 自占据一个行。当然块级元素也能变成内联元素,那就是通过css的display:inline;和float来实现。

      在《CSS权威指南》这样定义到,“任何不是块级元素的可见元素都是内联元素,其表现的特性是“行布局”形式。”我个人不太习惯“行布局”的说话,因为我 认为块级元素从表现上更像“行”显示,而内联元素更像是“文本”的显示属性。这其中一点记住很关键,“内联元素的高度宽度都是不可以设置的,其宽度就是自 身文字或者图片的宽度”。因为在你设置宽度高度大半天后没反应才发现,原来这只是个内联元素。

    块元素(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 - 客户端脚本

  • 相关阅读:
    事务
    排序算法
    二维数组中的查找
    在Linux中安装Matlab
    null和“”的区别
    【学习笔记】〖九度OJ〗题目1433:FatMouse
    【学习笔记】〖九度OJ〗题目1464:Hello World for U
    year:2017 month:8 day:1
    year:2017 month:07 day:31
    year:2017 month:7 day:27
  • 原文地址:https://www.cnblogs.com/jack-lin/p/6480555.html
Copyright © 2011-2022 走看看