第二個工作筆記，又?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é)快樂~但愿人長久，千里共嬋娟。