塊級元素

塊級元素的特點:

創(chuàng)新互聯(lián)建站致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，包括網(wǎng)站制作、成都網(wǎng)站制作、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營銷策劃推廣、電子商務(wù)、移動互聯(lián)網(wǎng)營銷等。創(chuàng)新互聯(lián)建站為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，創(chuàng)新互聯(lián)建站核心團(tuán)隊十多年專注互聯(lián)網(wǎng)開發(fā)，積累了豐富的網(wǎng)站經(jīng)驗，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹立了良好口碑。

• 在瀏覽器顯示時，獨占一行,默認(rèn)情況下，其寬度自動填滿其父元素寬度；

• 可以設(shè)置width，height屬性；

• 可以設(shè)置margin和padding屬性；

• 對應(yīng)于display:block

塊級元素包含：

元素	描述
<address>	定義地址
<caption>	定義表格標(biāo)題
<dd>	定義列表中定義條目
<div>	定義文檔中的分區(qū)或節(jié)
<dl>	定義列表
<dt>	定義列表中的項目
<fieldset>	定義一個框架集
<form>	創(chuàng)建表單元素
<h2> - <h7>	標(biāo)題元素
<hr>	水平線
<legend>	給fieldset元素定義標(biāo)題
<li>	定義列表項目
<noframes>	為那些不支持框架的瀏覽器顯示文本，放置于frameset標(biāo)簽內(nèi)
<noscript>	為那些不支持腳本的瀏覽器顯示文本
<ol>	有序列表
<ul>	無序列表
<p>	定義段落
<pre>	定義預(yù)格式化文本
<table>	定義表格
<tbody>	定義表格主體
<td>	表格中的標(biāo)準(zhǔn)單元格
<tr>	表格中的行
<tfoot>	表格中的頁腳
<th>	定義表頭單元格
<thead>	定義表格的表頭

內(nèi)聯(lián)元素

內(nèi)聯(lián)元素的特點：

• 相鄰的行內(nèi)元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內(nèi)容而變化
• 行內(nèi)元素設(shè)置width，height屬性無效
• 行內(nèi)元素起邊距作用的只有margin-left、margin-right、padding-left、padding-right，其它屬性不會起邊距效果。
• 對應(yīng)于display:inline；

內(nèi)聯(lián)元素包含：

元素	描述
<a>	可定義錨以及超鏈接
<abbr>	表示一個縮寫形式
<acronym>	表示只取title中首字母的縮寫形式
<b>	字體加粗
<bdo>	可覆蓋默認(rèn)的文本方向
<big>	大號字體加粗
<br>	換行
<cite>	引用進(jìn)行定義
<code>	定義計算機代碼文本
<dfn>	定義一個定義項目
<em>	定義為強調(diào)的內(nèi)容
<i>	斜體文本效果
<img>	向網(wǎng)頁中嵌入一張圖像
<input>	輸入框
<kbd>	定義鍵盤文本
<label>	為input進(jìn)行標(biāo)記/標(biāo)注
<q>	定義短的引用
<s>	表示不準(zhǔn)確不相關(guān)，卻不應(yīng)當(dāng)給予刪除的內(nèi)容
<samp>	定義樣本文本
<select>	定義單選或者多選菜單
<small>	呈現(xiàn)小號字體效果
<span>	組合文檔中的行內(nèi)元素
<strong>	語氣更強的強調(diào)內(nèi)容
<sub>	定義下標(biāo)文本
<sup>	定義上標(biāo)文本
<textarea>	多行文本輸入控件
<tt>	打字機或者等寬的文本效果
<var>	定義變量

塊級元素和內(nèi)聯(lián)元素比較記憶

塊級元素	行內(nèi)元素
獨占一行,默認(rèn)情況下，其寬度自動填滿其父元素寬度	相鄰的行內(nèi)元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內(nèi)容而變化
可以設(shè)置width，height屬性	行內(nèi)元素設(shè)置width，height屬性無效
可以設(shè)置margin和padding屬性	行內(nèi)元素起邊距作用的只有margin-left、margin-right、padding-left、padding-right，其它屬性不會起邊距效果。
對應(yīng)于display:block	對應(yīng)于display:inline；

