今天就跟大家聊聊有關(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è)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的平城做網(wǎng)站的公司定做！

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

 1.元素的定義

   根據(jù)CSS規(guī)范的規(guī)定，每一個(gè)網(wǎng)頁元素都有一個(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ù)一定矩形空間，可以通過設(shè)置高度、寬度、內(nèi)外邊距等屬性，來調(diào)整的這個(gè)矩形的樣子，塊級(jí)元素的特征總結(jié)如下：

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

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

• 支持所有css命令

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

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

• 內(nè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)簽支持寬高；

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

問題：

1、代碼換行被解析；

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

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

a - 錨點(diǎn)
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
* dfn - 定義字段
* em - 強(qiáng)調(diào)
* font - 字體設(shè)定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文本
* 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.常見的塊狀元素

* 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ǔ)充樂園：

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

    .top {vertical-align:text-top}
    .bottom {vertical-align:text-bottom}


    
        
這是一幅位于段落中的圖像。
 
        
這是一幅位于段落中的圖像。
    

---

運(yùn)行結(jié)果：

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

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

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

例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)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

本文標(biāo)題：如何進(jìn)行中塊級(jí)元素和行內(nèi)元素的特征與轉(zhuǎn)換-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://weahome.cn/article/dsehse.html