随笔分类 - H5和CSS3
摘要:功能需求: 在下拉框中选择你所需要缩放的比例, 选择好了之后,图片会按照你选择的比例进行缩放 1==》如何获取select中option选中的值 在select添加事件change 和双向绑定v-model <select @change="changeValue" v-model="myVal">
阅读全文
摘要:FormData对象介绍FormData字母意思是表单数据,H5新增的一个内置对象。可以获取任何类型的表单数据,如text radio checkbox file textarea 常用语发送ajax请求优点:简单的代码,就可以将表单中所有的类型的数据都可以搜集到,包括文件域的内容。非常方便。缺点:
阅读全文
摘要:display: flex; justify-content: space-between; flex-direction: column; <style> *{ padding: 0; margin: 0; } ul{ height: 300px; border: 4px solid red; d
阅读全文
摘要:display: flex; 的默认轴是x轴 justify-content: 设置主轴上的子元素排列的方式 所以在使用之前要确定好哪一个是主轴 /* justify-content:flex-start; 如果主轴是x,从左到右 如果主轴是y,从上到下*/ /* justify-content:
阅读全文
摘要:align-content 运用在父级元素上 align-content: 它通常与子元素的div{ margin:10px } 一起联合使用。 用在子项出现换行的情况下,并是多行的情况下哦。运用在子项侧轴上的排列方式。 align-content的值 align-content: flex-sta
阅读全文
摘要:flex-wrap:运用到父元素上 结合 display: flex; flex-wrap: wrap; 换行 flex-wrap: nowrap; 不换行 #main { width: 300px; height: 300px; border: 1px solid #c3c3c3; display
阅读全文
摘要:侧轴是相对的 默认主轴是x 所以侧轴就是y轴 align-items设置侧轴上的子元素排列的方式(单行)纵轴方向上的对齐方式 align-items: flex-start; 顶部对齐 align-items: center; 居中对齐 align-items: flex-end; 底部对齐 ali
阅读全文
摘要:/* justify-content: space-around; 运用在父级元素上 第一个子元素距离左边的距离==最后一个子元素距离右边的距离 除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素,这些子元素距离左右两边的间距都是相等 巧记:around 是四周,说明四周是
阅读全文
摘要:sessionStorage的简单使用 <body> <button id="btn1">设置值</button> <button id="btn2">获取值</button> <!-- 总结:设置值 值是字符串 sessionStorage.setItem('key','value'); 使用se
阅读全文
摘要:透明度 opacity 一个元素的 opacity 属性会应用在这个元素的本身和它的子孙上。 opacity的值在0--1;0表示完全的透明(看不见) 兼容所有的浏览 img{ filter:Alpha(opacity=45); //它的值在0-1 opactiy:0.45; //兼容IE8以下;
阅读全文