css塊級標籤，行內標籤，行內塊標籤的轉換（2）
css塊級標籤，行內標籤，行內塊標籤的轉換
在基礎1中，我詳細講了css的常見屬性，幾種不同的選擇器，在此基礎之上我們來進一步地認識它們的特性從而更好地學習和掌握相關開發技能。
HTML標籤的分類
在講標籤分類的時候，我們作為初學者在剛使用標籤的時候會發現有些屬性在一些標籤上不起作用，比如寬、高、水平居中等，其實這個屬性的使用只有在塊級標籤上使用才起作用。個人認為這個也是初學者非常容易忽略的地方，所以我就把它記下來！
首先我們可以按照顯示的不同將HTML標籤分為：塊級標籤，行內標籤，行內塊標籤；現對其分別介紹。
塊級標籤
特點：獨佔一行，對高度、寬度、行高以及頂和底邊距都可設定的屬性值生效；如果不給寬度，塊級元素就預設為瀏覽器的寬度，即就是100%寬；
典型的塊級標籤有：<div> ，h系列，<li>，<dt>，<dd>，<p> ，<form>，<ul>
行內標籤
特點：可以多個標籤存在一行，不能直接設定行內標籤的高度、寬度、行高以及頂和底邊距，完全靠內容撐開寬高！
典型的行內標籤有：<span>，<a>，<b>，<i>，<u>，<em>，<strong>，<label>，<br>
行內塊標籤 ：
特點：結合的行內和塊級的有點，不僅可以對寬高屬性值生效，還可以多個標籤存在一行顯示；
典型的行內標籤有：<img>，<input>
那麼有的同學就會想了，難道我就不可以控制span或者font的寬高了嗎？可以的，那麼我們這次拋開浮動和定位不說，就說通過display屬性來將它們互相轉換：
1、塊級標籤轉換為行內標籤：display:inline;
2、行內標籤轉換為塊級標籤：display:block;
3、轉換為行內塊標籤：display：inline-block;
只要給對應的標籤使用這個display這個屬性，取相應的值，就可以將顯示模式互相轉換。
下面請看如下示例：
1：將行內標籤轉換為塊級標籤
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>行內標籤轉塊級標籤</title> 5 <style type="text/css"> 6 a{ 7 width: 200px; 8 height: 200px; 9 background-color: red; 10 display: block; 11 } 12 </style> 13 </head> 14 <body> <!--正常情況a標籤作為一個行內標籤你設定長和寬是沒有效果的--> 15 <a href="https://www.baidu.com">百度</a> 16 </body> <!--而當你用display: block;代表行內標籤轉為塊級標籤--> 17 </html>
執行結果如下;點紅色任意一區域都能實現跳轉到百度，所以他可以實現擴大連結範圍。
2：將行內標籤轉換為行內塊標籤
上面已經講過行內塊級標籤和塊級標籤的區別，我在強調一遍：塊級標籤和行內塊級標籤都是可以設定長和寬的，但塊級標記當你設定好後
它是自動換行的，你不能在這一行再放其它東西，而行內塊級標籤在同一行中可以放置多個行內標籤，具體我有案例來解釋。
1 <html> 2 <head> 3 <title>塊級和行內塊級</title> 4 <style type="text/css"> 5 a{ 6 width: 100px; 7 height: 100px; 8 background-color: green; 9 display: inline-block; 10 } 11 div{ 12 width:100px; 13 height:100px; 14 background-color: red; 15 margin-top:10px; /* margin-top是來設定上下兩個塊的上下間距，關於盒子下一節我單獨來講*/ 16 } 17 </style> 18 </head> 19 <body> 20 <a href="https://www.baidu.com">百度</a> <!--通過 display: inline-block;就可以將行內標籤轉為行內塊級標籤--> 21 <a href="https://www.baidu.com">百度一下</a> 22 <div>我是div1</div> <!--這個是一般的塊級標籤，會上下分行--> 23 <div>我是div2</div> 24 </body> 25 </html>
執行結果：
3.將塊級標籤轉換為行內標籤
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>塊級標籤轉行內標籤</title> 5 <style type="text/css"> 6 div{ 7 width: 100px; 8 height: 100px; 9 background-color: red; 10 display: inline; 11 } 12 </style> 13 </head> 14 <body> 15 <div>谷歌</div> <!--按道理div是塊級可以設定長和寬當通過display: inline;它已經是行內標籤了，所以長和寬失效--> 16 <div>https://www.google.com</div> 17 </body> 18 </html>
效果如下：
有關塊級標籤，行內標籤，行內塊級標籤我就先寫到這裡，也歡迎大家看了之後能夠多指點，感謝。
相關推薦
css塊級標籤，行內標籤，行內塊標籤的轉換（2）
css塊級標籤，行內標籤，行內塊標籤的轉換 在基礎1中，我詳細講了css的常見屬性，幾種不同的選擇器，在此基礎之上我們來進一步地認識它們的特性從而更好地學習和掌握相關開發技能。 HTML標籤的分類 在講標
從0開始，部署.NetCore並構建非阻塞高併發伺服器（2）
工具篇看我這篇部落格想搭建伺服器的朋友多半是想在Linux上使用，正所謂工欲善其事必先利其器，一個好用的SSH對我們的工作效率影響也很大，簡單的說下我在Win下常用的SSH軟體和使用教程，老手自動忽略即可推薦工具1--WinSCPWinSCP可以說是我最常用的遠端連線Linu
python 內建資料結構的基本操作 —— dict（2）
A mapping object maps hashable values to arbitrary objects. Mappings are mutable objects. There is currently only one standard mapp
GCJ-02(火星，高德) 和BD-09(百度) 座標轉換（PHP）
<?php //GCJ-02(火星，高德) 座標轉換成 BD-09(百度) 座標//@param gg_lon 火星經度//@param gg_lat 火星緯度 functionbd_encrypt($gg_lon,$gg_lat) { $
python 內建資料結構的基本操作 —— list（2）
The list data type has some more methods. Here are all of the methods of list objects: list.append(x) Add an item to the end of t
模塊和類的通用轉換規則（2），如何oo？
show utf8 註意 Coding 編程 IT 設計 人的 變量 介紹模塊和類怎麽互相轉換，不談面向對象的繼承 封裝 多態等特點。 一個person_module模塊，有人的基本屬性和功能。 person_module.py如下 # coding=utf8
shell腳本編程小技巧（2）——如何解決多行重定，變量不被shell解釋
tps log shell腳本 ces ESS size 分享 sha blog 參考資料 https://blog.csdn.net/ccwwff/article/details/48519119 例子 原理 ![]shell腳本編程小技巧（2）——如何解決多行重定，
thinkphp3.2筆記（2）調試模式，配置項C，創建模塊, 四種URL模式
data 控制器 idt 默認 模式 com index.php 訪問 alt 一、調試模式 TP的調試模式其實就控制了TP關於配置信息以及函數的緩存功能 如果開啟了調試模式，每次訪問項目，Tp都會去加載最新的配置以及函數信息。 如果關閉了調試模式，當tp第一次訪問時會降配
【原創】VBA學習筆記（2）--例項，VBA刪除表中的空行
Sub 巨集1迴圈內刪列() '資料不規範，有的空行是4，有的是6，有的是1就不好處理了 For i = 15 To 100 Step 2 Rows(i).Delete Shift:=xlUp &nb
行內函數與帶引數巨集區別（筆記）
1.行內函數呼叫時，會進行型別檢查，要求實參和形參的型別一致，另外行內函數會先對實參表示式進行求值，然後傳遞給形參；而巨集呼叫時只用實參簡單地替換形參。 2.行內函數實在編譯的時候，在呼叫的地方將程式碼展開，而巨集則是在預處理時進行替換的。 3.C++中建議採用inli
有表頭行與無表頭行的內表在模組化中的應用（ABAP）
PROGRAM SAPMZTST. TYPES: BEGIN OF LINE, COL1 TYPE I, COL2 TYPE I, END OF LINE. DATA: ITAB TYPE LINE OCCURS 10 WI
Web開發_問題解決（2）之獲取上一個頁面的a標籤的引數值
只需要在js裡面呼叫如下方法即可 //下面是獲取上一個頁面a標籤activityId傳過來的值 var url = window.location; function getUrlParam(url,name){ var
HTML高階標籤（2）————視窗分幀（2）————後臺管理頁面
使用frameset進行視窗分幀，構建簡易的後臺頁面。這篇部落格就作為一個簡易後臺管理頁面的實戰演練。 1 首先，需要一個頁面，使用<frameset>按比例劃分為適合的三個區域：頭部，選單，主體。 <frameset>不能放在<body&g
每天學習一點程式設計（2）（輸入一個英文句子，翻轉句子中單詞的順序，但單詞內字元的順序不變）
輸入一個英文句子，翻轉句子中單詞的順序，但單詞內字元的順序不變。句子中單詞以空格符隔開。為簡單起見，標點符號和普通字母一樣處理。 例如輸入“I am a student.”，則輸出“student. a am I”。 /*題目描述：翻轉句子中單詞的順序，但單詞內字元的順序
面試總結（2）:H5新標籤的相容寫法
前段時間面試。。被問到了H5新標籤的相容寫法。。一臉懵逼。。現在做個筆記。。避免下次被問到同樣的問題！！ 方法一： 自己建立標籤。。把H5新標籤創建出來。 <!DOCTYPE html&
CSS躬行記（2）——偽類和偽元素
一、偽類選擇器 偽選擇器彌補了常規選擇器的不足，能夠實現一些特殊情況下的樣式，例如在滑鼠懸停時或只給字串中的第一個字元指定樣式。與類選擇器類似，可以從HTML元素的class屬性中檢視到，但偽選擇器不會出現在HTML文件中（有幾個例外,如:lang、::placeholder等）。並且它的關鍵字大小寫不敏
樹講解（2）——樹的輸入，重心，直徑
str 樹的直徑 names n) ostream push main define span one.樹的輸入 1.輸入每個節點父親節點的編號 #include<vector> #include<stdio.h> #include<
Windows Phone開發（2）：豎立自信，初試鋒茫
一鍵 優秀 保持 知識 sdn ant emulator 一個 動畫 上一篇文章中，我們聊了一些“大炮”話題，從這篇文章開始，我們一起來學習WP開發吧。 一、我們有哪些裝備。 安裝完VS 學習版 for WP後，也連同SDK一並安裝了，不必像安卓那樣，安裝JDK，下載
JavaScript高級程序設計（2）在HTML中使用JavaScript
有效 頁面 itl 延遲腳本 文件包含 其他 amp 體驗 url 本章內容：使用<script>元素、嵌入腳本與外部腳本、文檔模式對JavaScript的影響、考慮禁用JavaScript的場景。 1.<script>元素 向HTML頁面中
python導入模塊（2）
line -h .com pre () main alt class print main.py文件 #_*_coding:utf-8_*_ #__author__ = "csy" from module_csy import say_hello as hello