常用的css開發樣式
多行文字溢位省略號---ie8不支援
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
單行文字溢位省略號
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
溢位隱藏會有不對齊的問題 也就是Overflow的影響
需要當前行都是用浮動 有的時候浮動比行內塊好用很多
文字對其方式左右對齊
text-align: justify;
text-justify: inter-ideograph;
對齊方式
vertical-aligin:top;
移動---rem
// 封裝方法和通用樣式
getRem(1920, 100)
// onresize----頁面視窗大小發生改變時觸發
window.onresize = function () {
getRem(1920, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
//下面的程式碼是為了考慮相容性
// owidth----body的大小,會隨著螢幕大小發生改變而改變
// pwidth----設計稿的大小
var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
// console.log(oWidth)
html.style.fontSize = oWidth / pwidth * prem + "px";
}
表格tr行間距設定
border-collapse: separate;
border-spacing: 0px 5px;
a標籤下載 download=""屬性
行內框元素之間的空白元素會根據font-size變大
如果發現頁面高度無法更改在頁面也檢視不到記得在行內元素加display：block；
placeholder樣式顏色
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; }
::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #909; }
input::-webkit-input-placeholder {
color: #c5c8ce;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #c5c8ce;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #c5c8ce;
}
input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #c5c8ce;
}
媒體響應式
@media screen and (max-width: 970px) {
nav {
display: none;
}
.content-in {
margin-left: 0 !important;
}
}