visibility 对比 display
两者效果类似,用法一样,但 display 与 transition 之间有冲突,而 visibility 则不会。
style :属性的 display 被隐藏的控件不再占用显示时占用的位置
visibility :隐藏的控件仅仅是将控件设置成不可见了,控件仍然占俱原来的位置。
visibility : visible (可见)
visibility : hidden (不可见)
去掉 a 标签的默认样式:
a{
text-decoration:none ;
color:#333; //这个颜色必须写上,不然不能覆盖默认的变色
}
/* 或者 */
a:link,a:visited{color:#444;text-decoration:none;}
a:hover{color:#ff0000;}
去掉 li 的默认样式
li {
list-style-type: none;
display: inline; //这个看情况
}
让图片 img 比较自然的填充
img{
100%;
background-size: 100%
}
去掉 input 的默认样式// 第一种:直接在input中加style=“outline:none;”<input type="search" style="outline:none;:>
// 第二种方式:在顶部style中直接控制css样式: <style type="text/css"> input{outline:none;} </style>
// 第三种方式:直接用 input:focus { outline: none; } 控制聚焦时不出现蓝色边框~ input:focus { outline: none; }
// 添加补充一种:兼容的解决方法: input{ background:none; outline:none; border:0px; }
//必填选框
<input type="text" required/>
去掉 select 默认样式
select {
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: solid 1px #000;
/*很关键:将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
outline: none;
/*将背景改为红色*/
background:red;
/*加padding防止文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }
//ie兼容position-size:cover
header{
background: url("../images/top_bg.png") no-repeat;
background-size:cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../image/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../image/bg.jpg', sizingMethod='scale')";
}
能使用 :checket 尾类 的元素 只有 input ,并且 input 的 type 为 radio 与 checkbox 。
鼠标移上变小手:cursor:pointer;