初識CSS ③元素分類

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è)置翘悉。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末茫打,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子妖混,更是在濱河造成了極大的恐慌老赤,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,490評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件制市,死亡現(xiàn)場離奇詭異抬旺,居然都是意外死亡,警方通過查閱死者的電腦和手機祥楣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評論 3 395
  • 文/潘曉璐 我一進店門开财,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人荣堰,你說我怎么就攤上這事床未。” “怎么了振坚?”我有些...
    開封第一講書人閱讀 165,830評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長斋扰。 經(jīng)常有香客問我渡八,道長啃洋,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,957評論 1 295
  • 正文 為了忘掉前任屎鳍,我火速辦了婚禮宏娄,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘逮壁。我一直安慰自己孵坚,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,974評論 6 393
  • 文/花漫 我一把揭開白布窥淆。 她就那樣靜靜地躺著卖宠,像睡著了一般。 火紅的嫁衣襯著肌膚如雪忧饭。 梳的紋絲不亂的頭發(fā)上扛伍,一...
    開封第一講書人閱讀 51,754評論 1 307
  • 那天,我揣著相機與錄音词裤,去河邊找鬼刺洒。 笑死,一個胖子當(dāng)著我的面吹牛吼砂,可吹牛的內(nèi)容都是我干的逆航。 我是一名探鬼主播,決...
    沈念sama閱讀 40,464評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼渔肩,長吁一口氣:“原來是場噩夢啊……” “哼因俐!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起赖瞒,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤女揭,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后栏饮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吧兔,經(jīng)...
    沈念sama閱讀 45,847評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,995評論 3 338
  • 正文 我和宋清朗相戀三年袍嬉,在試婚紗的時候發(fā)現(xiàn)自己被綠了境蔼。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,137評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡伺通,死狀恐怖箍土,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情罐监,我是刑警寧澤吴藻,帶...
    沈念sama閱讀 35,819評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站弓柱,受9級特大地震影響沟堡,放射性物質(zhì)發(fā)生泄漏侧但。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,482評論 3 331
  • 文/蒙蒙 一航罗、第九天 我趴在偏房一處隱蔽的房頂上張望禀横。 院中可真熱鬧,春花似錦粥血、人聲如沸柏锄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽趾娃。三九已至,卻和暖如春蜓耻,著一層夾襖步出監(jiān)牢的瞬間茫舶,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評論 1 272
  • 我被黑心中介騙來泰國打工刹淌, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留饶氏,地道東北人。 一個月前我還...
    沈念sama閱讀 48,409評論 3 373
  • 正文 我出身青樓有勾,卻偏偏與公主長得像疹启,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蔼卡,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,086評論 2 355

推薦閱讀更多精彩內(nèi)容