深入認(rèn)識CSS的行內(nèi)元素

一直從事ios開發(fā),前段時間接觸到前端,簡單的學(xué)習(xí)了一下css,下面給大家簡單的說一下,我使用css來寫一個頁面的心得與體會。.我是在w3c那里,通過看文檔對css有了初步的認(rèn)識,css的知識點(diǎn)整體看起來并不難。都是一些屬性。但是如果僅僅是這樣,那你就大錯特錯了,其實(shí)css并沒有人們想象中的那么簡單。先來說一下css的行內(nèi)元素

行內(nèi)元素(inline):元素在一行內(nèi)水平排列,高度由元素的內(nèi)容決定,height屬性不起作用,行內(nèi)元素也稱為內(nèi)聯(lián)元素。如span,input等元素。

常見的行內(nèi)元素有:

–a–錨點(diǎn)

–abbr–縮寫

–acronym–首字

–b–粗體(不推薦)

–bdo–bidi override

–big–大字體

–br–換行

–cite–引用

–code–計(jì)算機(jī)代碼(在引用源碼的時候需要)

–dfn–定義字段

–em–強(qiáng)調(diào)

–font–字體設(shè)定(不推薦)

–i–斜體

–img–圖片

–input–輸入框

–kbd–定義鍵盤文本

–label–表格標(biāo)簽

–q–短引用

–s–中劃線(不推薦)

–samp–定義范例計(jì)算機(jī)代碼

–select–項(xiàng)目選擇

–small–小字體文本

–span–常用內(nèi)聯(lián)容器,定義文本內(nèi)區(qū)塊

–strike–中劃線

–strong–粗體強(qiáng)調(diào)

–sub–下標(biāo)

–sup–上標(biāo)

–textarea–多行文本輸入框

–tt–電傳文本

–u–下劃線

行內(nèi)元素的特點(diǎn):

–1.設(shè)置寬度width無效。

–2.設(shè)置高度height無效,可以通過line-height來設(shè)置。

–3.設(shè)置margin只有左右margin有效,上下無效。

4.設(shè)置padding只有左右padding有效,上下則無效。注意元素范圍是增大了,但是對元素周圍的內(nèi)容是沒影響的。

5.和其他元素在同一行

6.行內(nèi)元素只能容納文本或者其他行內(nèi)元素

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,189評論 1 92
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,226評論 1 4
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 2,081評論 0 6
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,914評論 32 459
  • 正月17那天給小寶斷奶,到今天剛好一個月,自從小寶出生到斷奶將近25個月,這么長的時間里因?yàn)橛欣瞎闹С钟行量啵?..
    晴冰閱讀 142評論 0 0

友情鏈接更多精彩內(nèi)容