【前端CSS3】CSS顯示模式(黑馬程序員)

文章目錄

  • 一、前言🚀🚀🚀
  • 二、CSS元素顯示模式:??????
      • 2.1 什么是元素顯示模式
      • 2.2 塊元素
      • 2.3 行內元素
      • 2.4 行塊元素
      • 2.5 元素顯示模式的轉換
  • 三、總結🚀🚀🚀


一、前言🚀🚀🚀

在這里插入圖片描述

??
回報不在行動之后,回報在行動之中。


這個系列可以叫作《前端從零開始系列》,因為我打算就是花一個周期時間,來過一遍CSS+JS個人覺得筆記重點且常見的知識點,并且總結起來,如這一篇CSS選擇器,歸納各類選擇器,將是這個系列的開篇之作。為了方便前端CSS3樣式與JS知識的總結,請期待這個系列的更新吧。


二、CSS元素顯示模式:??????

??首先需要了解what(是什么)、分類、轉換。

2.1 什么是元素顯示模式

在這里插入圖片描述

HTML元素一般分為塊元素和行內元素兩種類型,塊模式如下圖:如果是一個盒子獨占一個屏幕,用塊元素合適一些。

在這里插入圖片描述

2.2 塊元素

在這里插入圖片描述

注意事項:

在這里插入圖片描述

2.3 行內元素

在這里插入圖片描述

在這里插入圖片描述
在這里插入圖片描述

在這里插入圖片描述

如下圖:a標簽里面放個塊元素。

在這里插入圖片描述

2.4 行塊元素

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

2.5 元素顯示模式的轉換

行元素改為塊元素:

在這里插入圖片描述

在這里插入圖片描述

塊元素改為行元素:

在這里插入圖片描述

在這里插入圖片描述

三、總結🚀🚀🚀

??
在這里插入圖片描述

??
??
Alt

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

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

相關文章

巴圖自動化Modbus協議轉Profinet協議網關模塊連智能儀表與PLC通訊

一、現場要求:PLC作為控制器,儀表設備作為執行設備。執行設備可以實時響應PLC傳送的指令,并將數據反饋給PLC,從而實現PLC對儀表設備的控制和監控,實現對生產過程的精確控制。 二、解決方案:通過巴圖自動化Modbus協議轉Profinet協議…

前端面試題4(瀏覽器對http請求處理過程)

