前端学习笔记

• 父布局宽度不固定的情况下，子元素如下设置可以水平居中：

.child {
        width: fit-content;
        width: -moz-fit-content;
        width: -webket-fit-content;
        margin: auto;
}

• 父布局如下设置，可以使子元素们垂直居中：

.parent {
		//设置高固定
		width: 300px;
		height: 30px;
		display: flex;
		align-items: center;
}

• input标签设置如下事件，可以限制只能输入数字：

oninput = "value=value.replace(/[^\d]/g,'')"

• css四种定位方式

1. 默认定位方式为static。
2. 只有设置了postion：relative，即定位方式为相对定位（元素相对于自身偏移），然后设置的left，right属性才生效。不会使元素脱离文档流。
3. 绝对定位postion：absolute：相对于离自己最近的，开启了定位方式的父元素进行定位（设置left，top等属性，进行偏移）。如果每层父元素都没开启定位，则相对于浏览器窗口进行定位。绝对定位会使元素脱离文档流。
4. 固定定位postion：fixed：相对于浏览器窗口进行定位。其他和绝对定位一样。

设置定位后，如果元素重叠了，可以设置z-index来改变元素优先级。