我們在刷題的時候會遇到一個這樣的題：

eg1: 瀏覽器天生默認(rèn)inline-block元素有哪些？（擁有內(nèi)在尺寸，可以設(shè)置高度，但是不會自動換行。）

input     button     img     label    texterea

eg2: 請選出所有的置換元素（）

正確答案: A B C D   你的答案: A B C D (正確)
A. img
B. input
C. textarea
D. select

這就引出了我們接下來要講的替換元素和不可替換元素

替換元素

替換元素瀏覽器根據(jù)元素的標(biāo)簽和屬性，來決定元素的具體顯示內(nèi)容。

替換元素一般有內(nèi)在尺寸，所以具有width和height。

所以替換元素也可增加行框高度，但不影響line-height,內(nèi)容區(qū)高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。 要想替換元素居中，可以設(shè)置line-height = height， vertral-align = middle。

常見的替換元素有html中的<img>、<input>、<textarea>、<select>、<object>。

eg1: <input type="submit" name="submit" value="提交"/>

<input>標(biāo)簽是根據(jù)type屬性來決定是顯示輸入框，還是提交按鈕等等。

type屬性值	描述
button	定義可點擊按鈕（多數(shù)情況下，用于通過 JavaScript 啟動腳本）。
checkbox	定義復(fù)選框。
file	定義輸入字段和 "瀏覽"按鈕，供文件上傳。
hidden	定義隱藏的輸入字段。
image	定義圖像形式的提交按鈕。
password	定義密碼字段。該字段中的字符被掩碼。
radio	定義單選按鈕。
reset	定義重置按鈕。重置按鈕會清除表單中的所有數(shù)據(jù)。
submit	定義提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務(wù)器。
text	定義單行的輸入字段，用戶可在其中輸入文本。默認(rèn)寬度為 20 個字符。

eg2: <img src="helloWord.jpg"/>

<img>元素通過src屬性的值來讀取圖片信息并顯示出來，而如果查看html代碼，卻看不到圖片的實際內(nèi)容，而且<img>元素的內(nèi)容通常會被src屬性指定的圖像替換掉；

eg3:<object> 元素

<object> 元素（或者稱作 HTML嵌入對象元素）表示引入一個外部資源，這個資源可能是一張圖片，一個嵌入的瀏覽上下文，亦或是一個插件所使用的資源。

屬性	描述
data	一個合法的 URL 作為資源的地址，，需要為 data 和 type 中至少一個設(shè)置值。
type	data 指定的資源的 MIME 類型，需要為 data 和 type 中至少一個設(shè)置值。
usemap	指向一個 <map>元素的 hash-name；格式為 ‘#’ 加 map 元素 name 元素的值。</map>
width	資源顯示的寬度，單位是 CSS 像素。
height	資源顯示的高度，單位是 CSS 像素。
name	瀏覽上下文名稱（HTML5），或者控件名稱（HTML 4）。

也有某些元素只在一些特殊情況下表現(xiàn)為可替換元素，例如<video>、<audio>、 <picture>和 <canvas>。 通過 CSS content 屬性來插入的對象被稱作匿名可替換元素（anonymous replaced elements）。

非替換元素

html 的大多數(shù)元素是不可替換元素，即其內(nèi)容直接表現(xiàn)給用戶端

<p>不可替換元素</p>

web前端開發(fā)學(xué)習(xí)Q-q-u-n：784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻，PDF）

• 行內(nèi)非替換元素

width和height在行內(nèi)非替換元素中無效。行內(nèi)非替換元素框的寬度是它的內(nèi)容渲染后（在任何子元素相對偏移之前）的寬度，它的高則是基于字體。

如<a>、<span>是行內(nèi)非替換元素 ，但是浮動后的行內(nèi)非替換元素可以使用width和height。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁題目：web前端入門到實戰(zhàn)：HTML/CSS-塊級非塊級&替換非替換-創(chuàng)新互聯(lián)
標(biāo)題來源：http://aaarwkj.com/article18/iesdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站排名、標(biāo)簽優(yōu)化、網(wǎng)站建設(shè)、App開發(fā)、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)