CSS中為什麼有的元素能夠設置高度,而有的元素卻不能設置高度與寬度?

来源:https://www.cnblogs.com/gsdoublel/archive/2019/07/30/11271791.html
-Advertisement-
Play Games

可以使用{display:block}將內聯元素變為塊級元素,同時使用{display:inline}將塊級元素變為內聯元素。 {display:inline-block}又是怎麼回事,根據張鑫旭老師《CSS的世界》中的解釋可以理解為,每個元素都有兩個盒子,外在的盒子和內在的盒子,外在的盒子負責元素 ...


可以使用{display:block}將內聯元素變為塊級元素,同時使用{display:inline}將塊級元素變為內聯元素。

{display:inline-block}又是怎麼回事,根據張鑫旭老師《CSS的世界》中的解釋可以理解為,每個元素都有兩個盒子,外在的盒子和內在的盒子,外在的盒子負責元素是可以一行顯示,還是只能換行顯示,內在的盒子負責寬高、內容的呈現。

{display:block}

{display:inline}

{display:inline-block}。

 

實際中我們常常見到的{display:table} {display:inline-table}那又是怎麼回事呢?

 

首先,我們要區分一個概念:“塊級元素”與{display:block}不是一個概念。常見的塊級元素<li>預設的值為list-item,而<table>元素的預設的display的值為table。

 

{display:table}代表著此元素會作為表格來顯示,表格前後帶有換行符

{display:block} 此元素將顯示為塊級元素,此元素前後會有換行符。

 

{display:none}此元素不會被顯示

{display:table-cell}


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

-Advertisement-
Play Games
更多相關文章
  • 如果OKHTTP第一次出現SocketTimeoutException,後續即使網路已經恢復正常,請求也始終返回SocketTimeoutException。 ...
  • 一、層疊性 1.定義:CSS處理衝突的一種能力 2.註意點:層疊性只有在多個選擇器中“同一標簽”,然後又設置了“相同的屬性”,才會發生層疊性 3.CSS縮寫:Cascading StyleSheet 解釋:如上代碼我們對p標簽以及odd類進行了屬性的設置,但只遵循了一種屬性設置,因此可以看出CSS具 ...
  • 給img添加類 類的style為 display:block; width:100%!important; height:100%!important; 即可響應手機和頁面的圖片 ...
  • 1.axios 原理還是屬於 XMLHttpRequest, 因此需要實現一個ajax。 2.但還會需要一個promise對象來對結果進行處理。3.ajax實現var Ajax={ get: function(url, fn) { // XMLHttpRequest對象用於在後臺與伺服器交換數據 v ...
  • 功能介紹 本系統是基於fabric.js實現的canvas版圖片,文本編輯器,支持對圖片的放大,縮小,旋轉,鏡面翻轉,拖動,顯示/隱藏圖層,刪除圖層,替換圖層等操作,對文本支持修改文本內容,顏色,字體,加粗,斜體,下劃線,背景色等,同時支持圖片已有的操作,拖動圖層有輔助線功能,可對畫布做放大縮小功能 ...
  • 場景描述 如下,打開頁面時,獲取預設選中的項目,同時也會初始化Combobox下拉框下拉列表數據 問題描述 獲取預設選中項目及下拉列表的js函數位於common.js文件,類似如下: // 根據項目類型,獲取對應的項目 function getProjects(projectType) { // 請 ...
  • SEO定義 Search Engine Optimization 搜索引擎優化 一,常用的HTTP-EQUIV類型: Set-Cookie(cookie設定) 說明:如果網頁過期,存檔的cookie將會被刪除(必須是GMT的時間格式) <meta http-equiv="Set-Cookie" co ...
  • 一、項目目錄結構: 方式1、直接利用官方提供好的腳手架工具進行搭建:npx create-nuxt-app <項目名> 目錄會是這樣(具體目錄都放些什麼,請看官方文檔,詳細): 方式2、手工慢慢來,請看官方文檔:https://zh.nuxtjs.org/guide/installation#%E4 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...