inline元素、block元素
阿新 • • 發佈:2017-07-11
width 缺點 之間 外邊距 tom tro padding 設置 ng-
inline元素
- 不會獨占一行,相鄰的行內元素會排列在同一行內,直到一行排不下才會換行
- 高、行高、以及外邊距和內邊距不可改變
- 寬度就是它的文字或圖片的寬度,不可改變,隨元素內容變化而變化
- 內聯元素只能容納文本和其他內聯元素
- 只有水平方向margin-left、margin-right、padding-left、padding-right會產生邊距效果
block元素
- 會獨占一行,默認情況下,其寬度自動填滿父級元素寬度
- 高度、行高、以及外邊距和內邊距都可控制
- 寬度缺省時默認容器的百分之百
- 可以容納內聯元素和其他塊級元素
display屬性
inline:
- 使元素變成行內元素,擁有行內元素的特性,既可以與其他行內元素一起共享一行,不會獨占一行。
- 不能改變元素的height、width值,大小由內容撐開
- 可以使用padding、margin的left和right產生邊距效果,但是top和bottom不行
- 行內元素之間先默認水平排列,若剩余空間不足以容納下一個內聯元素,則換行 <input/><input/><input/><input/><input/>
block:
- 使元素變成塊級元素,獨占一行,在不設置自己的寬度的情況下,塊級元素默認填滿父級元素的寬度
- 能夠更改元素的height,width的值
- 可以設置padding、margin的各個屬性值,top、left、bottom、right都能產生邊距效果。
inline-block:
- 行內塊級元素,可用於塊級元素,也可用於行內元素
- 可用於換行,但有一個缺點,同一行內元素內的內容不能換行,只能行內元素之間
- 結合了inline與block的一些特點,結合了inline的第一個特點和block的第2,3,4個特點。用通俗的話講,就是不獨占一行的塊級元素
inline元素、block元素