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

块级元素(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属性改变元素的表现形式

参考资料：

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容