CSS筆記
讓英文字元自動斷行
body{
word-wrap: break-word;
word-break: break-all;
}
CSS等高
#wrap {
overflow:hidden;
}
#left, #center, #right {
margin-bottom:-10000px;
padding-bottom:10000px;
}
透明
color: rgba(255, 255, 255, 0.8);
background-color: rgba(142, 213, 87, 0.3);
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
文字陰影
text-shadow: x軸位移 y軸位移 柔邊 顏色
例如:
text-shadow: 1px 1px 2px #777;
box-shadow
.shadow {
-moz-box-shadow: 3px 3px 3px 3px #669FEC;
-webkit-box-shadow: 3px 3px 3px 3px #669FEC;
box-shadow: 3px 3px 3px 3px #669FEC;
}
Class 跟 ID 的比較
這兩者最大的不同,是在於 ID 選擇器在一個 HTML 文件中只能被使用一次,而 Class 選擇器在一個 HTML 文件中可以被使用多次。第二個不同的地方,是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用,而 Class 選擇器無法被 Javascript 運用到。
1.box-sizing: border-box;
避免預設寬度被margin padding等元素撐開
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
2.clear: left;
元素加上一個 clear: left; 可以避免其他有標示 float: left;的元素影響
3.overflow: auto;
內容高度可隨著其他有標示float的元素做變化
.clearfix { overflow: auto; }
4.width: 50%;
5.@media screen
@media screen and (min-width:600px) { nav { float: left; width: 25%; } section { margin-left: 25%; } }
6.column-count
實現多欄文字
7.flex
RWD設計超方便
8.CSS 字型大小 pt, px , em , 百分比 percent 之比較
※ 1em=100%=12pt=16px
※ 0.75em=75%=9pt=12px
pt: 一般印列用字體尺寸,
px: 像素單位(pixel)
em:同百分比,1em=100%=12pt=16px = 瀏覽器預設尺寸,通常是 16px,em可以使用階層的方式設定,如第一層設定為2em,其子階層設定為 0.5em, 則子階層的實際尺寸為(2*0.5 = 1em)
percent(%): 同上,如第一層設定為200%,其子階層設定為 50%, 則子階層的實際尺寸為(200%*50% = 100%)