知识回顾
来源博客:u.mr90.top
css初始化
* {
margin: 0;
padding: 0
}
em, i {
font-style: normal
}
li {
list-style: none
}
img {
border: 0;
vertical-align: middle
}
button {
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button, input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide, .none {
display: none
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
HTML5
- header,nav,article,aside,senction(定义某个区域),footer
- audio,video视频和音频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
input属性
- 新增很多属性值,测试时候加入form标签
- 表单属性
required
内容不能为空,placeholder
显示提示信息 input::placeholder可改变颜色属性- autofocus:自动聚焦
- autocomplete:on/off,显示出之前输入过的内容
- multiple可以提交多个文件
CSS3新选择器
CSS3新特性
属性选择器
- 利用属性选择器可以不用借助类或者id选择器使用
[]
- 利用属性=值选择,比如:
input[type=text]{}
- 利用属性都相同,属性值开头都相同,比如:
div[class^=icon]
结尾`div[class$=data] - 权重等于10,类,属性,伪类,都是10
结构伪类选择器
- 结构类似,可使用first和last将子元素选择出来,比如 ul li:last-child
- 选择第n个元素,使用nth() 比如:ul li:nth-child(n){}
- 选择n个元素可使用
even
和odd
选择,偶数和奇数 - ul li:nth(n){},表示选择所有的孩子,从0开始
- 2n可选择所有的偶数和even相同,2n+1同理
- n+2从第二个开始,n始终都是
从0开始的
- -n+5前五个
- nth-of-type和nth-chid的区别
- nth-child会将所有的子元素排列,of-ttype将指定的选择出来
- nth-child将所有的孩子排序,原理,先去找第几个孩子,在与父元素比较
- nth-of-type先于子元素匹配在进行排序选择
伪元素选择器
- ::before和::after,不会生成新的标签
- 权重为1和标签选择器一样
- before和after必须有content属性
- 常用于字体图标
- 使用hover时要注意:hover::before中间不能空格严格按照顺序
- 伪元素也可清除浮动
.clearfix:after{
content:'';
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix:before,.clearfix:after{
display:block;
content:'';
}
.clearfix:after{
clear:both;
}
.cleafix{
*zoom:1;
}
{% endfolding %}
盒子模型
- 解决盒子变化问题
- 默认的box-sizing:content-box
box-sizing: border-box
使用后不会增大盒子padding和border
css滤镜(filter)
- filter: blur() blur是一个模糊处理函数,小括号的数值越大越模糊
CSS3calc函数
- 使子盒子比父盒子小npx
- 同步变化比如
width: calc(100% - 30px)
- 可进行加减乘除
CSS3过渡 transition
- transition:要过度的属性,时间,运动曲线,何时开始
- 谁做过渡给谁加,使用多个属性用
,
隔开,多个属性变化加all
- ease和何时开始可以省略
小米商城logo的实际运用
- 思路:使用双伪元素来实现,before设置显示,after设置隐藏,hover分别进行改变,但是这种方法无法实现过渡的效果(这是第一次的想法代码如下)
.logo {
width: 100px;
height: 100px;
margin: 100px auto;
position: relative;
background-color: rgb(240, 77, 13);
}
.milogo {
height: 100%;
width: 100%;
margin: 0 auto;
position: absolute;
}
.milogo::after,.milogo::before{
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 27%;
left: 25%;
transition: all .2s;
}
.milogo::before {
display: block;
background: url(https://s02.mifile.cn/assets/static/image/mi-logo.png) no-repeat;
}
.milogo::after {
display: none;
background: url(https://s02.mifile.cn/assets/static/image/mi-home.png) no-repeat;
}
.milogo:hover::before{
display: none;
}
.milogo:hover::after {
display: block;
}
- 思路二就是使用定位,然后改变after的位置就能实现过渡,去除直接隐藏和显示,巧妙使用定位实现logo的切换
.logo {
width: 100px;
height: 100px;
margin: 100px auto;
position: relative;
border-radius: 5px;
background-color: rgb(240, 77, 13);
overflow: hidden;
box-shadow: 1px 2px 3px #888;
}
.milogo {
height: 100%;
width: 100%;
margin: 0 auto;
position: absolute;
}
.milogo::after,.milogo::before{
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 27%;
transition: all .4s;
}
.milogo::before {
left:27%;
background: url(https://s02.mifile.cn/assets/static/image/mi-logo.png) no-repeat;
}
.milogo::after {
left: -50px;
background: url(https://s02.mifile.cn/assets/static/image/mi-home.png) no-repeat;
}
.milogo:hover::before{
left: -50px;
}
.milogo:hover::after {
left: 25px;
}