css学习笔记-4(新增)

html新增

多媒体标签

视频

<video>
    <source src="" type="video/mp4">
    <!--属性：autoplay= "autoplay";(自动播放)
             controls= "control";(显示播放控件)
             loop= "loop";(循环播放)
             preload= "auto|none";(预加载)
             src= "";(视频地址)
             psoter: "";(加载等待图片地址)
             muted= "muted";(静音播放)
-->
</video>

音频

<audio src="">
<!--属性参考video-->

input新增

<input type=""></input>
<!--type新增属性值：
    email(限制必须输入email类型)
    url(限制必须输入url类型)
    date(限制必须输入日期类型)
    time(限制必须输入时间类型)
    month(限制必须输入月类型)
    week(限制必须输入周类型)
    number(限制必须输入数字类型)
    tel(手机号码)
    search(搜索框)
    color(生成颜色选择表单)
)
-->

新增表单属性

required= "required";(表单内容不为空，必填)
placeholder= "";
autofocus= "autofocus";(自动聚焦，页面加载完成自动聚焦到指定表单)
autocomplete= "off|on";(用户键入时，基于之前键入过的值，应该显示出在字段中填写的选项)
multiple= "multiple";(可多文件提交)

css新增

属性选择器

/*标签[属性]{}，选择具有相同属性该类所有标签*/
input[value]{}


/*标签[属性="val"]{}，选择属性值等于val的该类所有标签*/
input[type="text"]{}

/*标签[属性^="val"{}，选择属性头等于val的该类所有标签*/
input[class^="**"]{}

/*标签[属性$="val"{}，选择属性值尾等于val的该类所有标签*/
input[class&="**"]{}

/*标签[属性*="val"{}，选择属性值包含val的该类所有标签*/
input[class*="**"]{}

/*权重(优先级)与类选择器、伪类选择器同级*/

结构伪类选择器

/*E:first-child{},匹配父元素中第一个子元素*/
div:first-child{}

/*E:last-child{},匹配父元素中最后一个子元素*/
div:last-child{}

/*E:first-child(n){},匹配父元素中第n个子元素*/
div:nth-child(n){}
/*n可为数字、公式和关键字(even(偶数)|odd(奇数))*/
/*nth-child会把所有孩子排列序号*/

/*E:nth-of-type(n),只把指定元素排列序号*/
div:nth-of-type(n){}

div:first-of-type{}
div:last-of-type(n){}
/*权重(优先级)与类选择器、伪类选择器、属性选择器同级*/

伪元素选择器

/*放到div盒子里面的前面*/
div::before{
    content: "";
    /*必须写*/
}
/*放到div盒子里面的前面*/
/**/
/*放到div盒子里面的后面*/
div::after{
    content: "";
    /*必须写*/
}
/**/
/**/
/*权重与标签选择器同级*/

伪元素清除浮动

.clearfix::after{
    content: "";
    /*伪元素必写*/
    display: block;
    /*插入元素必须是块级*/
    height: 0;
    /*不要看见这个元素*/
    clear: both;
    /*核心代码清除浮动*/
    visibility: hidden;
    /*不要看见这个元素*/
}

css3盒子模型

box-sizing: content-box|border-box;
/*content-box(默认，padding、border会撑大盒子
  border-box(padding、border不撑大盒子))*/

css滤镜

filter: blur(5px);
/*blur模糊处理，数值越大越模糊*/
/*https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter*/

计算盒子宽度

width: calc(100% + 30px);

过渡(常和hover配套使用)

/*transiton:要过渡的属性 花费时间 运动曲线 何时开始*/
div:hover{
    transition: width 1s ease 0s; 
}