div标签 什么是div标签
作用：一般用于配合css完成网页基本布局。
span标签 什么是span标签作用：一般用于配合css修改网页中的一一些局部信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div和span标签</title> <style> .conter { width: 1000px; height: 500px; background: #f7fb8f; margin: auto; margin-bottom: 10px; } .footer { width: 1000px; height: 200px; background: #1ef942; margin: auto; margin-bottom: 10px } .header { width: 1000px; height: 80px; background: #c0d8c7; margin: auto; margin-bottom: 10px } .logo { width: 200px; height: 50px; background: pink; float: left; margin: 20px; } .mav { width: 600px; height: 50px; background: pink; float: right; margin: 20px; } .img3 { width: 600px; height: 50px; float: right; } .imgu { width: 200px; height: 50px; float: left; } .article { width: 650px; height: 400px; background: #f3ebf0; float: right; margin: 20px; } .aside { width: 250px; height: 400px; background: purple; float: left; margin: 20px; } .p1 { /*article中的标题*/ text-align: center; text-decoration: underline; font-family: '宋体',serif; font-size: 30px; letter-spacing: 1px; } .p1 span { color: #6667ff; font-style: italic; font-size: 30px; } .p2 { text-align: center; text-decoration: none; font-family: '宋体','华文楷体',sans-serif; font-size: 20px; letter-spacing: 1px; } .p2 span { color: #0f1810; font-style: italic; font-size: 20px; } .p3 { text-align: center; font-size: 28px; font-family: "华文行楷",sans-serif; } </style> </head> <body> <div class="header"> <div class="logo"> <img src="images/up.jpg" alt="不见了" class="imgu"> </div> <div class="mav"> <img src="images/1.jpg" alt="找不到了" class="img3"> </div> </div> <div class="conter"> <div class="aside"></div> <div class="article"> <p class="p1">木兰花-<span>拟古绝词</span></p> <p class="p2">清 <span>纳兰性德</span></p> <p class="p3">人生若只如初见，何事秋风悲画扇</p> <p class="p3">等却变得故人心，却道故人心易变</p> <p class="p3">骊山语罢清宵半，泪雨霖铃终不怨</p> <p class="p3">何如薄幸锦衣郎，比翼连枝当日愿</p> </div> </div> <div class="footer"></div> </body> </html> 它们之间的区别1。div标签会独占一行，span标签不会。
2.div是一个容器级别的标签，span是一个文本级别的标签
容器级别标签和文本级别标签的区别容器级别标签可以嵌套所有标签。
文本级别标签只可以嵌套文字/超链接/图片
容器级别标签div h ul ol dl li dt dd …
文本级标签span p buis strong em ins del….
一般情况下嵌套在div中, 或按照组标签来嵌套。
CSS中的标签分类 块级元素会独占一行，所有的 容器级元素块级元素，p也是块级元素。
行内元素不会独占一行，文本级元素除了p，都是行内元素。
块级元素和行内元素区别块级元素：1.独占一行
? 2.如果没有设置宽度，那么默认和父元素一样宽。如果设置了就和设置高度和宽度一样。
行内元素：1.不会独占一行
? 2.如果没有设置宽度，会默认和内容一样宽，且其设置了也不会发生改变。不可设置高度和宽度。
行内块级元素为了让元素能过不独占一行，又可以设置宽度和高度。img input 。。。
显示模式的转换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示模式转换</title> <style> div { display: inline; /*转换为行内显示*/ background: #1ef942; width: 200px; height: 150px; } span { display: block;/*转换为块级元素*/ background: #6667ff; width: 200px; height: 150px; } .cc { background: aqua; width: 200px; height: 200px; display: inline-block; } </style> </head> <body> <div>我是div</div> <div>我是div</div> <span>我是span</span> <span >我是span</span> <p class="cc">我是段落</p> <b class="cc">我是加粗</b> </body> </html>通过display属性可以转换：
block块级
inline行内
inline-block 行内块级
将div转换为行内，span转化为块级，p转换为行内块级
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |