1炭剪、塊級元素
? ? 在html中<div>练链、 <p>、<h1>...<h6>奴拦、<ol>媒鼓、<ul>、<dl>错妖、<table>绿鸣、<address>、<blockquote> 暂氯、<form> 和 <li>就是塊級元素潮模。設(shè)置display:block就是將元素顯示為塊級元素。如下代碼就是將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素痴施,從而使a元素具有塊狀元素特點再登。a{display:block;}
特點
1、每個塊級元素都從新的一行開始晾剖,并且其后的元素也另起一行锉矢。(一個塊級元素獨占一行)
2、元素的高度齿尽、寬度沽损、行高以及頂和底邊距都可設(shè)置。
3循头、元素寬度在不設(shè)置的情況下绵估,是它本身父容器的100%(和父元素的寬度一致),除非設(shè)定一個寬度卡骂。
2国裳、內(nèi)聯(lián)元素
在html中,<a>全跨、<span>缝左、<br>、<i>浓若、<strong>渺杉、<label>、<q>挪钓、<var>是越、<cite>、<code> 和<em>就是典型的內(nèi)聯(lián)元素(行內(nèi)元素)(inline)元素碌上。當(dāng)然塊狀元素也可以通過代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素倚评。
特點
1浦徊、和其他元素都在一行上;
2天梧、元素的高度盔性、寬度及頂部和底部邊距不可設(shè)置;
3腿倚、元素的寬度就是它包含的文字或圖片的寬度纯出,不可改變。
3敷燎、內(nèi)聯(lián)塊狀元素
內(nèi)聯(lián)塊狀元素(inline-block)就是同時具備內(nèi)聯(lián)元素暂筝、塊狀元素的特點,代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素硬贯。(css2.1新增)焕襟,<img>、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽饭豹。
特點
1鸵赖、和其他元素都在一行上;
2拄衰、元素的高度它褪、寬度、行高以及頂和底邊距都可設(shè)置翘悉。