day0303

day0303

CSS的层叠性体现在

权重
继承

type="submit"
<button></button>
/*是一样的功能，都能进行数据提交*/

清除表单控件

outline:none;/*清除选中后的边框*/

input当清除了margin和padding之后，垂直上如果还有缝隙，不用管，按照设计图的数据设置一下就好了

在input这里设置了字体颜色之后，修饰的是输入文本的颜色,想要设置placeholder的样式得需要新的写法

::-wbkit-input-placeholder{
	colcr:white;
}

webkit css3新属性的浏览器前缀，是谷歌浏览器以及相关内核的前缀。该写法，只能在谷歌浏览器和一些高版本上兼容，其他的浏览器不兼容

如果想要书写的效果兼容到IE的一些低版本，框内的提示信息用value写，清空功能用js写

字体

font-family

谷歌浏览器、火狐浏览器默认的是微软雅黑
说明：

1. 如果是中文字体或者是多个单词组成的英文字体，需要带引号，可以不带
2. 字体各异同时设置多个字体，语法是多个字体中间用逗号连接
3. 多个字体的时候，优先解析第1个字体，如果字体库有就显示,如果没有解析第2个

鼠标悬停

用到的是新的选择器
伪类选择器（权重为10） 某某 : hover{}
想要鼠标悬停上去之后又过渡效果，那么配合CSS3新属性
transition:过渡的属性 过渡的时间 过渡的延迟时间 过渡的运动形式；
说明：

1. 过渡的属性 设置想要过渡的css属性 width height color等 默认值是all
2. 过渡的时间 单位常用是 秒s 毫秒ms
3. 过渡的延迟时间 单位常用是秒 s 毫秒 ms
4. 过渡的运动形式 默认值 ease 先慢后快最后慢
   ease-in 加速
   ease-out 减速
   ease-in-out 先加速后减速
   linear （常用值） 匀速
   steps() （常用值） 步数
   贝塞尔曲线

拆开写
transition-property 过渡的属性
transition-duration 过渡的时间
transition-delay 过渡的延迟时间
transition-timing-function 过渡的运动形式

.a2{
/* transition-property:width,height,font-size; */
	/* transition-property:all; */
	/* transition-duration:5s,10s ; */
	transition-duration:10s ;
	/* transition-delay: 5s; */
	transition-timing-function: ease;
}
.a2:hover{
	width: 1200px;
	/* height: 400px;
	font-size: 80px; */
}
.a3{
	transition-duration:10s ;
	transition-timing-function: ease-in;
}
.a3:hover{
	width: 1200px;
}
.a4{
	transition-duration:10s ;
	transition-timing-function: ease-out;
}
.a4:hover{
	width: 1200px;
}
.a5{
	transition-duration:10s ;
	transition-timing-function:linear;
}
.a5:hover{
	width: 1200px;
}
.a6{
	transition-duration:10s ;
	transition-timing-function:steps(12);
}
.a6:hover{
	width: 1200px;
}
.a7{
	transition-duration:10s ;
	transition-timing-function:cubic-bezier(0.63, 1.38, 0.29,-0.37);
}
.a7:hover{
	width: 1200px;
}
.a8{
	transition: 2s linear 5s;
	}

过渡属性如果添加在默认的时候，那么鼠标移入和移出都有过渡效果

过渡属性如果添加在hover的时候，移入时有过渡，移出时无过渡

显示隐层的方法有3个

隐藏

display:none; 彻底隐藏，位置和空间都不在，这个不支持过渡
opacity:0; 只是隐藏内容，但是内容还在，这个支持过渡
opacity设置透明度的属性，取值范围0-1，0全透明，1不透明，不带单位
visibility:hidded; 只是隐藏内容，但是空间还在，主要用在万能清除法解决塌陷，这个不支持过渡

显示

display的属性值不是none，都可以表示显示，常用时display:block;
opacity的数值不是0，就能看见，常用数值是1，可以实现全部显示
visibility:visible 显示