Skip to content
CSS
CSS layout basic
CSS layout basic
container(可用來置中)
跨父元素 就要個別標註class="container"
設定padding left, right ⇒ 建立邊框間隔
/*打包主內容*/.container { width: 100%; padding-left: 5vw;/*我覺得用vw會比較方便*/ padding-right: 5vw; /* padding-left: 1em; padding-right: 1em; */ margin: 0 auto;}Sticky-footer
.wrap { min-height: calc(100vh - 41.33px); /*用vh去計算*/ }有預設margin的元素:
body footer p
list 消除間隔
/*原理他把list間的換行轉譯成空白了 所以inline或inline-block之間有空白*//*方法一*/<li><a href="#">moon</a></li><li> /*把下一個<li>緊接著上一個</li> 中間就沒有<br>了*/ <a href="#">sun</a></li><li> <a href="#">water</a></li><li> <a href="#">dust</a></li><li> <a href="#">plant</a></li>
/*建議*//*原理inline或inline-block之間的距離就是該ul的font-size*//*方法二*/.main-nav/*ul名自行替換*/ { font-size: 0;}/*記得，此時要使用rem單位來reset list的font-size*/.main-nav li { font-size: 1rem; /* root element font size */}list二次縮排
ul,li { margin-left: 0; padding-left: 0;}Inline v.s Inline-block v.s. block
inline形式的list 沒有width, height; margin top, down
/*讓inline list置中*/ .main-nav { text-align: center; }結論: 用inline-block在大多時候比較好 例如:
.main-nav li { /*若內嵌<a> display: block 就要用inline-block*/ display: inline-block; margin-left: 5px; margin-right: 5px; }block(link)
只要display: block link就可擴大點擊區域
.main-nav a { /*link去底線*/ text-decoration: none; /* background-color: rgb(246, 186, 66); */ color: rgb(154, 62, 3); border-radius: 1px; font-weight: bold; font-size: 20px; /*擴大點擊區域*/ display: block;}
nav
若要擴大點擊區域
a { display: block;}/*點擊區域變整個block*/若要調整框框大小
a { padding-left: 3px; padding-right: 3px;}圖片文字垂直水平置中
/*div裡的圖片*//*垂直置中*/.img { vertical align: middle;}/**/.div { text-align;}float
/*column float*/ .pic, .present { float: left; }/*兩個段落要設定相加為100%的width*/ .pic { width: 40%; }
.present { width: 60%; }
<div class="container clearfix">.<!-- 讓包含全部float元素的container clearfix-->.
<div class="pic">..<div class="present">
float v.s. inline-block
inline-block比較好做nav ⇒ 可以用text-align: canter / vertical align: middle來置中
要置左或置右，使用float比較方便 ⇒ 但要記得clearfix / padding left, right 來添加空隙
float list 置中
ul { display: inline-block;}
div { text-align: center;}position
圖片大小
調整width 會以維持比例的形式同步調整height
z-index
往上、往下層
用於設定position: fixed absolute relative的物件
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.