7. CSS div和span标签

1、div

  • 用于配合CSS对网页进行布局
    2、span

  • 对网页进行局部修改
    3、区别

  • div会单独占住一行,span不会

  • div是容器级别的标签,span是文本级别的标签

    • 容器级别的标签可以嵌套其他所有的标签
    • 文本的则只能嵌套文字、超链接、图片
  • 在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级

  • 在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素

    • 容器级:div h ul ol dl li 等等
    • 文本级 span p buis stong em ins dei 等等
  • display属性

    • inline 行内
    • inline-block 行内块级
    • block块级

块级元素 p div h ul ol dl li dt dd
行内元素 span buis strong em ins del

  • 块级元素和行内元素的区别?

    • 块级元素
    • 独占一行
    • 如果没有设置宽度, 那么默认和父元素一样宽
    • 如果设置了宽高, 那么就按照设置的来显示
  • 行内元素

    • 不会独占一行
    • 如果没有设置宽度, 那么默认和内容一样宽
    • 行内元素是不可以设置宽度和高度的
  • 行内块级元素

    • 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,599评论 32 459
  • 前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的...
    珍此良辰阅读 1,937评论 2 15
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,662评论 0 30
  • 今天觉得很累 早上被一个个数字弄的晕头转向 算几次有几个数字 中午回家做饭 在油烟味 中 被怼了 有点气儿 那么脏...
    betterme_月儿阅读 115评论 0 0