第六周工作笔记

第六周工作笔记

css flex布局元素垂直居中

html

<div class="flex-box">
    <span class="inner"></span>
</div>

css

.flex-box{
    display:flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    flex-direction: column;  /* 纵向排列 */
}

.inner{
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

css 禁止选中事件

-webkit-user-select: none;   

-moz-user-select: none;    

-ms-user-select: none;    

user-select: none;

Unsatisfied dependency expressed through field

错误原因：业务实现类没有@Service注解

js冒泡

js中的click事件在触发时会从点击的dom节点开始向上扩散，触发所有能触发的事件

阻止冒泡

event.stopPropagation();//阻止事件冒泡

flex布局

html:

<div class = "test">
    <div class = "item1">1</div>
    <div class = "item2">2</div>
    <div class = "item3">3</div>
</div>

css:

.test{
    //使用flex布局
    display: flex;
    //水平居中
    justify-content: center;
    //垂直居中
    align-items: center;
    //纵向布局
    flex-flow: column;
}
.item1{
    //所占权重大小
    flex: 1;
    background: red;
}
.item2{
    //所占权重大小
    flex: 2;
    background: blue;
}
.item3{
    //所占权重大小
    flex: 3;
    background: green;
}

![渐变][/img/post/7-1.png]

jquery内置方法注意事项

jquery所有的方法，如append()、hide()、show()等都需要使用$().method()的方式调用，如果使用js变量会失效

拖拽缩放插件 l_zoom l_drag

应项目需求在一个原有插件的基础上实现了一个拖拽缩放插件，支持：

• 上下左右、四个角的自由拖拽，且可以自定义最小尺寸。
• 可以传入缩放大小以适应 transform：scale 造成的元素变幻。
• 可以通过方法进行拖拽功能的禁用与赋予。

项目地址

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