css 表单、定位、浮动

1.表单美化
2.定位
3.浮动

1.表单美化
表单元素：input select textarea
获得焦点的伪类 :focus

/获得焦点/
input:focus{
background-color: lightblue;
border: 1px solid orange;
/轮廓:在边框之外的，不占据空间，使用和border一样/
/outline: none;/
outline:2px dashed green;
}
/鼠标悬停/
input.sub:hover{
background: lightgreen;
}
2.定位
定位使用：要和坐标结合起来
坐标用于控制位置（x,y） x:用left或者right ，y:用top或者bottom

（1）相对定位 position: relative;
特点：相对自身原来的位置，不影响其他元素的位置
（2）绝对定位 position:absolute
特点：相对于离它最近的带有position属性的父元素，会影响其他元素的位置，脱离标准文档流
（3）固定定位 position:fixed
特点：相对于屏幕，会影响其他元素的位置，脱离标准文档流
作用：制作广告栏。

经验：外层设置相对定位，里层设置绝对定位

2.1 z-index层级
值顺序，默认0，负数底层 正数上层
2.2 透明度
opacity：取值为0-1的数字
元素透明：整个背景文字都会有透明效果

3.浮动：
float：left/right

特点：浮动元素会脱离文档流，会影响其他不浮动元素
所有浮动元素会按照浮动方向，如果浏览器能够容纳浮动元素的空间，就会并排显示，
否则会另起一行显示。

清除浮动
clear:left/right/both

经验：通常在浮动元素的外层嵌套div，防止对后面非浮动元素的影响，导致页面串行。

3.1.overflow属性

溢出处理：
auto自动根据溢出情况添加滚动条
scroll添加滚动条
hidden溢出隐藏
overflow:hidden;

父元素高度塌陷问题：
  发生时机：该父元素的所有子元素都是浮动元素时
  解决办法：在父元素上设置overflow为hidden