CSS 中的内联元素、块级元素以及display的各个属性的特点
生活随笔
收集整理的這篇文章主要介紹了
CSS 中的内联元素、块级元素以及display的各个属性的特点
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1. display:block
1.1 block元素會獨占一行,多個block元素會各自新起一行。默認(rèn)情況下,block元素寬度自動填滿其父元素寬度
1.2 block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨占一行
1.3 block元素可以設(shè)置margin和padding屬性
2. display:inline
2.1 inline元素不會獨占一行,多個相鄰的行內(nèi)元素會排列在同一行里,直到一行排列不下,才會新?lián)Q一行,其寬度隨元素的內(nèi)容而變化
2.2 inline元素設(shè)置width,height屬性無效
2.3 inline元素的margin和padding屬性,水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果;但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產(chǎn)生邊距效果
3. display:inline-block
3.1 簡單來說就是將對象呈現(xiàn)為inline對象,但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link(a元素)inline-block屬性值,使其既具有block的寬度高度特性又具有inline的同行特性
3.2 在當(dāng)兩個元素標(biāo)簽之間有換行符時,如果用inline-block的方式將元素并排顯示時,如果父容器的寬度正好為并排顯示子元素的寬度之和,則有可能不能并排顯示,原因是inline-block會將換行渲染成空格占用一定的空間,所以為了讓子元素并排顯示則可以再父容器上設(shè)置font-size:0,這樣空格就不會占用空間,如果子元素中又要顯示的文本內(nèi)容,則再在子容器上設(shè)置font-size就好
總結(jié):
1. 常見的內(nèi)聯(lián)元素有 SPAN, A,INPUT,IMG等
總結(jié)
以上是生活随笔為你收集整理的CSS 中的内联元素、块级元素以及display的各个属性的特点的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 实现Windows和Linux之间的文件
- 下一篇: Jquery操作CSS常用方法