div和span標籤 css元素的顯示模式

2021-09-29 05:39:02 字數 1292 閱讀 5881

div和span標籤

1.什麼是div?

作用: 一般用於配合css完成網頁的基本布局

2.什麼是span?

作用: 一般用於配合css修改網頁中的一些區域性資訊

3.div和span有什麼區別?

1.div會單獨的占領一行,而span不會單獨占領一行

2.div是乙個容器級的標籤, 而span是乙個文本級的標籤

容器級的標籤

div h ul ol dl li dt dd …

文本級的標籤

span p buis strong em ins del …

注意點:

哪些標籤是文本級的哪些標籤是容器級的, 我們不用刻意去記憶, 在企業開發中一般情況下要巢狀都是巢狀在div中, 或者按照組標籤來巢狀

css元素的顯示模式

在html中html將所有的標籤分為兩類, 分別是容器級和文本級

在css中css也將所有的標籤分為兩類, 分別是塊級元素和行內元素

1.什麼是塊級元素, 什麼是行內元素?

塊級元素會獨佔一行

行內元素不會獨佔一行

容器級的標籤

div h ul ol dl li dt dd …

文本級的標籤

span p buis stong em ins del …

塊級元素

p div h ul ol dl li dt dd

行內元素

span buis strong em ins del

2.塊級元素和行內元素的區別?

2.1塊級元素

獨佔一行

如果沒有設定寬度, 那麼預設和父元素一樣寬

如果設定了寬高, 那麼就按照設定的來顯示

2.2行內元素

不會獨佔一行

如果沒有設定寬度, 那麼預設和內容一樣寬

行內元素是不可以設定寬度和高度的

2.3行內塊級元素

為了能夠讓元素既能夠不獨佔一行, 又可以設定寬度和高度, 那麼就出現了行內塊級元素

模式的轉換

1.如何轉換css元素的顯示模式?

設定元素的display屬性

2.display取值

block 塊級

inline 行內

inline-block 行內塊級

3.快捷鍵

di display: inline;

db display: block;

dib display: inline-block;

web前端 div和span標籤

div和span標籤都是用來幫助頁面進行排版的,它們兩個沒有自己的語意。div 塊級元素,所謂的塊級元素,就是可以通過css設定寬高等一些大小的樣式,這樣的元素標籤稱為塊級元素。塊級元素的特點是自己佔一整行。如果再寫其它標籤,那麼其它標籤會顯示在它的下面。div的寬度預設是整個瀏覽器的寬度,這個寬度...

div和span元素的區別

要點整理 1 div是乙個塊級元素,獨佔一行不能和其它元素在一行 2 span是行內元素 也譯作內嵌元素 不會另起一行 3 塊元素和行內元素通過css的display屬性值可以互相轉化 測試 div style display inline 緊跟前面的 測試 顯示 div 這裡會另起一行顯示 div...

Div和Span標籤顯示與隱藏

本例項中,學習jquery的知識,顯示與隱藏網頁上的div或是span標籤。實際環境中,也許是根據某些條件進行,符合條件時,對某個或是某個div或是span標籤時行顯示與隱藏。主要是學習jquery的函式與語法,在網頁中放置乙個銨鈕,使用者點一點隱藏或顯示。還放置了乙個div標籤和乙個span標籤。...