CSS Flex 筆記

主軸,次軸

啟用: 父層設定 display:flex

justify-content: flex-start , center , flex-end
justify-content: space-around , space-between

資料流 橫:左到右  直:上到下

align-items(單行子物件) align-content(多行子物件)
align-items: flex-start , center , flex-end , stretch

flex-wrap:wrap;(換行) nowrap/wrap/wrap-reverse
flex-direction:row; //( row/column/row-reverse/column-reverse )
整合flex-direction,flex-wrap
flex-flow:row wrap;

align-self: flex-start;

延展比:flex-grow //剩下來的空間做分配
收縮比:flex-shrink //
基本比:flex-basis //控制主軸方向的長度

CKEditor,CKFinder安裝筆記

下載ckeditor,ckfinder
網站根目錄建立ck,ckimg資料夾
將ckeditor,ckfinder複製到ck資料夾
ckimg預計拿來放上傳的圖片

設定ckfinder/config.php

最重要的是設定下列二行：
$baseUrl = 'http://'.$_SERVER['HTTP_HOST'].'/ckimg/';
$baseDir = str_replace('/ck/ckfinder/config.php', '', str_replace('\\', '/', __FILE__))."/ckimg/";

test.html

(script type="text/javascript" src="(base_url)ckeditor.js")(/script)
(script type="text/javascript" src="(base_url)ckfinder.js")(/script)

(textarea id='cardpic' name='cardpic' type='text')(/textarea)

PHP編碼轉碼備忘

較嚴格
htmlentities($str);
html_entity_decode($str);

相容性較高
htmlspecialchars($str, ENTQUOTES);
htmlspecialchars_decode()

1.ENT_COMPAT(只編雙引號)
2.ENT_QUOTES(單+雙)
3.ENT_NOQUOTES(不編引號)

rawurlencode();(空白->%20)
依RFC1738將URL編碼

urlencode URL編碼字串，非字母除了-_.之外

CSS防止表格被撐開

CSS設定TABLE屬性防止表格被字撐開

table-layout: automatic/fixed;
automatic 預設值, 各儲存格(Cell)決定大小.

fixed 固定大小, 決定於表格 width及各欄位width屬性

word-wrap: break-word;強制執行換行
word-break: break-all;

px,em,百分比對照換算.

px與百分比表示對照表
10px => 77%

11px => 85%
12px => 93% (was 93)
13px => 100%
14px => 108% (was 107)
15px => 116% (was 114)
16px => 123.1% (was 122)
17px => 131% (was 129)
18px => 138.5% (was 136)
19px => 146.5% (was 144)
20px => 153.9% (was 152)
21px => 161.6% (was 159)
22px => 167%
23px => 174%
24px => 182%
25px => 189%
26px => 197%

px/13 = em
px/13.3333 = em ( for IE)

EX:set width 100px
.test {
width: 7.692em;
*width: 7.500em;
}

圖片下方空隙解決方式

三個方式
1.img{display:block}<-IE這個有效
2.div {font-size:0}
3.img{vertical-align:bottom/middle/top}