css中的小问题记录

CSS开发笔记

1、让checkbox与后面的说明文字对齐，把要对齐的每个标签，都加一个CSS属性

style="vertical-align:middle;"

2、去掉input text 点击之后出现的蓝色边框

outline: none;
//或者
border-color:#333;
box-shadow:none;

3、鼠标移到元素上之后变成小手

cursor:hand;  //IE完全支持，但是在firefox是不支持的，没有效果。
cursor:pointer;  //是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。
推荐使用pointer;

4、绝对定位，相对于最近一个非static定位的元素的相对位置

    先给父级元素设置属性

position: relative;

    再给子级元素设置属性

position: absolute;
left: 0px;

5、css使用margin-top定位子元素，父元素也会跟着移动

    原因：一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。

    解决办法：

1、设置父元素或者自身的display:inline-block;
2、设置父元素的border:1px aqua solid;(>0)
3、设置父元素的padding:1px;(>0)
4、给父元素设置overflow:hidden;
5、给父元素或者自身设置position:absolute;
6、设置父元素非空，填充一定的内容。

6、让table,div显示边框

border:1px solid #000; //设置对象四边1px实线黑色边框。

7、让div变成圆角矩形，或者设置圆形div

    当元素四角设置的弧度等于元素的半径时，该元素就变成一个圆形。注：该方法兼容性不好，部分浏览器不兼容，建议直接使用圆角背景图片。

border-radius:7px; //给元素四角设置半径为7px的圆弧。