1. 程式人生 > >inline元素、block元素

inline元素、block元素

width 缺點 之間 外邊距 tom tro padding 設置 ng-

inline元素

  • 不會獨占一行,相鄰的行內元素會排列在同一行內,直到一行排不下才會換行
  • 高、行高、以及外邊距和內邊距不可改變
  • 寬度就是它的文字或圖片的寬度,不可改變,隨元素內容變化而變化
  • 內聯元素只能容納文本和其他內聯元素
  • 只有水平方向margin-left、margin-right、padding-left、padding-right會產生邊距效果

block元素

  • 會獨占一行,默認情況下,其寬度自動填滿父級元素寬度
  • 高度、行高、以及外邊距和內邊距都可控制
  • 寬度缺省時默認容器的百分之百
  • 可以容納內聯元素和其他塊級元素

display屬性

inline:

  1. 使元素變成行內元素,擁有行內元素的特性,既可以與其他行內元素一起共享一行,不會獨占一行。
  2. 不能改變元素的height、width值,大小由內容撐開
  3. 可以使用padding、margin的left和right產生邊距效果,但是top和bottom不行
  4. 行內元素之間先默認水平排列,若剩余空間不足以容納下一個內聯元素,則換行 <input/><input/><input/><input/><input/>

block:

  1. 使元素變成塊級元素,獨占一行,在不設置自己的寬度的情況下,塊級元素默認填滿父級元素的寬度
  2. 能夠更改元素的height,width的值
  3. 可以設置padding、margin的各個屬性值,top、left、bottom、right都能產生邊距效果。

inline-block:

  1. 行內塊級元素,可用於塊級元素,也可用於行內元素
  2. 可用於換行,但有一個缺點,同一行內元素內的內容不能換行,只能行內元素之間
  3. 結合了inline與block的一些特點,結合了inline的第一個特點和block的第2,3,4個特點。用通俗的話講,就是不獨占一行的塊級元素

inline元素、block元素