[CSS] 學習筆記

建立時間: 2014-12-30 16:39:23
更新時間: 2017-06-18 23:59:07

選擇器

選擇器 語法
#bk id為bk的元素
.img class為img的元素
#bk * #bk內的所有元素
#bk .img #bk內的所有.img元素
div #bk

id為bk的div元素

div.img class為img的div元素
#bk>li #bk的子元素中的li元素
li[color="red"] color屬性為li的元素
li[color] 有color屬性的li元素
li[color~="red"] color屬性包含red的元素
li[color|="red"] clor屬性包含red或是屬性開頭為red的li元素

 

各瀏覽器設定前綴詞

CSS有些比較新的功能像是transform跟animation

這些新功能在不同的瀏覽器要加上不同的前綴詞

才能支援該瀏覽器

 #selector{
 	-ms-transform: rotate(7deg);		/* IE */
 	-moz-transform: rotate(7deg);		/* FireFox */
 	-webkit-transform: rotate(7deg);		/* Chrome , Safari , Opera */
 	transform: rotate(7deg);
 }

 

viewport單位

1vw : viewport寬度的1%

1vh : viewport高度的1%

1vmax : viewport寬高較長的那邊

1vmin : viewport寬高較短的那邊

 

Full Screen Image

 #full-screen-image{
 	min-height: 100vh;
 	background-image: url('image-url');
 	background-position: top center;
 	background-repeat: no-repeat;
 	background-size: cover;
 }
 

 

CSS  mobile設定

假設要設定在992px以下的視窗寬度

將字體設定為14px

 @media (max-width: 992px){
     body{
       font-size:14px;
     }
 }

 

Background

background-attachment:設定背景圖片固定(fixed)或是可隨頁面滾動(scroll)

background-position:設定背景圖片位置,可使用百分比或是pixel

 

pointer-events

預設為auto

但如果設定為none將會有穿透的效果

滑鼠點下去的時候不會觸發該DOM元件的click事件

對css來說這個元件會變成透明的

 

fixed置中

 .div{
 	position: fixed;
 	top: 0;
 	right: 0;	left: 0;
 	margin-right: auto;		margin-left: auto;
 	width: 70%;
 }

 

font-awesome設定為等寬

有時候在使用font-awesome的時候

會因為每個icon寬度不同

讓排版看起來很不舒服

這時候可以用下面的方式將icon統一寬度

 .fa {
 	display: inline-block
 	width: 20.56px
 	text-align: center
 }

 

Animation

animation-name : 動畫名稱

animation-duration : 動畫時間長度

animation-fill-mode:forwards : 動畫結束後將不會回到原位置

animation-delay : 動畫延遲時間

 

::-webkit-input-placeholder

設定input placeholder的css

 input::-webkit-input-placeholder{
 	color: lightgreen;
 }

 

Transition改變高度

css的transition並不能使height從0轉換為auto

僅能設定為固定值

或是可以使用max-height

 

HTML a Tag自動換行

 a {
     word-wrap: break-word;
     display: block;
 }