CSS显示模式

一、div和span标签

  1. 什么是div
  • 作用: 一般是用于配合css完成网页的基本布局。
  1. 什么是span
  • 作用:一般配合css修改网页中的一些局部信息。
  1. div 和 span 的区别
  • div会单独占领一行,span不会单独占领一行。
  • div是一个容器级别的标签,span 是文本级别的标签。
  1. 容器级和文本级的标签的区别?
  • 容器级的标签中可以嵌套其他所有的标签,但是文本级的标签中只能嵌套文字/超链接/图片。
  • 注意点:那些标签是文本级的,那些标签是容器级的,我们可以不用去记忆的,在企业开发中一般情况下要嵌套的都是嵌套在div 中,或者按照组标签来嵌套。

二、CSS元素的显示模式

1、什么是CSS的显示模式

  • 在HTML中将所有的标签分为两类,分别是容器级别和文本级别,在css中,也将所有的标签分为两类,分别是块级别元素和行内元素。
  • 什么是块级元素,什么是行内元素?

块级别元素(容器级):p/div/ h/ ul/ol/dl/li/dt/dd
行内元素(文本):span/buis/strong/em/ins/del

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

块级元素

  1. 独占一行;
  2. 如果没有设置宽度,那么默认和父元素一样宽;
  3. 如果设置了宽度,那么就根据设置的来显示;

行内元素

  1. 不会独占一行;
  2. 如果没有设置宽度,那么默认和内容一样宽;
  3. 行内元素是不可以设置宽度和高度的。

行内块级元素
1.为了能够让元素既能够不独占一行,又可以设置宽度和高度,那么就出现了行内块级元素。例如 img

二、CSS元素显示模式的转换

1、如何转化CSS 元素的显示模式?

  • 设置元素的display属性

2、display 的取值

  • block:块级
  • inline:行内
  • inline-block: 行内转换

3、快捷键:
di : display:inline
db: display:block
dib:display:inline-block

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,843评论 1 92
  • Div和Span标签 什么是div? 作用: 一般用于配合css完成网页的基本布局 什么是span? 作用: 一般...
    Jackson_yee_阅读 873评论 1 1
  • Div和Span标签 什么是div? 作用: 一般用于配合css完成网页的基本布局 什么是span? 作用: 一般...
    极客江南阅读 7,814评论 4 61
  • Div和Span标签 Div: 一般用于配合css完成网页的基本布局Span: 一般用于配合css修改网页中的一些...
    Strive_12c4阅读 468评论 0 0
  • 一. 标签补充 div 和s pan 1.什么是div? 作用: 一般用于配合css完成网页的基本布局 2.什么...
    壹点微尘阅读 217评论 0 0