前端开发教程四_ycwq-CSDN博客

本文链接：https://blog.csdn.net/YcWq_0106/article/details/111488126

关于定位以及css3的一些属性和表单元素

一、定位：

1.相对定位;(不脱离文档流)

	格式:
		position: relative;
		left: 0;
		top: 0;
		
	参照物：以自身为参照物;
	相对于自己原来的位置进行定位，不会脱离标准文档流

2.绝对定位;(全脱离文档流)

	格式:
		position: absolute;
		left: 0;
		top: 0;
		
	参照物:默认以body为参照物,如果给父级加了定位,那么就以父级为参照物;
	一般会指定其父元素为参照物进行绝对定位（子绝父相），会脱离标准文档流,同时绝对定位的元素性质会发生改变，会变成行内块标签。

3.固定定位;(全脱离文档流)

	格式:
		position: fixed;
		left: 0;
		top: 0;
		
	参照物:以可视区为参照物;
	以浏览器可视窗口为参照物进行固定定位，会脱离标准文档流，元素性质会发生改变，会变成行内块标签。

4.静态定位：元素默认就是静态定位 static,在静态定位中使用top/right/left/bottom是无效的。

5.粘性定位：他是在相对定位与固定定位之间进行切换的

z-index

z-index：设置定位元素的堆叠次序该属性值可以是正数，也可以是负数，默认值是 auto。该属性值越大，定位元素的堆叠次序越靠上。只有定位的元素设置该属性才有意义。

二、绝对居中

格式:
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -宽度/2;
	margin-top: -高度/2;

三css3属性:(不支持低版本浏览器)

伪类选择器:

当鼠标移入的时候

	格式:

		想要鼠标移入的元素:hover{
			css样式;
		}

过渡属性:

格式:

	transition: 元素的属性		过渡的时间		过渡的速度;
	
					all(全部)			(单位:秒 s)		ease(匀速)
																	ease-in(加速)
																	ease-out(减速)

浏览器内核:

-webkit-		谷歌浏览器内核

-moz-			火狐浏览器内核

-ms-				微软浏览器内核

 -o-				欧朋浏览器内核

边框圆角：

格式:

	border-radius: 10px;
	边框圆角:	四个方向;
	
	border-radius: 10px		20px;
	边框圆角:	 左上 右下	右上 左下;
	
	border-radius: 10px 	20px		30px;
	边框圆角:	左上		右上 左下	右下;
	
	border-radius: 10px		20px		30px		40px;
	边框圆角:		左上	右上		右下		左下;
	
	
	border-radius: 50%;		正圆

盒子阴影：

	box-shadow: x轴	y轴	模糊度	阴影的颜色;

字体阴影：

	text-shadow: x轴 y轴 模糊度	阴影的颜色;

过渡:

	transition: 过渡的属性   过渡的时间	过渡的速度;

2D转换：(必须要配合过渡来使用)

	transfrom: ;
	
		2D转换的属性:
		
					rotate(旋转的度数);		旋转(单位:度 deg)
					
					scale(数值);				比例缩放
					
					translate(x,y);			位移
					translateX()			X轴位移;
					translateY()			Y轴位移;
					
					skew(x,y)					倾斜(单位:度 deg)
					skewX()
					skewY()

透明度:

格式:

	opacity: 数值;		(0-1之间的数字)
	
例:

	opacity: .6;						/* 支持高版本浏览器 */
	filter: alpha(opacity: 60;);		/* 兼容IE9以下浏览器 */

遮罩层

用到的内容:定位\透明度

四、表单元素

格式:

	<from action="">
		<input type="" />
	</from>


	<input type="" />

		type=""
		
			text（文本框）
			password(密码框)
			button(按钮)
			submit(提交按钮,自带提交功能的按钮)
			checkbox(多选框)
			radio(单选框)
			
	***如果想要实现单选框功能，必须要有一样的name 属性
	
	***input标签类型没有写内容的地方，但是有可以写(value)值的属性
	
	例:
	
		<input type="" value="" />
	
	----------------------------------------------------
	
	<textarea></textarea>		文本域
	
	***如果想把自动拉伸功能关闭的话，resize: none;
	
	
	***对于表格元素上面,当鼠标点击后会有默认选中样式清除方法：outline: none;