分類彙整:CSS

Position

Static

    • 預設
    • 無法改動上下左右位置
    • 也無法針對内部元素做定位(進階)
    • 會隨滾輪跑走
<div class="static">static</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.static{
 position: static;
 right: 10px;
}

Display

static

.

 

Relative

  • 相對於static偏移
  • 能夠改動上下左右位置,但是以static基準移動
  • 會隨滾輪跑走
<div class="relative">relative</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.relative{
 position: relative;
 left: 10px;
}

Display

relative

.

Absolute

  • 針對上層框架(通常是body)做定位
  • 可以移動上下左右位置
  • 會隨滾輪跑走
<div class="absolute">absolute</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.absolute{
 position: absolute;
 left: 10px;
}

Display

absolute

.

Fixed

  • 無法針對上層框架做定位,只能針對body定位
  • 可以移動上下左右位置
  • 不隨滾輪跑走
<div class="fixed">fixed</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.fixed{
 position: fixed;
 //fixed要記得設定left/top/right/bottom
 //否則會消失
 left: 10px;
}

Display
can’t be showed up

備註

當單元素position改變時,不影響其他元素定位。
若需要其他元素自動改變定位,則使用margin, padding為佳。

CodePen Example

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

邊界無縫接軌導覽頁

問題

在CSS中,margin就算設 0 仍然與網頁邊界存在空隙

margin-min

原因

html/body預設有margin

解法

在css中預設

html,body{ margin: 0px; }

應用

導覽列製作

<ul class="nav">
 <li class="button">課程簡介</li>
 <li class="button">課程評價</li>
 <li class="button">問題討論</li>
 <li class="button">作業成果</li>
</ul>
.button{
  display: inline-block;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;
  letter-spacing: 2px;
  margin-right:30px;
  background-color: #72D6AC;
  color: white;
  font-family: 微軟正黑體;
  font-weight:bold;
  border-bottom:solid 5px #CCF2BF;
}
.nav{
  background-color:#72D6AC;
  width: 100%;
  height: 65px;
  margin: 0px;
}
html,body{
  height: 100%;
  width: 100%;
  margin: 0px;
}

HTML&CSS

HTML/CSS tag Meaning
id #
class .
target=”_blank” 彈出新視窗<a内部屬性>
内部超連結 用id,<ahref=”idtext”>
z-index:1 最下方
span class
div id
overflow-y=auto 有滾輪
overflow-x=hidden 無滾輪
float/clear
1rem 16px
1em 20px
display: flex 子項目平行
flex-wrap: wrap 不超出視窗大小
justify content:center 子項目置中
<hr> 底線,水平線
<span> 不換行
border: 樣式 粗細 顏色 框線
* CSS 選擇全部的元素