首頁 > 開發者 > CSS

CSS學習筆記:HTML元素和CSS盒子

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
1.網頁的內容
網頁的內容是編碼在html頁面內的資訊,在html標記的開關標籤間可以找到它.這些標籤定義了內容的結構.
樣本:
  1. <p>This is a<strong>Car</strong></p>

網頁的內容為:This is a Car
2:顯示方式
內容的顯示方式不由HTML定義,它由CSS規則決定.瀏覽器對<p>和<strong>標籤具有預設規則.<p>和<strong>都顯示為"顯示盒子".就是CSS瀏覽器處理HTML元素的方法.儘管不是所有元素都顯示在螢幕上,
但是每個HTML元素對應於一個顯示盒子.顯示盒子是螢幕上的一個矩形.

HTML元素顯示為CSS顯示盒子的真正方法被稱為:"可視格式化模式",該模式告訴瀏覽器應該如何在螢幕上顯示HTML內容.

3.HTML元素
3.1類型
在可視格式化模式中,標記元素分為兩個基本類型:塊(block)元素和內聯(inline)元素.元素類型決定CSS瀏覽器如何顯示該元素的執行個體.

3.2塊元素
塊元素是作為內容的獨特塊而顯示的元素,它以新行開始和結束,逐個列出,沿頁面垂直向下,它們儘可能地寬.這意味著除非用某種方法限制它們,否則它們會伸展到整個頁面.
HTML中的塊元素:
<div>,<blockquote>,<table>,<p>,<br />,<ol>,以及<h1>~<h6>

3.3內嵌元素
內嵌元素沒有開始行和結束行,包含於文字資料流之內, 在某一行中逐個出現,沒有換行,水平放置在頁面中,直到空間用盡為止,然後在下一行中繼續前一行.
HTML中的內嵌元素:
<em>,<span>,<b>,<img>,<input>和<a>

3.4改變元素類型
每個HTML元素的最初類型由HTML規範設定,使用display屬性可以改變元素類型.

4.樹型文檔
每個網頁實際上是標籤和內容的樹,這些樹的類型與電腦科學中使用的資料結構類型相同.
樹:是一種以元素的階層表示資訊的方法.可以看成與家譜中的樹類似的結構!開始於某個祖先,然後向下派生.樹的每個部分稱為節點,節點既是元素,也可以是某些文本.
樣本:

  1. <html>
  2. <head>
  3. <title>Example</title>
  4. </head>
  5. <body>
  6.  <h1>This is a example<i>By:Pktmandy</i></h1>
  7.   <p>I Think that I shall never see<br>A poem as lovely as ?</p>
  8. </body>
  9. </html>

5.盒子模型
將HTML文檔定義為資料樹後,就可以直觀的解釋為一系列盒子.對於WEB開發人員來說,這可能是用來思考頁面最簡單的方法.通過首先視覺化樹狀結構來理解它是非常重要的,因為哪是CSS瀏覽器考慮頁面的方式.
使用者可以認為這些盒子是裝其它盒子或文本值的容器.除了樹中對應於根節點的盒子之外,CSS盒子模型中的每個盒子裝在另一個盒子內.外面的盒子稱為封裝盒,塊封裝盒可以裝其它盒子或內聯盒子,內聯盒子只能裝內聯盒子.

 

 

注意:
<br>標籤是一個空標籤,它不包含任何內容,但是它仍然產生了一個盒子.<head>盒子在圖中出現,但是在HTML中,<head>標籤定義為display:none,這就是為什麼使用者從來看不見<head>標籤中內容的原因.

6.盒子顯示內容
建立文檔樹後,後填充盒子模型,瀏覽器確定有一個盒子存在,它會根據自身顯示HTML的內部規則或根據盒子的樣式屬性顯示該盒子.
在某種程式上,所有CSS屬性都是盒子顯示內容,它們控制盒子如何顯示.然而:三個屬性定義盒子的邊緣-邊矩(margin),邊框(border),填充(padding)

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More