前端學習1--行內元素 vs 塊級元素(基礎概念+案例實操)

?一、內外邊距學習:

(1)簡單理解:

  • padding為內邊距。padding不會影響元素的位置,只會調整元素的內容(文字)與邊框之間的間距

  • margin為外邊距。margin會影響元素在流式布局中的位置,改變元素與相鄰元素之間的間距

?(2)具體理解:

margin:
  • margin可以為正值、負值或百分比。正值表示元素與相鄰元素之間的間距,負值表示元素會覆蓋相鄰元素的部分,百分比則表示相對于父元素的寬度。
  • margin的值可以分別指定上、右、下、左四個方向的距離:
    margin:10px 60px 50px 20px;  /* 上右下左 */
    margin: 10px 20px;  /* 上下  左右 */
  • margin的值不會對元素自身大小產生影響,只會影響元素與相鄰元素之間的距離。
?padding:
  • padding可以為正值、負值或百分比。正值表示元素內容與邊框之間的間距,負值則表示元素的內容會超出邊框,百分比則表示相對于元素的寬度。
  • padding的值可以分別指定上、右、下、左四個方向的距離,也可以使用簡寫方式指定一到四個方向的距離。
  • padding的值會影響元素的尺寸,增加padding會增加元素的大小。?

二、行內元素 vs 塊級元素學習:

一、基礎概念

1. 塊級元素 :
  • 特點

    • 獨占一行,前后會自動換行
    • 可以設置寬度(width)、高度(height)、內外邊距(margin/padding)
    • 默認寬度是父元素的100%
  • 常見塊級元素標簽

    • <div>?- 通用容器
    • <p>?- 段落
    • <h1>-<h6>?- 標題
    • <ul>,?<ol>,?<li>?- 列表
    • <section>,?<article>,?<header>,?<footer>?- HTML5語義標簽
2. 行內元素 :
  • 特點

    • 不會獨占一行,與其他行內元素排在同一行
    • 設置寬度(width)、高度(height)無效
    • 只能設置左右邊距(margin-left/right),上下邊距無效
    • 默認寬度由內容決定
  • 常見行內元素標簽

    • <span>?- 通用行內容器
    • <a>?- 鏈接
    • <strong>,?<em>?- 強調文本
    • <img>?- 圖片(特殊,可以設置寬高)
    • <input>,?<button>?- 表單元素

3. 常見:div和span的區別

  • <div>是塊級元素,用于布局和分組大塊內容
  • <span>是行內元素,用于對文本的一部分進行樣式設置或操作

二、代碼示例

<!DOCTYPE html>
<html>
<head><style>.block {background-color: lightblue;padding: 10px;     /* 內邊距*/margin: 10px;      /* 外邊距*/}.inline {background-color: lightcoral;padding: 10px;margin: 10px;}</style>
</head>
<body><div class="block">我是div塊級元素1號</div><div class="block">我是div塊級元素2號</div><span class="inline">我是span行內元素1號</span><span class="inline">我是span行內元素2號</span>
</body>
</html>

?三、運行結果圖:

這里可以看出前面提到的行內元素的特點:margin只能設置左右邊距(margin-left/right),上下邊距無效:

三、實戰案例:

