標籤彙整:display

消除切版間隙

切版常見問題

區塊無法依照%數順利填滿版面,中間不知為何産生空隙,導致元素掉下來

.container
 .a width 70%
 .b height 30%
.container
 width: 300px
 height: 100px
 border: 1px solid #90a955

.a,.b
 border: 1px solid #90a955
 height: 100%
 background-color: rgba(193, 215, 174, 0.3)

.a
 width: 70%

.b
 width: 30% 
Display
width 70%
height 30%

解決方法

  1. 將外層包覆元素文字尺寸設0,内部元素文字尺寸設回來。
  2. display: inline-block,元素水平排列。
    詳細請看這篇文章
  3. box-sizing: border-box→外框框線尺寸包在框元素之内。
    詳細請看這篇文章
.container
 width: 300px
 height: 100px
 border: 1px solid #90a955
 // 1 將外層包覆元素文字尺寸設0,内部元素文字尺寸設回來
 font-size: 0px
.a,.b
 border: 1px solid #90a955
 height: 100%
 background-color: rgba(193, 215, 174, 0.3)
 font-size: 18.4px
 // 3 外框框線尺寸包在框元素之内
 box-sizing: border-box
 // 2 元素水平排列
 display: inline-block
.a
 width: 70%
.b
 width: 30%     
Display
width 70%
height 30%

CSS flex

意義

用來方便排版的屬性
參考資料

使用方法

  1. 對母元素 ,display: flex
  2. 對母元素,justify-content: center,子元素水平置中
  3. 對母元素,align-items: center,子元素垂直置中
  4. 子元素自動排列,不會掉出來

範例

.outer
 .inner.inner1
 .inner.inner2
 .inner.inner3
 .inner.inner4
.outer
 width: 300px
 height: 200px
 border: 1px solid #000
 display: flex
 justify-content: center

.inner
 width: calc(100% / 4)
 height: 200px
 border: 1px solid #000

Display

.inner1
.inner2
.inner3
.inner4

對比:使用display: inline-block對子元素定位

.inner1
.inner2
.inner3
.inner4

CSS Display屬性

block

  • 預設屬性
  • 一個一個排列下來
  • border:超長條
  • margin::上下左右皆可調整
<ul>
 <li class="block">block</li>
 <li class="block">block</li>
 <li class="block">block</li>
 <li class="block">block</li>
</ul>
.block{
 display: block;
 border: solid 1px black;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
}

Display

  • inline
  • inline
  • inline
  • inline

inline

  • 所有元素排在同一行
  • border:合身包覆内文
  • margin:只能動左右,無法動上下
<ul>
 <li class="inline">inline</li>
 <li class="inline">inline</li>
 <li class="inline">inline</li>
 <li class="inline">inline</li>
</ul>
.inline{
 display: inline;
 border: solid 1px black;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
}

Display

  • inline
  • inline
  • inline
  • inline

inline-block

  • 所有元素排在同一行
  • border:合身包覆内文
  • margin:上下左右皆可調整
<ul>
 <li class="inline-block">inline-block</li>
 <li class="inline-block">inline-block</li>
 <li class="inline-block">inline-block</li>
 <li class="inline-block">inline-block</li>
</ul>
.inline-block{
 display: inline-block;
 border: solid 1px black;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
}

Display

  • inline-block
  • inline-block
  • inline-block
  • inline-block