CSS塊級/內聯元素
一.塊級元素:
塊級元素通常用作容器,比如當前最為常見的div元素等,可以容納如下元素:
(1).塊級元素。
(2).塊級內聯元素。
(3).內聯元素。
預設狀態下,塊級元素總是佔據一整行,除非使用CSS控制。
使用display:inline可以把塊級元素轉換成內聯元素。
塊級元素的特點:
(1).塊級元素既可以容納內聯元素也可以容納塊級元素。
(2).塊級元素在預設的情況下是獨佔一行的。
(3).塊級元素大小是可以控制的,css可以設定高度和寬度。
(4).寬度預設值就是它所在容器寬度的100%。
例項程式碼:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .ant-1{ height:200px; background-color:green; } .ant-2{ width:200px; height:200px; background-color:red; } </style> </head> <body> <div class="ant-1"></div> <div class="ant-2"></div> </body> </html>
程式碼中有兩個div,分別佔據一行,並且設定了它們的長度和寬度。
二.內聯元素:
內聯元素名稱有多種,比如內嵌元素、行內元素等等,無需糾結。
任何不是塊級元素的可見元素都是內聯元素。
內聯元素只能夠容納文字或者內聯元素。
內聯元素的尺寸是不可以控制的,也就是說CSS的height和width是不起作用的。
使用display:block語句可以把內聯元素轉換成塊元素;內聯元素浮動起來自動轉換成塊級元素。
內聯元素的特點:
(1).內聯元素只能容納文字或者內聯元素。
(2).內聯元素預設情況下可以和其他內聯元素元素在一行上。
(3).內聯元素預設情況下的大小是不可以控制的。
(4).內聯元素可以產生程式碼換行和空格。
例項程式碼:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .ant-1{ height:200px; background-color:green; } .ant-2{ width:200px; height:200px; background-color:red; } </style> </head> <body> <span class="ant-1"></span> <span class="ant-2"></span> </body> </html>
程式碼中兩個內聯元素是在一行排列的,但是無法給它們設定高度和寬度。
三.內聯塊級元素:
預設狀態下,元素要麼內聯元素,要麼塊級元素。
使用display:inline-block可以將一個元素轉換成內聯塊級元素。
顧名思義,就是使元素兼具內聯元素和塊級元素的特性。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> ul { background: #ccc; padding: 0; margin: 0; list-style: none; } li { display: inline-block; width: 80px; height: 20px; margin: 10px; padding: 10px; text-align: center; background: #cfc; } </style> </head> <body> <ul> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> </ul> </body> </html>
li元素應用display:inline-block,它們就可以在同一行顯示,也能夠設定尺寸和內外邊距。
相關文章
- CSS塊狀元素和內聯元素CSS
- HTML 塊級元素和內聯元素HTML
- 02 CSS塊級元素和行內元素CSS
- CSS的塊級元素和行內元素CSS
- 塊狀元素、內聯元素和內聯塊狀元素
- 塊級元素與內聯元素相互轉換
- 內聯元素和塊級元素相互轉換
- CSS 塊級元素和行內元素和行內塊元素 及其相互轉換CSS
- 偽元素需要將其設定為塊級元素或者塊級內聯元素才能設定尺寸
- 塊級元素和行內元素
- 行內元素和塊級元素
- 常見塊元素和內聯元素
- 【前端】HTML__內聯元素與塊元素前端HTML
- CSS基礎——塊級元素、塊級盒子以及BFCCSS
- HTML_行內元素、塊級元素、空元素HTML
- text-align對內聯塊級元素同樣有效
- 塊級元素和行內元素的區別
- 塊級元素和行內元素分別有哪些
- CSS裡的各種水平垂直居中基礎寫法心得分享(附內聯元素,塊級元素的基本概念)CSS
- HTML的行內元素與塊級元素的區別?HTML
- html之標籤內聯塊元素的那些事HTML
- Html 內聯元素和外聯元素HTML
- 行內元素和塊級元素使用浮動後的變化
- 深入理解-CSS內聯元素之font-sizeCSS
- html塊級元素HTML
- 行內元素與塊元素1
- HTML內聯元素HTML
- 深入理解-CSS內聯元素之vertical-alignCSS
- 內聯元素與流
- 深入理解-CSS內聯元素之line-heightCSS
- 前端開發,塊元素與行內元素前端
- 面試—塊級、行內、內聯元素的特點,常見的元素的特點屬性(href、src的區別,alt和title的區別)面試
- html塊元素和內斂元素的區別HTML
- 行級元素左右邊距及塊級元素上下邊距
- 行內元素與塊狀元素 行內替換元素與行內非替換元素的區別
- 什麼是塊元素?什麼是行內元素?
- HTML5下<a>元素下可以包裹塊級元素HTML
- 塊元素和行內元素的區別與轉換