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; }