資訊專欄INFORMATION COLUMN
摘要：二塊級元素塊級元素占據(jù)其父元素容器的整個空間，因此創(chuàng)建了一個塊。而塊級元素可以包含行內(nèi)元素和其他塊級元素。格式默認情況下，行內(nèi)元素不會以新行開始，而塊級元素會新起一行。
一、行內(nèi)元素
一個行內(nèi)元素只占據(jù)它對應(yīng)標簽的邊框所包含的空間。二、塊級元素
塊級元素占據(jù)其父元素（容器）的整個空間，因此創(chuàng)建了一個“塊”。通常瀏覽器會在塊級元素前后另起一個新行。三、行內(nèi)元素示例
HTML
CSS
Example
四、塊級元素示例HTML
CSS
Example
五、行內(nèi)元素的特點 5.1 和其他元素都在同一行上 5.2 高，行高及外邊距和內(nèi)邊距不可改變 5.3 寬度就是它的文字或圖片的寬度，不可改變 5.4 行內(nèi)元素只能容納文本或者其他行內(nèi)元素 5.5 設(shè)置行內(nèi)元素，需要注意如下（1）設(shè)置寬度 width 無效。
（2）設(shè)置高度 height 無效，但可以通過 line-height 來設(shè)置。
（3）設(shè)置 margin 只有 左右有效，上下無效。
（4）設(shè)置 padding 只有 左右有效，上下無效。注意元素范圍是增大了，但是對元素周圍的內(nèi)容是沒影響的。
六、塊級元素的特點 6.1 總是在新一行開始 6.2 高度，行高以及外邊距和內(nèi)邊距都可改變 6.3 若寬度沒有設(shè)置，則默認寬度為容器的100%，除非設(shè)定一個寬度 6.4 塊級元素可以容納行內(nèi)元素和其他塊級元素 七、行內(nèi)元素和塊級元素對比 7.1 內(nèi)容（1）一般情況下，行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素。
（2）而塊級元素可以包含行內(nèi)元素和其他塊級元素。這種結(jié)構(gòu)上的包含繼承區(qū)別可以使塊級元素創(chuàng)建比行內(nèi)元素更”大型“的結(jié)構(gòu)。
7.2 格式默認情況下，行內(nèi)元素不會以新行開始，而塊級元素會新起一行。
7.3 寬高（1）行內(nèi)元素不可以設(shè)置寬高
（2）塊級元素可以設(shè)置寬高
7.4 內(nèi)邊距和外邊距（1）行內(nèi)元素水平方向的 margin 和 padding 可以生效。但豎直方向的 margin 和 padding 不能生效。
（2）塊級元素可以設(shè)置margin，padding
八、行內(nèi)元素列表| a | 錨點 |
| abbr | 縮寫 |
| acronym | 首字 |
| b | 粗體(不推薦) |
| bdo | bidi override |
| big | 大字體 |
| br | 換行 |
| cite | 引用 |
| code | 計算機代碼(在引用源碼的時候需要) |
| dfn | 定義字段 |
| em | 強調(diào) |
| font | 字體設(shè)定(不推薦) |
| i | 斜體 |
| img | 圖片 |
| input | 輸入框 |
| kbd | 定義鍵盤文本 |
| label | 表格標簽 |
| q | 短引用 |
| s | 中劃線(不推薦) |
| samp | 定義范例計算機代碼 |
| select | 項目選擇 |
| small | 小字體文本 |
| span | 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊 |
| strike | 中劃線 |
| strong | 粗體強調(diào) |
| sub | 下標 |
| sup | 上標 |
| textarea | 多行文本輸入框 |
| tt | 電傳文本 |
| u | 下劃線 |
| address | 地址 |
| blockquote | 塊引用 |
| center | 舉中對齊塊 |
| dir | 目錄列表 |
| div | 常用塊級容易，也是CSS layout的主要標簽 |
| dl | 定義列表 |
| fieldset | form控制組 |
| form | 交互表單 |
| h1 | 大標題 |
| h2 | 副標題 |
| h3 | 3級標題 |
| h4 | 4級標題 |
| h5 | 5級標題 |
| h6 | 6級標題 |
| hr | 水平分隔線 |
| isindex | input prompt |
| menu | 菜單列表 |
| noframes | frames可選內(nèi)容，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容 |
| noscript | 可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容） |
| ol | 有序表單 |
| p | 段落 |
| pre | 格式化文本 |
| table | 表格 |
| ul | 無序列表 |
可變元素為根據(jù)上下文語境決定該元素為行內(nèi)元素或者塊級元素。
| applet | java applet |
| button | 按鈕 |
| del | 刪除文本 |
| iframe | inline frame |
| ins | 插入的文本 |
| map | 圖片區(qū)塊(map) |
| object | object對象 |
| script | 客戶端腳本 |
（1）行內(nèi)元素 display:inline
（2）塊級元素 display:block
（3）行內(nèi)塊元素 display:inline-block
（4）行內(nèi)元素轉(zhuǎn)換塊級元素 display:block
（5）塊級元素轉(zhuǎn)換行內(nèi)元素 display:inline
11.2 float若設(shè)置行內(nèi)元素 float:left/right，則該行內(nèi)元素轉(zhuǎn)換為塊級元素 ，且具有浮動特性。
11.3 position若為行內(nèi)元素進行定位，position:absolute 或者 position:fixed 都會把行內(nèi)元素轉(zhuǎn)換為塊級元素。
閱讀更多
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/54523.html
摘要：二塊級元素塊級元素占據(jù)其父元素容器的整個空間，因此創(chuàng)建了一個塊。而塊級元素可以包含行內(nèi)元素和其他塊級元素。格式默認情況下，行內(nèi)元素不會以新行開始，而塊級元素會新起一行。 一、行內(nèi)元素 一個行內(nèi)元素只占據(jù)它對應(yīng)標簽的邊框所包含的空間。 二、塊級元素 塊級元素占據(jù)其父元素（容器）的整個空間，因此創(chuàng)建了一個塊。通常瀏覽器會在塊級元素前后另起一個新行。 三、行內(nèi)元素示例 HTML showIm...
摘要：面試題總結(jié)現(xiàn)將我整理的一些前端筆試題分享一下，希望對大家有所幫助。中常見行內(nèi)元素和塊級元素有哪些行內(nèi)元素塊級元素行內(nèi)塊元素常見的有的和有什么區(qū)別和的值為時，都會使顯示出來的文本框不能輸入文字，不能更改更改表單域中的內(nèi)容。 2018面試題總結(jié) 現(xiàn)將我整理的一些前端筆試題分享一下，希望對大家有所幫助。 html中常見行內(nèi)元素和塊級元素有哪些?行內(nèi)元素：a,b,strong,span,im...
摘要：面試題總結(jié)現(xiàn)將我整理的一些前端筆試題分享一下，希望對大家有所幫助。中常見行內(nèi)元素和塊級元素有哪些行內(nèi)元素塊級元素行內(nèi)塊元素常見的有的和有什么區(qū)別和的值為時，都會使顯示出來的文本框不能輸入文字，不能更改更改表單域中的內(nèi)容。 2018面試題總結(jié) 現(xiàn)將我整理的一些前端筆試題分享一下，希望對大家有所幫助。 html中常見行內(nèi)元素和塊級元素有哪些?行內(nèi)元素：a,b,strong,span,im...
摘要：面試題總結(jié)現(xiàn)將我整理的一些前端筆試題分享一下，希望對大家有所幫助。中常見行內(nèi)元素和塊級元素有哪些行內(nèi)元素塊級元素行內(nèi)塊元素常見的有的和有什么區(qū)別和的值為時，都會使顯示出來的文本框不能輸入文字，不能更改更改表單域中的內(nèi)容。 2018面試題總結(jié) 現(xiàn)將我整理的一些前端筆試題分享一下，希望對大家有所幫助。 html中常見行內(nèi)元素和塊級元素有哪些?行內(nèi)元素：a,b,strong,span,im...
閱讀 2826·2021-11-22 14:45
閱讀 984·2021-10-15 09:41
閱讀 1149·2021-09-27 13:35
閱讀 3958·2021-09-09 11:56
閱讀 2691·2019-08-30 13:03
閱讀 3255·2019-08-29 16:32
閱讀 3367·2019-08-26 13:49
閱讀 844·2019-08-26 10:35
