當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

div和span标签以及标签分类

發布時間：2023/12/18 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 div和span标签以及标签分类小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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轉換為行內塊級

總結

以上是生活随笔為你收集整理的div和span标签以及标签分类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。