淺談css的行內類型標簽和塊級標簽

来源:http://www.cnblogs.com/RomanticLife/archive/2017/12/19/8061335.html
-Advertisement-
Play Games

常用標簽的行內類型標簽有:a、span、img;塊級標簽有:div、p、h1~6、ul、ol、li、dl、dt、dd。 行內類型標簽的特征:標簽的大小由標簽的內容決定,不能設置width和height,不會自動換行。 塊級標簽的特征:可以設置width和height,會自動換行。 行內類型標簽還有一 ...


常用標簽的行內類型標簽有:a、span、img;塊級標簽有:div、p、h1~6、ul、ol、li、dl、dt、dd。

行內類型標簽的特征:標簽的大小由標簽的內容決定,不能設置width和height,不會自動換行。

塊級標簽的特征:可以設置width和height,會自動換行。

行內類型標簽還有一個特點就是:在同一行上每個標簽之間有間隙。

a標簽的現象:

 

p標簽的現象:

 

img標簽的現象:

 

解決這一現象最簡單的辦法就是將兩個標簽寫在同一行。導致這一現象的原因還有待研究。

同樣是行內標簽,現在想給他們設置width和height,其中的一種方式就是給他們設置display:inline-block;但是這種方式也會導致和上面一樣的現象有間隙。

解決這一現象有兩種方式:1.將兩個標簽寫在同一行;2.不採用display的方式,採用浮動的方式。因為浮動也可以將行內類型轉換為塊級類型,而且沒有間隙。

塊級標簽,現在給他們設置display:inline-block;想讓他們都在同一行上,這種方式也會導致標簽之間有間隙,解決的兩種辦法同上。

也就是說當給行內標簽和塊級標簽設置display:inline-block這個屬性時,標簽之間都會出現間隙。

註意:給一個標簽同時設置display和float沒有任何意義。也就是說display和float不要混用。

設置元素的幾種類型:

display:inline;-------------------->將元素設置為行內類型,此時元素在同一行內,不會自動換行,不能設置width和height;

display:block;-------------------->將元素設置為塊級類型,此時元素自動換行,可以設置width和height;

diaplay:inline-block;------------>將元素設置為內聯塊(行內塊),此時元素在同一行內,不會自動換行,但是可以設置width和height;

display:none;--------------------->不占位隱藏。將元素隱藏,不顯示;

visibility: hidden;----------------->占位隱藏。將元素隱藏,但是元素還占用著那個位置。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 推送通知可以在應用沒有啟動或者在後臺運行的時候給用戶一些提示。因此,很多應用開發者和公司用它來推銷自己的產品。通過這個渠道推送自己的產品是不錯的選擇,但是一定要遵守起碼的道德規範(不要在用戶睡覺的時候推送你的通知),否則用戶就會毫不留情地屏蔽你這個應用的通知,甚至卸載你的應用。 一,蘋果究竟有多少個 ...
  • 1、Android系統目前支持的CPU架構:ARMv5、ARMv7、x86、MIPS、ARMv8、MIPS64、x86_64,每一種都關聯著一個ABI(Application Binary Interface) 2、ABI:定義了二進位文件(尤其是.so文件)如何運行在相應系統平臺上,包括使用的指令 ...
  • 問題引入: 有一個下載功能,在Android 5.x設備上運行正常,Android 6.x上運行異常,現象是下載進度卡在0%。 問題排查發現,是sdk的target設置為23導致,修改為21則恢復正常。 這就引出了今天討論的問題:Android中build target,minSdkVersion, ...
  • 一、簡介 什麼是cocoapods?——是OS X和iOS下一個第三方類庫管理工具。通過cocoapods,可以為項目添加“Pods“依賴庫,並且管理其版本。 cocoapods好處: (1)可以方便引入第三方依賴庫,自動完成各種配置:配置編譯階段、連接器選項等。 (2)可以方便查找新的、標準的第三 ...
  • 第二篇教程之前寫了一半,感覺不太好寫,而且內容單純介紹API,要說的很多,又枯燥乏味。所以那半篇文章就放下了。後來又開始思考這教程該怎麼寫,經過幾天的沉澱,終於有了一個決定:這個教程,就用IT戀里的實例來和大伙分享了,看看在實戰是怎麼被應用的。 ...
  • 實現應用自身被卸載時打開某一網址的c代碼 以上c文件源碼和使用的文章出自: http://blog.csdn.net/qq_21793463/article/details/48246685 向您的項目添加 C 和 C++ 代碼 搭配使用 Android Studio 2.2 或更高版本與 Andr ...
  • 原文鏈接:http://www.cnblogs.com/feidu/p/8057012.html 當Android跨進程啟動Activity時,過程界面很黑屏(白屏)短暫時間(幾百毫秒?)。當然從桌面Lunacher啟動一個App時也會出現相同情況,那是因為App冷啟動也屬於跨進程啟動Activit ...
  • 1、概述 Vue在觀察到數據變化時並不是立即更新DOM,而是開啟一個隊列,並緩衝在同一個事件迴圈中發生所有數據的改變。 在緩衝時會去除重覆的數據,從而避免不必要的計算和DOM操作。 在下一個事件迴圈的tick中,Vue刷新隊列並執行實際(已去重)的工作。 $nextTick就是知道什麼時候DOM更新 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...