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 //控制主軸方向的長度

css ellipsis 當字數過多時，顯示...

當字數過多時，顯示...

.ellipsis {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

CSS:box model border-box

指定元素大小時會因為padding,border的大小而影響元素實際大小

因為預設box model是content-box

每次只要調整padding或border，整個寬度或高度就全變了~使用起來很麻煩~

現有border-box可以設定,設好寬高是多少就是多少,

不會受到padding,border大小影響,使用起來較直覺 新版瀏覽器有支援,且不影響Jquery

假設所有元素要套用,使用法如下
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}

Note:不能與Bootstrap合用, 部份格式會跑掉

內部DIV下Float後，外部DIV無法撐開

內部DIV下Float後，外部DIV無法撐開

可以在外部DIV加上class='clearfix'

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
IE
* html .clearfix {height: 1%;}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.clearfix {
    *zoom: 1;
} 

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;
}

JQuery 初探

JQuery：javascript library
主要在處理DOM文件操作.
主要功能：快速選取元素並對元素做處理
有許多plugin

選取範例：

$("div").addClass("classname");

$("div");

$("#body");

$("div#body");

$("div.classname p");

$("div > div");

$("div:has(div)");

對選取元素做處理：

$("a[target]").append("(some words)");
<a href="" target="_top"> some words </a>

$("#body").css({
border: xxx;
heifht: xxx;
});
修改css屬性.

$("form").submit(function(){
if ($("input#username").val()=="")
$("span.help").show;
});
表單送出前判斷username欄位，是否為空值，如為空值則出現help區的文字.

$("a#open").click(function(){
$("#menu").show();
return false;
});
點選id為open的連結，顯示id為menu的區域，傳回false，避免真的換頁.

$("#menu").slideDown("fast");
將id為menu的區塊以下拉式快速顯示.

$("div").animate({
width:'300',
padding: '20px'
},'slow');
將所有div漸漸變為 width 300 , padding 20

$("div").hide(500,function(){
$(this).show(500);
});
所有div以0.5秒動態隱藏，再以0.5秒動態顯示

$("#body").load("sample.html div > h1");
將sample.html裡的div下的h1的內容加入目前文件id為body的元素內.

$.getJSON("test.json",function(data){
for(var idx in data)
$("#menu").append("<li>+data[idx]+"</li>);
});
test.json檔案內容
[
"hello","world!"
]
透過getJSON()取得JSON格式資料

$("div").hide().css("color","blue").slideDown();
連續使用函數

find()
根據之前找到的元素再找裡面的元素

end()
回上一層所選擇的元素

$(document).ready(function(){
alert('Welcome!!');
});
較windows.onload優先執行.
且不需等文件內所有元件(如圖片)下載完就可執行.
也可
$(function(){
alert('Welcome!!');
});

防止 $() 與其他library相衝
jQuery.noConflice();
jQuery(document).ready(function(){
jQuery("div").addClass("classname");
});
或是另設別名
var $j = jQuery.noConflict();
$j(document).ready(function(){

$j("div").addClass("classname");
});