一朱浴、塊級(jí)元素
div瓷马、p祖屏、h1~h6腻窒、ul肆资、ol、dl抗果、li筋帖、dd、table冤馏、hr日麸、blockquote、address、table代箭、menu墩划、pre,HTML5新增的header嗡综、section乙帮、aside、footer
image
特點(diǎn):
★獨(dú)占一行
★可以設(shè)置寬高 //個(gè)人理解:獨(dú)占一行意味一定有行高极景,所以可以設(shè)置行高
★沒(méi)有定義寬度時(shí)察净,寬度為父集元素的寬度
★行內(nèi)塊可以定義內(nèi)外邊距
塊轉(zhuǎn)行內(nèi) display:inline;
塊轉(zhuǎn)行內(nèi)塊 display:inline-block;
二、行內(nèi)元素
span盼樟、img氢卡、a、lable晨缴、input译秦、abbr(縮寫)、em(強(qiáng)調(diào))击碗、big筑悴、cite(引用)、i(斜體)稍途、q(短引用)阁吝、textarea、select晰房、small求摇、sub射沟、sup殊者,strong、u(下劃線)验夯、button(默認(rèn)display:inline-block)
image
特點(diǎn):
★在一行顯示
★不能直接設(shè)置寬高
★寬高為內(nèi)容撐開的寬高
★行內(nèi)元素可以定義左右的內(nèi)外邊距猖吴,上下會(huì)被忽略掉
行內(nèi)轉(zhuǎn)塊 display:inline-block;
塊或行內(nèi)轉(zhuǎn)行內(nèi)塊 display:inline-block;
三、行內(nèi)塊元素
典型代表:img,input //【疑問(wèn)】
特點(diǎn):
★在一行上顯示
★可以設(shè)置寬高