Skip to content
黃芝晴的軟體工程師之路
黃芝晴 / Hedi Huang
想邀請你成為我踏上軟體工程師之路的貴人
解決問題的好習慣
關於我
More
Share
Explore
CSS

icon picker
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

⁠
https://medium.com/ui-ux練功坊/display-屬性中常用的類別-77eb86714d8a
⁠
⁠
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;
}

⁠
Untitled.png
⁠
⁠

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">

⁠
chrome_avfvj0VtFU.png
⁠
⁠

float v.s. inline-block

Use inline-block to lay out navigation items side by side or create a simple two-column layout
Use inline-block when you need control over center and vertical alignment
Use floats to flow content along the left or right side of an element
Floats do not create default horizontal white space between elements
Be aware of collapsing containers
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

⁠
https://medium.com/ui-ux練功坊/position-屬性的基礎概念-5931254e5203
⁠
⁠

圖片大小

調整width 會以維持比例的形式同步調整height

z-index

往上、往下層
用於設定position: fixed absolute relative的物件
container(可用來置中)
Sticky-footer
有預設margin的元素:
list 消除間隔
list二次縮排
Inline v.s Inline-block v.s. block
block(link)
nav
圖片文字垂直水平置中
float
float v.s. inline-block
float list 置中
position
圖片大小
z-index
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.