常用前端基础知识

1.可继承的样式:关于字体的所有属性都是可以继承父元素的设置

2.button按钮的默认样式去除:border:0 none; 去除按钮的边框     outline-style:none; 去除按钮的轮廓线

3.使用浮动float属性和使用定位都会将行内元素转换成行内块元素

4.除五种基本类型(string,number,undefind,null,boolean)外,都是对象;基本类型使用的是栈内存,值相对独立互不影响,而引用数据类型是保存在堆内存中的,变量保存的是内存地址,值发生改变就都会改变

5.undefind,null,0 , ' ' 都是false,可用于后台返回时做判断处理

6.行内元素只能设置左右的外边距,不能设置上下的外边距(margin)

7.立即执行函数:往往只会执行一次

8.函数的提前声明,它会在代码执行前就被创建,因此可以在函数的声明之前调用

9.函数的上下文对象this:根据函数的不同调用方式,this的指向也会不同:以函数的形式调用时,指向window;以方法的形式调用时,它指向调用方法的对象;以构造函数的形式调用时,this就是新创建的那个对象

10.封装实参的对象arguments,是一个类数组对象,可以使用索引来操作数据获取实参的长度

11.<textarea></textarea>这个双标签必须要放在同一行,否则会产生空格,也会导致提示语也看不到

12.h5新增表单type类型:email(默认电子邮箱的验证,不满足则阻止提交);tel(不实现验证,但是在移动端可以打开数字键盘);url(验证合法网址);number(只能输入数字,可设置max,最小值min,value默认值);search(提供更人性化的输入体验,可快速删除重输);range(可设置max,min,value)用于调节音量;color(可点击选择喜欢的颜色);时间相关:time,date,datetime,date

13.表单提供的其他属性:placeholder提示文本,提示占位;autofocus 自动获取焦点;autocomplete(自动完成;两个前提:成功提交过才会有记录;当前添加的元素必须要有name属性) ;require必输入属性 若无输入则阻止当前数据的提交

14.选择器:属性选择器(类似正则表达式):

  E[attr = value]{.....} 查找指定attr属性并且属性值为value的E标签

       E[attr *= value]{.....} 查找指定attr属性且属性值包含value的E标签

       E[attr ^= value]{.....} 查找指定attr属性且属性值以value开头的E标签

  E[attr $= value]{.....} 查找指定attr属性且属性值以value结尾的E标签

兄弟选择器:+ 获取当前元素的相邻的满足条件的元素;~ 获取当前元素的满足条件的兄弟元素

伪类选择器: E:first-child{.....} / E:last-child{.....} 查找E元素的父级元素中的第一个/最后一个E元素

       E:first-of-type{.....} / E:first-of-type{.....}  相对于父级元素的第一个/最后一个E元素,查找可限定类型

       E:nth-child(索引/关键字/表达式){....}  从1开始的索引;可使用关键字进行筛选 even偶数 odd 奇数 ;表达式如E:nth-child(-n+5){....} 对前五个进行操作

15.盒模型(可防止抖动)box-sizing:content-box;  盒子最终width = width+padding+border   

            box-sizing:border-box;   盒子最终width即是设置的盒子的宽度,内容的宽度会自动计算

16.边框圆角  border-radius 

      最常用的设置为border-radius:50%;  

      设置两个值匹配:左上/右下  右上/左下; 设置三个值匹配:左上   左下/右上   右下; 设置四个值匹配:左上   右上  右下  左下 ;

17.边框阴影 box-shadow: h  v  blur  spread  color  inset;

  属性解读:水平偏移值  垂直偏移值  模糊  阴影尺寸  颜色  内阴影

18.图片大小设置background-size: contain; 按照比例调整图片,不管图片是否大于容器,图片都是包含在容器中的,全部展示,因此可能会存在空白区域

        background-size: cover;  背景图图片自适应整个图片,因此若尺寸不匹配会导致图片变形

原文地址:https://www.cnblogs.com/prospective-zkq/p/9997076.html