第二個工作筆記，又?jǐn)€了幾周的筆記了，趁著節(jié)前總結(jié)一下。
1、Flex
flex布局是個好東西，且目前所有瀏覽器都支持了，感受一下它的魔力：
flex完美居中:
div {
display: flex;
justify-content: center;
align-items: center;
}
2、scrollIntoView()
scrollIntoView() | scrollIntoView(true) 元素上邊框與視窗頂部對齊
scrollIntoView(false) 元素下邊框與視窗底部對齊
3、父子、兄弟節(jié)點(diǎn)的元素版
經(jīng)常使用的parent()等返回的是一個node節(jié)點(diǎn)，但有時候需要用到一個Element元素。
parentElement 對象層次中的父對象
firstElementChild 指向第一個子元素
lastElementChild 指向最后一個子元素
previousElementSibling 指向前一個同輩元素
nextElementSibling 指向后一個同輩元素
4、文本斷句
word-wrap 是否允許瀏覽器在單詞內(nèi)斷句
word-break 用來標(biāo)明怎么樣進(jìn)行單詞內(nèi)斷句
對瀏覽器進(jìn)行強(qiáng)制斷句
word-wrap: break-word;
word-break: break-all;
5、鼠標(biāo)懸浮實(shí)現(xiàn)文字提示
div :hover:after {
content: attr(data-msg);
}
6、文字從上到下排列
p {
*display: inline;
*writing-mode: tb-rl;
}
7、文字兩端對齊
text-align-last: justify;
8、 修改input光標(biāo)顏色
caret-color:red;
8、chrome瀏覽器不支持小于12px字體的解決方案
.small-font {
font-size: 12px;
display: inline-block;
-webkit-transform: scale(0.5);
}
/* 兼容IE*/
.smallsize-font {
display: inline-block;
font-size: 6px;
}
9、mousedown事件對象關(guān)于位置的屬性
clientX 鼠標(biāo)相對于當(dāng)前窗口的X坐標(biāo)
offsetX 鼠標(biāo)相對于觸發(fā)對象的X坐標(biāo)
screenX 相對于用戶屏幕的X坐標(biāo)
最后，祝國慶中秋雙節(jié)快樂~但愿人長久，千里共嬋娟。