<!DOCTYPE html>
<html><head><style>.card {width: 300px;border: 1px solid #ccc;border-radius: 8px;padding: 15px;margin: 20px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}.title {font-size: 20px;margin-bottom: 10px;color: #333;}.content {color: #666;line-height: 1.5;}.tags {margin-top: 15px;}.tag {display: inline-block;background-color: #f0f0f0;padding: 3px 8px;border-radius: 4px;margin-right: 5px;font-size: 12px;}.author {font-style: italic;   /* 斜體 */color: #888;}</style></head><body><div class="card"><h2 class="title">前端學習指南</h2><p class="content">學習前端開發需要掌握HTML、CSS和JavaScript等基礎知識。HTML用于構建網頁的結構,CSS用于樣式設計,而JavaScript則用于實現交互功能。通過不斷實踐和學習,可以逐步提高前端開發技能。<span class="author">---island</span></p><div class="tags"><span class="tag">HTML</span><span class="tag">CSS</span><span class="tag">JavaScript</span></div></div></body>
</html>

?這里可以看到.tag這里有一個新的display,來學習一下:

1. display屬性基礎

  1. display屬性:可以通過CSS的display屬性改變元素的顯示方式

    • display: block?- 轉為塊級元素

    • display: inline?- 轉為行內元素

    • display: inline-block?- 行內塊元素(可設置寬高但不換行

2.對比下三種方式:

3.三種顯示方式對比表

特性inlineblockinline-block
是否換行不換行換行不換行
可設置寬高不可以可以可以
內外邊距只有左右有效全部有效全部有效
默認寬度內容決定父元素100%內容決定(可設寬高)
典型HTML元素span, adiv, pimg, button

?

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/90313.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/90313.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/90313.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Express + mysql2 + jwt 實現簡單的登錄鑒權

目前項目中使用Express 實現簡單API功能&#xff0c;需要提供一套登錄鑒權方案。這邊是API側實現 相關路由的登錄鑒權。大體思路&#xff1a;就是&#xff0c;登錄接口中通過jwt加密 token返回前端&#xff0c;前端其他接口把加密好的放入請求頭Authorization中。中間件通過請求…

ReAct (Reason and Act) OR 強化學習(Reinforcement Learning, RL)

這個問題觸及了現代AI智能體&#xff08;Agent&#xff09;構建的兩種核心思想。 簡單來說&#xff0c;ReAct 是一種“調用專家”的模式&#xff0c;而強化學習 (RL) 是一種“從零試錯”的模式。 為了讓你更清晰地理解&#xff0c;我們從一個生動的比喻開始&#xff0c;然后進行…

iTwinjs 4.10-4.11 更新

撤銷更改 目前&#xff0c;撤銷一個有缺陷的變更集的唯一方法是從 iModel Hub 中移除它&#xff0c;這可能會導致許多副作用&#xff08;無法撤銷&#xff09;。一個更好的方法是在時間線中撤銷變更集&#xff0c;并將其作為新的變更集引入。盡管這種方法仍然具有侵入性&#…

【CSS-15】深入理解CSS transition-duration:掌握過渡動畫的時長控制

在現代網頁設計中&#xff0c;平滑的過渡效果是提升用戶體驗的關鍵因素之一。CSS transitions 為我們提供了一種簡單而強大的方式來實現元素在不同狀態之間的平滑過渡&#xff0c;而 transition-duration 屬性則是控制這些過渡效果時長的核心工具。本文將全面探討 transition-d…

mysql-筆記

1. 安裝mysql # 使用brew安裝 brew install mysql# 查看是否安裝成功 mysql -V 相關文檔&#xff1a; mac&#xff1a;macOS下MySQL 8.0 安裝與配置教程 - KenTalk - 博客園 Linux安裝&#xff1a;linux安裝mysql客戶端_linux mysql 客戶端-CSDN博客 2. 啟動mysql 每次使…

Spring Boot啟動優化7板斧(延遲初始化、組件掃描精準打擊、JVM參數調優):砍掉70%啟動時間的魔鬼實踐

Spring Boot啟動優化7板斧&#xff1a;砍掉70%啟動時間的魔鬼實踐1. 延遲初始化&#xff1a;按需加載的智慧2. 組件掃描精準打擊&#xff1a;告別無差別掃描3. JVM參數調優&#xff1a;啟動加速的隱藏開關4. 自動配置瘦身&#xff1a;砍掉Spring Boot的"贅肉"5. 類加…

從0開始學習計算機視覺--Day08--卷積神經網絡

之前我們提到&#xff0c;神經網絡是通過全連接層對輸入做降維處理&#xff0c;將輸入的向量通過矩陣和激活函數進行降維&#xff0c;在神經元上輸出激活值。而卷積神經網絡中&#xff0c;用卷積層代替了全連接層。 不同的是&#xff0c;這里的輸入不再需要降維&#xff0c;而…

解決阿里云ubuntu內存溢出導致vps死機無法訪問 - 永久性增加ubuntu的swap空間 - 阿里云Linux實例內存溢出(OOM)問題修復方案

效果圖報錯通過對實例當前截屏的分析發現&#xff0c;實例因 Linux實例內存空間不足&#xff0c;導致操作系統出現內存溢出&#xff08;OOM&#xff09; 無法正常啟動。請您根據 Code&#xff1a;1684829582&#xff0c;在文檔中查詢該問題對應的修復方案&#xff0c;并通過VNC…

Serverless JManus: 企業生產級通用智能體運行時

作者&#xff1a;叢霄、陸龜 概述&#xff1a;本文介紹如何使用 JManus 框架構建通用智能體應用&#xff0c;部署并運行在 Serverless 運行時&#xff0c;構建企業級高可用智能體應用的實踐經驗。基于阿里云 Serverless 應用引擎SAE 運行穩定高可用的智能體應用&#xff0c; 基…

MySQL的數據目錄

導讀&#xff1a;根據前面的所學知識&#xff0c;我們知道了InnoDB存儲引擎存儲數據的數據結構、存儲過程&#xff0c;而被組織好的數據則被存儲在操作系統的磁盤上&#xff0c;當我們在對表數據進行增刪改查時&#xff0c;其實就是InnoDB存儲引擎與磁盤的交互。此外&#xff0…

Web前端開發: :has功能性偽類選擇器

:has功能性偽類選擇器::has() 是 CSS 中的一個功能性偽類選擇器&#xff0c;它允許開發者根據元素的后代元素、兄弟元素或后續元素的存在或狀態來選擇目標元素。它本質上是一個“父選擇器”或“關系選擇器”&#xff0c;解決了 CSS 長期以來無法根據子元素反向選擇父元素的痛點…

深度學習8(梯度下降算法改進2)

目錄 RMSProp 算法 Adam算法 學習率衰減 RMSProp 算法 RMSProp(Root Mean Square Prop)算法是在對梯度進行指數加權平均的基礎上&#xff0c;引入平方和平方根。 其中e是一個非常小的數&#xff0c;防止分母太小導致不穩定,當 dw 或 db 較大時&#xff0c;(du)2,(db)2會較大&…

JAVA面試寶典 -《網絡編程核心:NIO 與 Netty 線程模型詳解》

網絡編程核心&#xff1a;NIO 與 Netty 線程模型詳解 文章目錄網絡編程核心&#xff1a;NIO 與 Netty 線程模型詳解一、傳統 BIO 模型&#xff1a;排隊買奶茶的阻塞模式 &#x1f964;1.1 專業解釋1.2 簡單點比喻1.3 簡單示例二、NIO 模型&#xff1a;智能叫號餐廳系統 &#x…

藍橋杯 第十六屆(2025)真題思路復盤解析

本文以洛谷平臺所提供的題目描述及評測數據為基礎進行講解。 前言&#xff1a;這是本人的藍橋杯試卷&#xff0c;大概排省一前40%的位置&#xff0c;實際上這屆題目偏難&#xff0c;我沒有做出太多的有效得分。我把當時的思路和現在學習的思路都復盤進來&#xff0c;希望給大家…

蘭頓螞蟻路徑lua測試

蘭頓螞蟻local p0 local x,y,z0,7,0 local function add() local result,id Block:getBlockID(x,y,z)if id1 thenBlock:destroyBlock(x,y,z,false) pp90 elseBlock:setBlockAll(x,y,z,1,0) pp-90 end x,zx-math.floor(0.5math.sin(math.rad(p))),z-math.floor(0.5math.cos(m…

【Axure RP】什么是Axure?Axure可以用來做什么?

【Axure RP】什么是Axure&#xff1f;Axure可以用來做什么&#xff1f; 目錄【Axure RP】什么是Axure&#xff1f;Axure可以用來做什么&#xff1f;Axure RP簡介Axure RP 是什么&#xff1f;Axure RP核心功能和應用場景Axure RP簡介 Axure RP 是什么&#xff1f; Axure RP 是一…

Java項目:基于SSM框架實現的暢玩北海旅游網站管理系統【ssm+B/S架構+源碼+數據庫+畢業論文】

摘 要 現代經濟快節奏發展以及不斷完善升級的信息化技術&#xff0c;讓傳統數據信息的管理升級為軟件存儲&#xff0c;歸納&#xff0c;集中處理數據信息的管理方式。本暢玩北海旅游網站就是在這樣的大環境下誕生&#xff0c;其可以幫助管理者在短時間內處理完畢龐大的數據信息…

NuxtJS中網絡請求模塊的封裝與最佳實戰

在網絡開發中&#xff0c;封裝一個簡潔、高效的網絡請求模塊對于項目的可維護性和擴展性至關重要。本文將詳細介紹如何在NuxtJS中封裝一個通用的網絡請求模塊&#xff0c;并結合最佳實踐來說明如何使用它來進行網絡請求。良好的代碼結構和封裝&#xff0c;不但結構清晰還能夠大…

云歸子批量混剪軟件批量剪輯軟件批量分割視頻更新記錄

www.yunguizi.com 優化顯卡硬件加速配置 ? 優化 2025年07月07日 版本 v1.1.6 優化顯卡硬件加速配置 修復了一些重要內容 &#x1f41b; 修復 2025年07月06日 版本 v1.1.6 修復了一些重要內容 重構讀寫機制 ? 優化 2025年07月06日 版本 v1.1.6 優化了一些重要內容&#xff1b;…

SpringBoot校園外賣服務系統設計與實現源碼

概述 基于SpringBoot開發的校園外賣服務系統&#xff0c;實現了從外賣管理到訂單處理的全流程數字化解決方案&#xff0c;包含外賣管理、訂單處理、用戶管理等全方位功能。 主要內容 核心功能模塊&#xff1a; ??個人信息管理??&#xff1a; 修改密碼個人信息修改 ??…