CSS显示模式

div 和 span 标签

div标签:配合CSS完成网页的基本布局,设置样式

span标签:配合CSS来修改网页中的布局信息

div标签和span标签的区别:
1、div会自动换行,span不会自动换行
2、div是一个容器级标签,span是一个文本级标签
容器级标签:里面可包含其它所有的标签
如:div h ul ol dl li dt dd ...

文本级标签:只能放文字、超链接、图片
如:span p buis stong em ins del ...

CSS元素的显示模式:

  • 在HTML中,所有的标签分为容器级和文本级两类
  • 在CSS中,所有的标签分为块级元素和行内元素

块级元素:会独占一行,所有的容器级都是块级元素
如:p div h ul ol dl li dt dd ...

行内元素:不会独占一行
如:span buis stong em ins del ...

块级元素和行内元素的区别:
-块级元素独占一行,行内元素不会
-如果没设置宽高,块级元素默认和父元素一样宽高,行内元素默认和内容一样宽高,且行内元素不能设置宽高度

行内块级元素:不换行,又能设置宽度和高度
如:img

CSS代码中
元素显示模式转换:
行内——>块级 span { display:block; }

块级——>行内 div{ display:inline; }

行内——>行内块级 span { display:inline-block; }

块级——>行内块级 p { display:inline-block; }

块级——>行内块级 div{ display:inline-block; }

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

推荐阅读更多精彩内容

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