1.z-index不起作用时,检查元素是否定位,定位了不起作用给最上层祖先元素加z-index。
2.绝对定位,以已定位的最近的祖先元素为定位基准,一般给父级加相对定位。
3.h5表单新增的input,type类型,url,email再提交表单是会进行验证。
4.表单autocomplete可决定,是否保存之前输入内容。autofocus进入页面时,自动聚焦。
5. #list>li:nth-child(odd){background-color:pink;}
#list>li:nth-child(even){background-color:yellow;}
odd表示奇数行,even表示偶数行
3n表示行数为3的倍数
-n+4前四行生效
n+5第五个及第五个之后生效
6.body{-webkit-user-select:none;
-ms-user-select: none }
禁止用户选中页面所有页面文字
浏览器兼容前缀,当样式在某个浏览器中不生效,
可以尝试加上对应浏览器的前缀,
谷歌和Safari是-webkit-,火狐-moz-,ie -ms-,-o-
7.iframe框架标签,通过该标签一个页面上可以同时显示多个页面
8. label标签可以通过for属性关联一个表单项标签,来辅助该表单项获取焦点。点击label标签同等于点击对应的表单项。
9. 创建一个计数器叫做xin
.ol_list{counter-reset:xin;list-style: none;
padding:0;}
.ol_list>li:before{
display:inline-block;width: 2em;text-align: center;
递增xin这个计数器
counter-increment: xin;
获取计数器xin的值然后再拼接上一个空格
content: counter(xin) " ";}
10.display设置盒子模型类型
常用类型 inline(内联/行内/文本)
inline-block(内联块)
block(块)
特殊类型:
table的display值为table,
tr的值是row,
td的值是table-cell
ul的display值为block,
li的是list-item。
11.设置行高,行高与高度相等时,文字垂直居中
行高大于高度时,文字偏下,行高小于高度时,文字偏上。
12.元素的圆角最大值是该元素高宽中最长的一半。
值可以是1-4个数值,其作用与margin,padding,设置方式相同,从左上角开始顺时针排列。
border-top-left-radius:20px;设置左上角。
border-radius:20px/30px;设置四个角水平半径和垂直半径。
13. left和top设置50%时只是让元素的左上角与定位对象的
中心点重合,元素并没有垂直水平居中,可以通过margin
或者transform 中的位移来实现元素的中心点与定位对象的
中心点重合,当然也可以直接计算出垂直水平的居中的
left和top值,就是定位对象宽度减去定位元素宽度再除以
2得到left 定位对象高度减去定位元素高度再除以2得到
top 例如定位对象宽度500 定位元素宽度200 那么left
值应设置(500-200)/2
14.页面配置,name属性指定为视图设置,
设置内容为,页面宽度为显示设备宽度,页面缩放比例1,
用户手动缩放为禁止
<meta name="viewport" content="width=device-width,
initial-scale=1.0,user-scalable=no">
15.初学者学习js,出现错误时多用alert,conslole.log检测
16.关于this的使用可以这样理解,指代的调用函数的对象。