前端小方法杂记

一、HTML与CSS

关于居中

问题1：<div>子元素在父元素中垂直居中

方法一：子元素设置display:inline-block;vertical-align:middle;

方法二：父元素设置display:flex;搭配子元素align-self:center;

方法三：父元素设置display:table;搭配子元素display: table-cell;vertical-align: middle;

问题2：在没有设置<div>宽度时的水平居中

方法：CSS3支持使用width:-moz-fit-content; width:fit-content; margin:0 auto;实现水平居中，且仅谷歌与火狐浏览器支持

关于刷新

问题：点击<a>标签后页面总会自动刷新

方法：可添加属性href="javascript:;"阻止页面刷新

关于大小、高度不一

问题1：<input>标签中 text 类型和 submit 类型设置相同的高度，显示出来却不同

原因：因为text类型的<input>标签显示的宽度和高度包含 border

方法：可在 submit 类型的<input>标签中设置box-sizing: content-box;

问题2：当在子元素中使用display:inline-block使多个子元素并排时，各子元素高度不一

方法：可在子元素中添加letter-spacing: 0;vertical-align: top;来解决

关于元素样式作用对象

问题：<div>子元素设置 margin 后会作用于父元素

方法一：对父元素添加overflow: hidden;

方法二：给父元素增加透明边框border: 1px solid transparent;或border-top: 1px solid transparent;

方法三：为父元素设置padding

关于样式

问题：去除<button>一些默认样式

方法：去除边框border:none;   去除点击时的边框outline: none;

二、JS

关于多个重叠<div>的点击

问题1：上层<div>遮挡下层<div>后，点击重叠部分无法触发下层<div>的函数

方法：可通过pointer-events:none;解决

问题2：点击子<div>不触发父<div>的函数

方法：在子<div>点击时阻止冒泡事件，即在函数中添加event.stopPropagation()

关于<input>值不变

问题：修改<input>的输入内容，获取到的值不变

方法：<input>标签可通过 value 属性设置默认值，若要可修改需要添加onChange监听函数才行

三、针对React

关于背景

问题：react 中给<div>添加背景图片时背景图片过大

方法：可设置webkitBackgroundSize: '100% 100%'

关于带参数的函数

问题：react 中定义带参数的函数

方法：在标签的 onClick 属性中使用this.函数名.bind(this,参数)，

在 constructor() 构造器中使用this.函数名=this.函数名.bind(this)，

在定义函数时参数为 (参数名,event)