zoukankan      html  css  js  c++  java
  • 块级元素和行内元素总结

    块级元素(block element):

      * address - 地址
      * blockquote - 块引用
      * center - <center> 对其所包括的文本进行水平居中。在 HTML 4.01 中,<center> 元素 已废弃。HTML5 不支持 <center> 标签。请用 CSS 代替。

      * 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 - 非排序列表

    块状元素特点:

    1、独占一行,在默认情况下,宽度自动填满父元素宽度

    2、宽度和高度可以控制

    3、margin和padding横向纵向设置都有效

    4、可以通过display: inline; 转换为行内元素

    5、除个别特殊元素外,可包含块状元素和行内元素;

    行内元素(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 - 定义变量

    行内元素特点:

    1、不能独占一行

    2、宽高由内容撑开

    3、margin和padding横向设置有效,纵向设置不产生边距效果

    4、可以通过display: block; 转换为块状元素

    5、除ins和del外,不能包含块状元素

     空元素:<br/>;

     CSS:css能够改变html的默认布局模式,把块级元素摆放到你想要的位置上去。

        块级元素和行内元素的基本差异是块元素一般从新行开始,而当加入了css控制之后,这种属性差异就不成为差异了。

        给行内元素加上 display:block  这样的属性,让行内元素也有每次都从新行开始的属性。

        给块级元素加上 display:inline  这样的属性,让块级元素不具有从新行开始的属性。

  • 相关阅读:
    python设计模式之简单工厂
    python设计模式之观察者模式
    python设计模式之模版方法设计模式
    python设计模式之策略模式
    python编程之数据描述器
    python设计模式之单例模式
    .NET 开源工作流: Slickflow流程引擎高级开发(七)--消息队列(RabbitMQ)的集成使用
    .NET 开源工作流: Slickflow流程引擎快速入门之四:--SlickGraph 流程模型编码建模工具使用手册
    .NET 开源工作流: Slickflow流程引擎快速入门之三: 简单或分支流程代码编写示例
    .NET 开源工作流: Slickflow流程引擎快速入门之二: 简单并行分支流程代码编写示例
  • 原文地址:https://www.cnblogs.com/kttbk/p/8522316.html
Copyright © 2011-2022 走看看