• 块元素与行内(内嵌)元素的区别


    原文连接http://www.jb51.net/css/468282.html

    block(块)元素的特点:

    ①总是在新行上开始,相当于每个块元素默认有个换行符;
    ②高度,行高以及外边距和内边距都可控制;
    ③宽度缺省是它的容器的100%,除非设定一个宽度。
    ④它可以容纳内联元素和其他块元素

    inline元素的特点:

    ①和其他元素都在一行上  默认没有换行符所以在一行上可以显示多个行内元素;
    ②高,行高及外边距和内边距不可改变;
    ③宽度就是它的文字或图片的宽度,不可改变
    ④内联元素只能容纳文本或者其他内联元素

    注意:以上的块元素和行内元素都可以通过display改变显示方式

    块元素与内联元素的区别?

    1.块元素,总是在新行上开始;内联元素,和其他元素都在一行上。

    2.块元素,能容纳其他块元素或内联元素;内联元素,只能容纳文本或者其他内联元素。

    3.块元素中高度,行高以及顶和底边距都可控制;内联元素中高,行高及顶和底边距不可改变。

    (这上面的区别,指的是默认情况下的,不包括CSS的刻意控制。也就是说当使用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 - 客户端脚本

    文档流

    将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

    每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端。 若当前行容不下, 则另起新行再浮动。

    内联元素也不会独占一行。 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。

    有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位。 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理><)。

    浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

    浮动概念让人迷惑根源在于浏览器对理论的解读造成的。只能说很多人以IE做标准,其实它不是。

    基于文档流, 我们可以很容易理解以下的定位模式:

    相对定位, 即相对于元素在文档流中位置进行偏移。 但保留原占位。

    绝对定位, 即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移。

    固定定位, 即完全脱离文档流, 相对于视区进行偏移

  • 相关阅读:
    最后一次作业-- 总结报告
    第14.15周作业
    第七周作业
    第六周作业
    第四周作业
    第三周作业。
    第四次作业
    第三次作业
    第二次作业
    第一次作业
  • 原文地址:https://www.cnblogs.com/lichihua/p/8989910.html
Copyright © 2020-2023  润新知