前端零碎小知识整理

前端零碎小知识整理

不废话，直接干货：

绝对居中：

position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

如果设置了定宽：直接反方向平移宽高的一半。

em、rem、px、%、vm、vh：

1.% 相对于父元素

2.em 需要先设置父元素的“font-size” ， 他的值：为参考单位 
  默认1em = 16px
  但如果父元素 font-size 值为14px, 则子元素 1em = 14px
  因为em这个相对单位相对于font-size,所以基本多用于设置文本
  
3.rem 根元素HTML 1rem = 16px   大小由根元素大小决定
  在浏览器新版本中，如果根元素 font-size 为10px ,
  那么 1rem = 12px , 这是因为 font-size 最小值为 12px
  默认：HTML  width:100% = 100rem

4.rpx Wecheat 里面的单位

5.vm 视图窗口宽度

6.vh 视图窗口高度

绝对单位  尺寸福鼎不变的单位 px cm m

去掉滑块的默认样式：

<input type="range">

//清除滑动条的默认样式
input{
	-webkit-appearence:none;
	//以下样式设置成自己想要的效果就好
	...
}
//清除滑动块的默认样式
input::-webkit-slider-thumb{
	-webkit-appearence:none;
	//以下样式设置成自己想要的效果就好
	...
}

浮动及清除浮动：
//float 设置浮动 left 左浮动 right 右浮动
//因为设置了浮动，元素会脱离文档流，不再参与流式布局，紧跟其后的元素就会占据他原本的位置
//注意：用到了浮动，就一定要清除浮动

清除浮动方式一：
	原理：通过清理浮动，使父元素自动获取到高度。
	优点：代码少
	缺点：增加了多余的空标签  
	例如：<li class="clear"></li>   .clear{clear:both}
	
清除浮动方式二：(一般用在导航栏手动添加高)
	原理：通过手动给父元素添加高度，使父元素高度固定
	优点：简单明了，比价直接
	缺点：父元素高度固定，如果浮动元素高度不统一，会影响后面的布局。
	例如：ul{height:20px;} (只推荐在导航栏使用)
	
清除浮动方式三：（最常用的清理浮动的方式）
	优点：几乎没有缺点，是比较常用的一种清理浮动的方式
	缺点：代码比较多
	例如：ul:after{
			content:"";
			display:block;
			visibility:hidden;   //元素不可见，隐藏，但占据空间
			height:0;
			clear:both;}

三种隐藏方式区别：

1.	visibility：hidden; //隐藏，占据原来的文档，不会让原来的空间
	          （visible：显示）
	          
2. display:none;  //隐藏，不占据原来的文档，即会让出空间，不占据位置
		 （block：显示）

3. overflow：hidden;   //内容溢出隐藏，布尔属性，使标签元素隐藏，不占据空间
  （也可用于防止用户查看元素，知道匹配某些条件（比如：选择了某个复选框，然后，js可以删除hidden属性，一使此元	      素可见））

定位方式：position 设置定位方式
static： 静态定位（默认）
relative 相对定位
absolute 绝对定位
fixed 固定定位

1.	absolute 绝对定位：会脱离文档流，不再参与流式布局
			（前提是祖籍元素），先看他的父元素是否为静态定位，如果元素是静态定位，则查看他父元素的父元素，一找到HTML为止。
	注意：如果祖籍元素都为静态定位，则相对于HTML页面进行定位
		  如果不是静态定位，就相对于其父元素进行定位
		  
	所以如果想让一个元素相对于他的父元素进行定位，那么就把他的父元素设成非静态定位即可，通常设置成相对定位，因为相对定位不会破坏父元素的定位方式

2. relative 相对定位：不会脱离文档流，仍然参与流式布局，相对于自身进行定位，继续保留自身原有的位置

3. fixed 固定定位：其元素会脱离文档流，不再参与流式布局，不再随页面的滚动而滚动