美文网首页CSS积累饥人谷技术博客CSS
管窥——块级元素与行内元素

管窥——块级元素与行内元素

作者: 犯迷糊的小羊 | 来源:发表于2016-05-15 00:11 被阅读105次

    块级元素(block elements)与行内元素(inline elements)是构建html世界的基本元素,所有位于body标签的元素可以划分为这两大类型。那么,我们不禁要问:元素划分为block和inline的意义何在?

    • 块级元素
      • 块级元素规定元素内容占据整块区域,排斥其他元素与其位于同一行
      • 可以设定width和height
      • 一般是其他元素(block或inline)的父容器
      • 具体演示效果如下:
    • 常见块级元素包括:
    • 行内元素

      • 行内元素规定可以与其他元素位于同一行,但不可包含块级元素
      • 不可以设定width和height,height由字体大小决定,weight有字体个数决定
    • 具体演示效果如下:

    • 常见行内元素包括:
    • 可变元素
    • Css元素的display属性

    每一个元素都具备一个display属性,该属性规定每个元素的表现类型:block、inline和block-inline

    • block规定元素为块级元素;inline规定元素为行内元素;inline-block规定元素具有改变宽高功能的行内元素
    • 具体演示效果如下:

    小结:

    • block规定元素的占据整块区域的空间,排斥其他元素与其同行;inline规定元素可与其他元素同行;inline-block是具备调整宽高的inline元素
    • block可以设定宽高并能容纳其他block和inline元素,inline无法设定宽高并只能容纳inline元素
    • 可以在Css元素中设定display属性改变元素的表现形式

    参考资料:

    相关文章

      网友评论

        本文标题:管窥——块级元素与行内元素

        本文链接:https://www.haomeiwen.com/subject/ezhvrttx.html