首頁 >web前端 >css教學 >行內元素與區塊級元素的差異詳細介紹

行內元素與區塊級元素的差異詳細介紹

高洛峰
高洛峰原創
2017-03-07 14:16:551666瀏覽

首先,CSS規格規定,每個元素都有display屬性,決定該元素的類型,每個元素都有預設的display值,分別為區塊層級(block)、行內(inline)。

區塊級元素:(以下列舉比較常用的區塊級元素,詳情可在w3cschool查詢)

<p>定义文档中的分区或节   

<h1>定义最大的标题   

<h2>定义副标题   

<h3>定义标题   

<h4>定义标题   

<h5>定义标题   

<h6>定义最小的标题   

<ul>定义无序列表   

<ol>定义有序列表   

<li>定义有序列表或无序列表的列表项目   

<dl>定义自定义列表   

<dd>定义自定义列表中的条目   

<dt>定义自定义列表中的项目   

<hr>创建一条水平线   

<p>定义段落   

<table>定义表格   

<td>表格中的标准单元格   

<th>定义表头单元格   

<thead>标签定义表格的表头   

<tr>定义表格中的行

行內元素:(以下列舉比較常用的行內元素,詳情可在w3cschool查詢)

<a>定义超链接   

<b>字体加粗   

<span>定义在文档中的行内元素   

<img>向网页中插入题图像   

<input>输入框   

<small>小号字体效果   

<br>换行   

<big>字体加大加粗   

<strong>强调的语气   

<select>创建单选或多选菜单   

<textarea>定义文本域,多行的文本输入控件

行內元素與區塊層級元素的差異:

1.行內元素與區塊級函數可以互相轉換,透過修改display屬性值來切換區塊級元素和行內元素,行內元素

display:inline

,區塊級元素###display:block###。 ######2.行內元素和其他行內元素都會在一條水平線上排列,都是在同一行的;###### 塊級元素卻總是會在新的一行開始排列,各個塊級元素獨佔一行,垂直向下排列,若想使其水平方向排序,可使用左右浮動(float:left/right)讓其水平方向排列。 ######3.行內元素不可以設定寬高,寬度高度隨文字內容的變化而變化,但是可以設定行高(line-height),同時在設定外邊距margin上下無效,左右有效,內填充padding上下無效,左右有效;###### 塊級元素可以設定寬高,並且寬度高度以及外邊距,內填充都可隨意控制。 ######4.區塊級元素可以包含行內元素和區塊級元素,還可以容納內聯元素和其他元素;###### 行內元素不能包含區塊級元素,只能容納文字或其他行內元素。 ######以上這篇全面了解行內元素與區塊級元素的差別就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持PHP中文網。 ######更多行內元素與區塊級元素的差異詳細介紹相關文章請關注PHP中文網! ###
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn