如何進(jìn)行中塊級(jí)元素和行內(nèi)元素的特征與轉(zhuǎn)換-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)如何進(jìn)行中塊級(jí)元素和行內(nèi)元素的特征與轉(zhuǎn)換，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

平城網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,平城網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為平城1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的平城做網(wǎng)站的公司定做！

塊級(jí)元素和行內(nèi)元素

 1.元素的定義

   根據(jù)CSS規(guī)范的規(guī)定，每一個(gè)網(wǎng)頁(yè)元素都有一個(gè)display屬性，用于確定該元素的類型，每一個(gè)元素都有默認(rèn)的display屬性值，比如div元素，它的默認(rèn)display屬性值為“block”，成為“塊級(jí)”元素(block-level)；而span元素的默認(rèn)display屬性值為“inline”，稱為“行內(nèi)”元素。
     div這樣的塊級(jí)元素，就會(huì)自動(dòng)占據(jù)一定矩形空間，可以通過(guò)設(shè)置高度、寬度、內(nèi)外邊距等屬性，來(lái)調(diào)整的這個(gè)矩形的樣子，塊級(jí)元素的特征總結(jié)如下：

  • 默認(rèn)獨(dú)占一行 

  • 沒(méi)有寬度時(shí)，默認(rèn)撐滿一排

  • 支持所有css命令

    與之相反，像“span”、“a”這樣的行內(nèi)元素，則沒(méi)有自己的獨(dú)立空間，它是依附于其他塊級(jí)元素存在的，因此，對(duì)行內(nèi)元素設(shè)置高度、寬度、內(nèi)外邊距等屬性，都是無(wú)效的，行內(nèi)元素的特征總結(jié)如下：

  • 同排可以繼續(xù)跟同類的標(biāo)簽

  • 內(nèi)容撐開(kāi)寬度

  • 不支持寬高

  • 不支持上下的margin和padding

  • 代碼換行被解析

 1.元素的轉(zhuǎn)換

display:block -----> 顯示為塊:使內(nèi)聯(lián)元素具備塊屬性標(biāo)簽的特性

display:inline -----> 顯示為內(nèi)嵌:使行塊屬性標(biāo)簽具備內(nèi)聯(lián)元素的特性

display:inline-block -----> 顯示為行內(nèi)塊狀元素

行內(nèi)塊狀元素的特征：

  • 塊在一行顯示；

  • 行內(nèi)屬性標(biāo)簽支持寬高；

  • 沒(méi)有寬度的時(shí)候內(nèi)容撐開(kāi)寬度

問(wèn)題：

1、代碼換行被解析；

2、ie6 ie7 不支持塊屬性標(biāo)簽的inline-block;

 3.常見(jiàn)的行內(nèi)元素

a - 錨點(diǎn)
* abbr - 縮寫(xiě)
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
* dfn - 定義字段
* em - 強(qiáng)調(diào)
* font - 字體設(shè)定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤(pán)文本
* label - 表格標(biāo)簽
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義范例計(jì)算機(jī)代碼
* select - 項(xiàng)目選擇
* small - 小字體文本
* span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
* strike - 中劃線
* strong - 粗體強(qiáng)調(diào)
* sub - 下標(biāo)
* sup - 上標(biāo)
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變量

 4.常見(jiàn)的塊狀元素

* address - 地址
* blockquote - 塊引用
* center - 舉中對(duì)齊塊
* dir - 目錄列表
* div - 常用塊級(jí)容易，也是css layout的主要標(biāo)簽
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單
* h2 - 大標(biāo)題
* h3 - 副標(biāo)題
* h4 - 3級(jí)標(biāo)題
* h5 - 4級(jí)標(biāo)題
* h6 - 5級(jí)標(biāo)題
* h7 - 6級(jí)標(biāo)題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內(nèi)容，（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
* noscript - ）可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

補(bǔ)充樂(lè)園如何進(jìn)行中塊級(jí)元素和行內(nèi)元素的特征與轉(zhuǎn)換：

1、vertical-align（垂直對(duì)齊）

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
    .top {vertical-align:text-top}
    .bottom {vertical-align:text-bottom}
</style>
</head>
    <body>
        <p>這是一幅<img class="top" border="0" src="#" />位于段落中的圖像。</p> 
        <p>這是一幅<img class="bottom" border="0" src="#" />位于段落中的圖像。</p>
    </body>
</html>

運(yùn)行結(jié)果：
如何進(jìn)行中塊級(jí)元素和行內(nèi)元素的特征與轉(zhuǎn)換

PS：<img>標(biāo)簽中，屬性src沒(méi)有圖片的URL，請(qǐng)自行添加圖片地址測(cè)試。

2、css reset（重設(shè)）

CSS重設(shè)就是由于各種瀏覽器解釋CSS樣式的初始值有所不同，導(dǎo)致設(shè)計(jì)師在沒(méi)有定義某個(gè)CSS屬性時(shí)，不同的瀏覽器會(huì)按照自己的默認(rèn)值來(lái)為沒(méi)有定義的樣式賦值，所以我們要先定義好一些CSS樣式，來(lái)讓所有瀏覽器都按照同樣的規(guī)則解釋CSS，這樣就能避免發(fā)生這種問(wèn)題。

例1：

 *{padding:0;margin:0;}

這是最普遍最簡(jiǎn)單的CSS重設(shè)，將所有元素的padding核margin值都設(shè)為0，可以避免一些瀏覽器在理解這兩個(gè)屬性默認(rèn)值上的“分歧”。

例2：

 *{padding:0;margin:0;border:0;}

這是在上一個(gè)重設(shè)的基礎(chǔ)上添加了對(duì)border屬性的重設(shè)，初始值為0.

例3：

 *{padding:0;margin:0;border:0;outline:0;}

在前兩個(gè)的基礎(chǔ)上，添加了outline屬性的重設(shè)，防止一些沖突。

例4：

 *{ vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

濃縮實(shí)用型的css reset重設(shè)，該方法出自Perishable Press。

看完上述內(nèi)容，你們對(duì)如何進(jìn)行中塊級(jí)元素和行內(nèi)元素的特征與轉(zhuǎn)換有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝大家的支持。

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開(kāi)啟，新人活動(dòng)云服務(wù)器買(mǎi)多久送多久。

當(dāng)前文章：如何進(jìn)行中塊級(jí)元素和行內(nèi)元素的特征與轉(zhuǎn)換-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://muchs.cn/article34/dsehse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站改版、建站公司、ChatGPT、用戶體驗(yàn)、網(wǎng)站設(shè)計(jì)

廣告

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

成都定制網(wǎng)站建設(shè)