分類彙整:Uncategorized

OVERFLOW應用

産生卷軸

原理:超出元素範圍内的東西,用卷軸方式呈現

<div class="card">
 <div class="circle"></div>
 <div class="square"></div>
</div>
.card{
width: 350px; height: 200px;
background-color: #EEF5DB;
position: relative;
overflow: scroll;
}

.circle{
 width: 50px; height: 50px;
 border: solid 3px #4F6367;
 border-radius: 100%;
 position: absolute;
 right: -20px;
 top: -20px;
}

.square{
 width: 70px; height: 70px;
 background-color: #4F6367;
 position: absolute;
 top: 180px;
 right: 30px;
}

Display

.
.

隱藏框外的東西

原理:超出元素範圍内的東西,給隱藏掉

<div class="card">
 <div class="circle"></div>
 <div class="square"></div>
</div>
.card{
width: 350px; height: 200px;
background-color: #EEF5DB;
position: relative;
overflow: hidden;
}

.circle{
 width: 50px; height: 50px;
 border: solid 3px #4F6367;
 border-radius: 100%;
 position: absolute;
 right: -20px;
 top: -20px;
}

.square{
 width: 70px; height: 70px;
 background-color: #4F6367;
 position: absolute;
 top: 180px;
 right: 30px;
}

Display

.
.

 

透明色設定

方法一

RGB色碼設定透明度,最後一碼0為完全透明,1為完全不透明

<div>透明文字</div>
div{
font-weight: 900;
color: rgba(0,0,0,0.5);
}

Display

透明文字

方法二

直接指定色票

<div>透明文字</div>
div{
font-weight: 900;
color: #666;
}

Display

透明文字

方法三

使用opacity,0為完全透明,1為完全不透明

<div>透明文字</div>
div{
opacity: 0.5;
}
透明文字

網頁整頁呈現

問題

  • html與body有預設一定大小,不是整頁呈現。
  • html與body有預設padding與margin,所以内容元素無法無縫接軌。
  • 所以網頁無法整頁呈現

將所有元素用border顯示,可以看出最外圍的兩個框框就是html與body的預設大小

full-size-min

解法

  • width, height設為100%
  • padding, margin設為0px
html,body{
 width: 100%; 
 height: 100%;
 padding: 0px; 
 margin: 0px;
}

成果

現在外圍的預設框線(表示網頁的邊界)都不見了!
網頁能夠整頁顯示了

full-size-2-min

div與span

DIV tag

  • 用來分隔的標籤,幾乎沒有任何預設樣式
  • 預設:display: block
<p>這是一段内文,我想要用分隔標籤特化<div>這段文字</div>並且利用div標籤。</p>
div{
font-style: italic;
}

Display
這是一段内文,我想要用分隔標籤特化

這段文字
並且利用div標籤。

SPAN tag

  • 用來分隔的標籤,幾乎沒有任何預設樣式
  • 預設:display: inline
  • 適合内文
<p>這是一段内文,我想要用分隔標籤特化<span>這段文字</span>並且利用span標籤。 </p>
div{
 font-style: italic;
}

Display
這是一段内文,我想要用分隔標籤特化這段文字並且利用span標籤。

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