欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

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

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

塊級元素和行內元素

 1.元素的定義

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

  • 默認獨占一行 

  • 沒有寬度時，默認撐滿一排

  • 支持所有css命令

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

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

  • 內容撐開寬度

  • 不支持寬高

  • 不支持上下的margin和padding

  • 代碼換行被解析

 1.元素的轉換

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

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

display:inline-block -----> 顯示為行內塊狀元素

行內塊狀元素的特征：

  • 塊在一行顯示；

  • 行內屬性標簽支持寬高；

  • 沒有寬度的時候內容撐開寬度

問題：

1、代碼換行被解析；

2、ie6 ie7 不支持塊屬性標簽的inline-block;

 3.常見的行內元素

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

 4.常見的塊狀元素

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

補充樂園如何進行中塊級元素和行內元素的特征與轉換：

1、vertical-align（垂直對齊）

<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>

運行結果：
如何進行中塊級元素和行內元素的特征與轉換

PS：<img>標簽中，屬性src沒有圖片的URL，請自行添加圖片地址測試。

2、css reset（重設）

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

例1：

 *{padding:0;margin:0;}

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

例2：

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

這是在上一個重設的基礎上添加了對border屬性的重設，初始值為0.

例3：

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

在前兩個的基礎上，添加了outline屬性的重設，防止一些沖突。

例4：

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

濃縮實用型的css reset重設，該方法出自Perishable Press。

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

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

當前文章：如何進行中塊級元素和行內元素的特征與轉換-創(chuàng)新互聯(lián)
網頁地址：http://chinadenli.net/article34/dsehse.html

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

廣告

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

成都定制網站建設