工作笔记（二）

2023年5月26日 162次阅读 来源: wuyadream

第二个工作笔记，又攒了几周的笔记了，趁着节前总结一下。

1、Flex

flex布局是个好东西，且目前所有浏览器都支持了，感受一下它的魔力：
flex完美居中:

div {
            display: flex;
            justify-content: center;
            align-items: center;
        }

2、scrollIntoView()

scrollIntoView() | scrollIntoView(true)  元素上边框与视窗顶部对齐
scrollIntoView(false)  元素下边框与视窗底部对齐

3、父子、兄弟节点的元素版

经常使用的parent()等返回的是一个node节点，但有时候需要用到一个Element元素。

parentElement      对象层次中的父对象
firstElementChild  指向第一个子元素
lastElementChild  指向最后一个子元素
previousElementSibling  指向前一个同辈元素
nextElementSibling 指向后一个同辈元素

4、文本断句

word-wrap 是否允许浏览器在单词内断句
word-break 用来标明怎么样进行单词内断句

对浏览器进行强制断句

word-wrap: break-word;
word-break: break-all;

5、鼠标悬浮实现文字提示

div :hover:after {
content: attr(data-msg);
}

6、文字从上到下排列

p {
   *display: inline;
   *writing-mode: tb-rl;
}

7、文字两端对齐

text-align-last: justify;

8、 修改input光标颜色

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事件对象关于位置的属性

clientX 鼠标相对于当前窗口的X坐标
offsetX 鼠标相对于触发对象的X坐标
screenX 相对于用户屏幕的X坐标

最后，祝国庆中秋双节快乐~但愿人长久，千里共婵娟。

    原文作者：wuyadream
    原文地址: https://www.jianshu.com/p/11cb11128df7
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