瀏覽器對http請求處理過程 當我們在瀏覽器中輸入URL并按下回車鍵時,瀏覽器會執行一系列步驟來處理HTTP請求并與服務器通信。下面是瀏覽器處理過程 1. 解析URL 瀏覽器首先解析輸入的URL,提取出協議(通常是http://或https://)、主…

Robust Test-Time Adaptation in Dynamic Scenarios--論文閱讀

論文筆記 資料 1.代碼地址 https://github.com/BIT-DA/RoTTA 2.論文地址 https://arxiv.org/abs/2303.13899 3.數據集地址 coming soon 1論文摘要的翻譯 測試時間自適應(TTA)旨在使預先7訓練的模型適用于僅具有未標記測試數據流的測試分布。大多數以前的TTA方法已經在…

為什么要卸載手機上面的抖音?

刪除抖音等社交媒體應用可能出于多種原因,這里列舉一些常見的考慮因素: 1. **時間管理**: 抖音和其他社交媒體平臺可能會占用大量時間,影響個人的日常生活和工作學習效率。 這個對于自己而言是一個客觀存在的事情: 2.…

安卓請求服務器[根據服務器的內容來更新spinner]

根據服務器的內容來更新spinner 本文內容請結合如下兩篇文章一起看: 騰訊云函數node.js返回自動帶反斜杠 騰訊云函數部署環境[使用函數URL] 現在有這樣一個需求,APP有一個下拉選擇框作為版本選擇,因為改個管腳就變成一個版本,客戶需求也很零散,所以后期會大量增加版本,這時候每…

數據預處理:統計關聯性分析/數據清洗/數據增強/特征工程實例

專欄介紹 1.專欄面向零基礎或基礎較差的機器學習入門的讀者朋友,旨在利用實際代碼案例和通俗化文字說明,使讀者朋友快速上手機器學習及其相關知識體系。 2.專欄內容上包括數據采集、數據讀寫、數據預處理、分類\回歸\聚類算法、可視化等技術。 3.需要強調的是,專欄僅介紹主…

gitLab使用流程

標題1.配置賬戶 git config --global user.name git config --global user.email mygitlabmali.cn 標題2.生成秘匙 ssh-keygen -t rsa -C “mygitlabmail.cn” 。 //輸入命令后一直回車 ,輸入命令后一直回車(密碼可以不填),至…

Java面試題系列 - 第2天

題目:Java中的線程池模型及其配置策略 背景說明:在Java多線程編程中,線程池是一種高效的線程復用機制,能夠有效管理和控制線程的創建與銷毀,避免頻繁創建和銷毀線程帶來的性能開銷。理解和掌握線程池的配置策略對于優…

Anaconda+Pycharm兩個軟件從頭到尾下載流程

前言: 1、使用教程前,請將電腦上的所有的Python卸載掉。再下載Anaconda,Anaconda這個軟件里面就含有python。 徹底刪除python方法: 1、計算機——屬性——高級系統設置——環境變量 2、查看電腦用戶自己設計的環境變量&#x…

【智能制造-8】輸送線運動控制算法

輸送線運動控制算法包含哪些內容? 輸送線運動控制算法包含以下幾個主要內容: 速度控制算法: 根據目標速度和當前實際速度,調整電機的輸出功率,達到所需的輸送線速度。 常見的算法包括PID控制、自適應控制等。位置/距離控制算法: 監控輸送線上物料的位置或移動距離…

Xilinx FPGA:vivado關于RAM的一些零碎的小知識

一、xilinx fpga嵌入式存儲單元 RAM----隨機存取存儲器:上電工作時可以隨時從任何一個指定的地址寫入(存入)或讀出(取出)信息。缺點是一旦斷電所存儲的數據將隨之丟失。RAM在計算機和數字系統中用來暫時性存儲程序、數…

golang net.url 標準庫

golang net.url 標準庫 Go 語言標準庫中的 net/url 包提供了用于 URL 解析、構建和查詢的功能。這個包使我們能夠處理 URL,從中提取出各個部分,比如協議、主機、路徑和查詢參數等。以下是 net/url 包中一些常用的功能: 解析URL:使…

下載安裝MySQL

1.軟件的下載 打開官網下載mysql-installer-community-8.0.37.0.msi 2.軟件的安裝 mysql下載完成后,找到下載文件,雙擊安裝 3.配置環境變量 4.自帶客戶端登錄與退出

護網藍隊面試

一、sql注入分類 **原理:**沒有對用戶輸入項進行驗證和處理直接拼接到查詢語句中 查詢語句中插?惡意SQL代碼傳遞后臺sql服務器分析執行 **從注入參數類型分:**數字型注入、字符型注入 **從注入效果分:**報錯注入、布爾注入、延時注入、聯…

測試引擎模擬接口實戰

在上一章的內容中,我簡單介紹了整個微服務的各個子模塊,還封裝了一些工具類。 當然,若還沒完成上次內容的也可以點擊右側的傳送門------傳送門 EngineApplication 在開發測試引擎模擬接口之前,還需要給xxx-engine創建一個Sprin…

bpftrace幾種使用實例

1. 排查內存泄漏 memory.c memory.bt 可以執行相關memory,用bpftrace追蹤malloc和free的過程 修改memory.bt,加上malloc和free統計,重新執行 2. 驗證tcp連接關閉是應用關閉還是內核關閉 nginx服務啟動后,會處于監聽狀態&…

Linux python3.6安裝mayavi報錯

需要將vtk版本降級,以及uninstall pyqt5(安裝的vtk版本是9.3.1) pip3 install vtk8.1.0 或者9.0.1 報錯 Building wheels for collected packages: mayavi Building wheel for mayavi (setup.py) ... error ERROR: Command errored out…

速盾:cdn防止采集?

CDN(Content Delivery Network)是一種網絡加速技術,主要用于分發網站內容給用戶,并提供一定的安全保護。CDN的主要作用是通過將網站的靜態資源(如圖片、CSS、JS等)緩存到分布在全球各地的服務器上&#xff…

imx6ull/linux應用編程學習(9)串口應用編程

什么是串口? 串口全稱叫做串行接口,串行接口指的是數據一個一個的按順序傳輸,通信線路簡單。使用兩條線即可實現雙向通信,一條用于發送,一條用于接收。串口通信距離遠,但是速度相對會低,串口是一…

GPU相關的一些截圖(備查,待整理)

GPU相關的一些截圖 這里記錄一些與GPU相關的截圖,方便查閱