div、span

来源:http://www.cnblogs.com/suifengershi/archive/2017/01/11/6272587.html
-Advertisement-
Play Games

1.Html區塊元素 HTML可以通過<div>和<span>將元素組合起來 大多數HTML元素被定義為塊級元素或內聯元素, 而塊級元素在瀏覽器顯示時,通常會以新行來開始(或結束)。如:<h1>,<p>,<ul>,<table> 內聯元素在顯示時通常不會以新行開始。如:<b>,<td>,<a>,<i ...


1.Html區塊元素

  HTML可以通過<div>和<span>將元素組合起來

  大多數HTML元素被定義為塊級元素內聯元素

  而塊級元素在瀏覽器顯示時,通常會以新行來開始(或結束)。如:<h1>,<p>,<ul>,<table>

  內聯元素在顯示時通常不會以新行開始。如:<b>,<td>,<a>,<img>

2.<div>元素

  HTML <div> 元素是塊級元素,它是可用於組合其他 HTML 元素的容器。

  <div> 元素沒有特定的含義。除此之外,由於它屬於塊級元素,瀏覽器會在其前後顯示折行。

  如果與 CSS 一同使用,<div> 元素可用於對大的內容塊設置樣式屬性。

  <div> 元素的另一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文檔佈局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。

預設情況下,瀏覽器通常會在<div>元素前後放置一個換行符。(可以通過css改變這種情況

  1.設置float

  設置float:left樣式讓div對象靠左,這樣div會失去本身的寬度樣式

 1     <!DOCTYPE html> 
 2     <html> 
 3     <head> 
 4     <meta charset="utf-8" /> 
 5     <title>無標題文檔</title> 
 6     <style> 
 7     div{ float:left} 
 8     </style> 
 9     </head> 
10     <body> 
11     <div>第一個div盒子</div> 
12     <div>第二個div盒子</div> 
13     </body> 
14     </html> 

  2.設置display樣式

  設置display:inline樣式讓div失去預設100%獨占一行的寬度

  display:inline(讓對象併排顯示)

 1     <!DOCTYPE html> 
 2     <html> 
 3     <head> 
 4     <meta charset="utf-8" /> 
 5     <title>div併排實例 www.dvicss5.com</title> 
 6     <style> 
 7     div{ display:inline} 
 8     </style> 
 9     </head> 
10     <body> 
11     <div>第一個div盒子</div> 
12     <div>第二個div盒子</div> 
13     </body> 
14     </html> 

    2.1屬性

屬性   描述
align

left

right

center

justify

html5中不支持

 

3.<span>元素

  <span>元素是內聯元素,可以作為文本的容器,沒有特定的含義。當與CSS一起使用時,<span>元素可以用於為部分文本設置樣式屬性。

  3.1說明

  <span> 用於對文檔中的行內元素進行組合。

  <span> 標簽沒有固定的格式表現。當對它應用樣式時,它才會產生視覺上的變化。如果不對 <span> 應用樣式,那麼 <span> 元素中的文本與其他文本不會任何視覺上的差異。

  <span> 標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式。

  

 


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

-Advertisement-
Play Games
更多相關文章
  • 頁面直接請求, Controller代碼 ...
  • 一.開發工具規範: 1. 開發工具經項目負責人調試後統一確定。 2. 開發工具一經確定不允許集成任何非統一插件,若有需要,經項目負責人同意後統一為 項目組成員添加。 3. 開發工具的編碼格式不允許修改。 二.排版規範: 1. 關鍵詞(或變數)和操作符之間加一個空格。 例如:int iCont = 1 ...
  • 集合技術 作業 作業 猜數字游戲 猜數字游戲 /* * 猜數字游戲 */ public class HomeWork1 { public static void main(String[] args) { // 獲取被猜的那個數字,需要使用隨機數類產生 Random r = new Random() ...
  • Memory leak patterns in JavaScript Handling circular references in JavaScript applications Abhijeet Bhattacharya and Kiran Shivarama SundarPublished o ...
  • 以下分析均採取沙箱模式 js (function (window) { //為了提高性能把需要的變數統一提前聲明 var arr = [], push = arr.push; //為區別jQuery,此文章以iQuery來定義封裝的函數 function iQuery( selector ) { r ...
  • echarts是百度的一個圖表插件,確實好用美觀。 之前實習接觸到的頁面大多是下麵這種調用方式 這次有一個頁面需要計時器反覆載入新數據,然後重繪echarts圖表。一開始我還是使用了上面這種方式,沒有發現太大問題。第二天早上來調試的時候,網頁運行了一段時間,我的電腦記憶體達到了56%,我是8G的記憶體, ...
  • 今天博客園註冊成功了,很是欣喜,趕緊在博客園留下我的足記。 半年前,我還是剛走出校園的一枚IT小白,對於IT行業什麼都不懂,我大學的專業是採礦工程,接觸過的編程語言只有VB,但說實話,那時候啥也不懂,考試嗎,相信大家也都知道,在考試前老師一般會畫原題,你死記硬背就行了,根本不用懂那行代碼什麼意思,只 ...
  • 經測試,相容IE8 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...