目录
css初始化
新增布局和表单标签
属性选择器
结构伪类选择器
伪元素选择器
box-sizing
blur函数,calc函数,transition状态转移
* {
margin:0;
padding:0;
}
em,i {
font-style:normal
斜体的文字不倾斜
}
img {
border:0;
照顾低版本浏览器,如果图片外面包含链接会有边框问题
vertical-align: middle
取消图片底侧有空白缝隙问题
}
当鼠标经过button时候变成手
button {
cursor: pointer;
}
body {
-webkit-font-smoothing: antialiased;
抗锯齿形,文字显示更清晰
font: 12px/1.5 Microsoft YaHei
1.5倍行高
}
宋体:"\5B8B\4F53"
防止汉字乱吗,通过unicode编码代替
.clearfix:after {
visibility: hidden;
clear: both;
dispaly: block;
content: "."
height: 0
}
如果mp4打不开就打开ogg
添加muted可以在谷歌浏览器解决自动播放问题
controls="controls" 有视频控制按钮
把video看成一个盒子
loop="loop"
poster="media/mi9.jpg">
这里poster代表,如果视频加载慢就显示这个图片
video {
width: 100%;
}
谷歌一样把音频声音去掉,且没有muted
input: search 属性多了个required="required" 表示内容必须书写不能为空
注意必须包含在 form action=""里面
placeholder表示提示文本
根据元素特定属性选择元素,可以不借助于类
input[value] {
必须属于input,必须包含有value属性
color:pink;
}
只能这么写,或者 input[value='what']{}
E[att]:表示选择具有att属性的E元素,选择属性=值的元素
input[type=text] {
color: pink;
}
小图标1
小图标2
小图标3
小图标4
1 class以icon开头的选择出来
div[class^=icon]{
以icon开头,选择首先是div然后具有class属性并且属性值必须是icon开头的元素
color: red;
}
2 以谁结尾:
section[class$=data] {
color:blue;
}
3 包含的情况
section[class*=icon] {
只要包含icon都会选择出来
}
注意:类选择器,属性选择器,伪类选择器,权重都是10
div.icon1 {
这是个交集选择器,11
}
如果ul里有很多li,那么在style里选择时,
ul li: first-child {
}
ul li:last-child {}
nth-child(n)
选择某个父元素的一个或者多个特定子元素
括号里的n可以是数字,关键字或者公式
n是数字,就选择第几个:
ul li:nth-child(2) {
background-color: pink;
}
n也可以是关键字:even,odd可以选出偶数行和奇数行
n都从0开始
ul li: first-of-type {
}
ul li: last-of-type {
}
第一个和最后一个孩子选中
ul li:nth-of-type使用和前面nth-child一样
区别:
nth-child会把所有盒子都排列序号,执行时先看nth-child(1),之后看前面的div,无法匹配
但是nth-of-type(1)会把指定元素的盒子排列序号
结构伪类选择器一般用于选择父级里第几个孩子
:nth-of-type属于伪类选择器权重为10
css模拟 eg:遮罩层和三角
::before
::after
element::before{}
before和after必须有content属性
放到父盒子里面的前面
element::after{}
但是都是行内元素
content加上引号,但是::before权重为1
div:: after {
content:'1';
}
通过伪元素生成新盒子放在浮动元素最后
.clearfix:after {
content: "";伪元素必须写的属性
display: block;插入元素必须是块级
height:0;不要看见这个元素
clear:both;核心代码清除浮动
visibility: hidden;不要看见这个元素
}
.clearfix:before,.clearfix:after {
content:'';
display:table;
}
相当于在float元素左边一个右边一个守护
.clearfix:after {
clear:both;
}
box-sizing: content-box盒子大小包括padding和border
border-box
img {
blur是个函数 括号里数值越大图像越模糊
filter: blur()
}
width: calc(100% -80px);
子盒子比父盒子小80像素
transition: width 1s;
第二个参数:盒子从200到400要多长时间
第三个参数:ease速度变慢;
如果有两个属性都要渐变:
div {
width: 200px;
height: 100px;
transition: width .5s ease 0s, height .5s ease 0s;
}
如果多个属性:
transition: all 0.5s;
.bar {
width:150px;
height:15px;
border:1px solid red;
border-radius: 7px;
padding:1px;
}
.bar_in {
width:50%;
height:100%;
bgc:red;
谁加过度给谁加
transition: all .7s
}
.bar:hover .bar_in {
width:100%;
}